frontend/packages/icons/src/Icons.test.tsx

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

import { AddIcon, DeleteIcon, EditIcon, OperationIcon } from "./index";

describe("icon accessibility", () => {
	it.each([AddIcon, EditIcon, DeleteIcon])(
		"keeps decoration hidden and exposes explicitly named images: %s",
		(Icon) => {
			const { rerender } = render(
				<button aria-label="Действие" type="button">
					<Icon />
				</button>,
			);

			expect(screen.queryByRole("img")).not.toBeInTheDocument();
			expect(
				// 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("button", { name: "Действие" }).querySelector("svg"),
			).toHaveAttribute("focusable", "false");
			rerender(
				<Icon
					aria-hidden={false}
					aria-label="Пример"
					role="img"
					size={18}
					strokeWidth={2}
				/>,
			);
			const icon = screen.getByRole("img", { name: "Пример" });
			expect(icon).toHaveAttribute("width", "18");
			expect(icon).toHaveAttribute("height", "18");
			expect(icon).toHaveAttribute("stroke-width", "2");
			expect(icon).toHaveAttribute("stroke", "currentColor");
		},
	);
	it("keeps operation icons decorative", () => {
		render(
			<button aria-label="Операция" type="button">
				<OperationIcon color="orange" variant="home" />
			</button>,
		);
		expect(screen.queryByRole("img")).not.toBeInTheDocument();
		// eslint-disable-next-line testing-library/no-node-access -- Decorative SVG has no accessible role.
		expect(screen.getByRole("button").querySelector("svg")).toHaveAttribute(
			"aria-hidden", "true",
		);
	});
});