import { MantineProvider } from "@mantine/core";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import { CurrencyCards } from "./CurrencyCards.view";

describe("CurrencyCards currency presentation", () => {
	it.each([0, 5])(
		"renders only the %i supplied totals in upstream order",
		(count) => {
			const totals = [
				{ currency: "EUR", value: "3.00" },
				{ currency: "USD", value: "2.00" },
				{ currency: "RUB", value: "1.00" },
				{ currency: "CAD", value: "4.00" },
				{ currency: "XYZ", value: "5.00" },
			].slice(0, count);

			const { container } = render(
				<MantineProvider>
					<CurrencyCards amounts={totals} />
				</MantineProvider>,
			);

			expect(
				screen.queryAllByRole("definition").map(node => node.textContent),
			).toEqual(
				["3,00 €", "2,00 $", "1,00 ₽", "4,00 CAD", "5,00 XYZ"].slice(0, count),
			);
			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
			expect(container.querySelectorAll("dl")).toHaveLength(count);
			expect(
				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
				container.querySelector("[tabindex], button, a, input"),
			).toBeNull();
		},
	);

	it.each([
		["RUB", "125000.50", "125 000,50 ₽", "Российский рубль", "₽"],
		["USD", "320.00", "320,00 $", "Доллар США", "$"],
		["EUR", "9876.54321", "9 876,54321 €", "Евро", "€"],
		[
			"RUB",
			"123456789012.345678901",
			"123 456 789 012,345678901 ₽",
			"Российский рубль",
			"₽",
		],
		["USD", "-1234567.890123", "-1 234 567,890123 $", "Доллар США", "$"],
		["EUR", "987654321.000001", "987 654 321,000001 €", "Евро", "€"],
		["USD", "-0.5", "-0,5 $", "Доллар США", "$"],
		["CAD", "20.00", "20,00 CAD", "CAD", "CAD"],
		["XYZ", "1.000", "1,000 XYZ", "XYZ", "XYZ"],
	])(
		"preserves %s %s and its currency identity",
		(currency, value, expected, name, symbol) => {
			render(
				<MantineProvider>
					<CurrencyCards amounts={[{ currency, value }]} />
				</MantineProvider>,
			);
			const term = screen.getByRole("term");
			expect(term).toHaveTextContent(name);
			// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
			expect(term.querySelector("[aria-hidden=\"true\"]")).toHaveTextContent(
				symbol,
			);
			expect(screen.getByRole("definition")).toHaveTextContent(expected);
			// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
			expect(term.parentElement).toBe(
				// eslint-disable-next-line testing-library/no-node-access -- This assertion checks DOM structure, decoration or focus behavior that semantic queries cannot establish.
				screen.getByRole("definition").parentElement,
			);
		},
	);
});