refactor: colocate frontend component files

2026-09-23 08:34:58 +03:00
parent 85fcfe3d07
commit b987fd8e78
190 changed files with 131 additions and 108 deletions
@@ -0,0 +1,85 @@
+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, 1, 3, 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),
+			);
+			expect(container.querySelectorAll("dl")).toHaveLength(count);
+			expect(
+				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);
+			expect(term.querySelector('[aria-hidden="true"]')).toHaveTextContent(
+				symbol,
+			);
+			expect(screen.getByRole("definition")).toHaveTextContent(expected);
+			expect(term.parentElement).toBe(
+				screen.getByRole("definition").parentElement,
+			);
+		},
+	);
+
+	it("keeps USD and CAD as distinct supplied values", () => {
+		render(
+			<MantineProvider>
+				<CurrencyCards
+					amounts={[
+						{ currency: "USD", value: "1.00" },
+						{ currency: "CAD", value: "2.00" },
+					]}
+				/>
+			</MantineProvider>,
+		);
+		expect(
+			screen.getAllByRole("definition").map((node) => node.textContent),
+		).toEqual(["1,00 $", "2,00 CAD"]);
+	});
+});