You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
// frontend/tests/Icon.test.tsx
|
|
import { render } from "@testing-library/react";
|
|
import { describe, it, expect, vi } from "vitest";
|
|
import { Icon } from "@/components/Icon";
|
|
import { PATHS } from "@/components/icons/paths";
|
|
|
|
describe("Icon", () => {
|
|
it("모든 글리프가 split된 path 개수만큼 <path>를 그린다", () => {
|
|
for (const [name, d] of Object.entries(PATHS)) {
|
|
const { container, unmount } = render(<Icon name={name as keyof typeof PATHS} />);
|
|
const expected = d.split("|").length;
|
|
expect(container.querySelectorAll("path").length).toBe(expected);
|
|
unmount();
|
|
}
|
|
});
|
|
|
|
it("stroke-width 기본값 1.9, viewBox 0 0 24 24", () => {
|
|
const { container } = render(<Icon name="grid" />);
|
|
const svg = container.querySelector("svg")!;
|
|
expect(svg.getAttribute("stroke-width")).toBe("1.9");
|
|
expect(svg.getAttribute("viewBox")).toBe("0 0 24 24");
|
|
});
|
|
|
|
it("알 수 없는 이름은 경고 + 빈 svg 폴백(렌더 깨짐 방지)", () => {
|
|
const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
|
|
// @ts-expect-error 의도적으로 잘못된 이름 전달
|
|
const { container } = render(<Icon name={"nope"} />);
|
|
expect(container.querySelectorAll("path").length).toBe(0);
|
|
expect(container.querySelector("svg")).toBeTruthy();
|
|
expect(warn).toHaveBeenCalled();
|
|
warn.mockRestore();
|
|
});
|
|
|
|
it("핵심 글리프 13개(MAIN icon)가 PATHS에 존재한다", () => {
|
|
[
|
|
"grid",
|
|
"inbox",
|
|
"spark",
|
|
"zap",
|
|
"route",
|
|
"cal",
|
|
"check",
|
|
"mail",
|
|
"bell",
|
|
"brain",
|
|
"send",
|
|
"heart",
|
|
"moon",
|
|
].forEach((n) => expect(PATHS).toHaveProperty(n));
|
|
});
|
|
});
|