78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
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,
|
|
);
|
|
},
|
|
);
|
|
});
|