94 lines
3.6 KiB
TypeScript
94 lines
3.6 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
|
|
|
|
describe("ColorPickerField - 테마", () => {
|
|
it("HEX 텍스트 인풋은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
|
|
render(
|
|
<ColorPickerField
|
|
label="색상"
|
|
ariaLabelColorInput="컬러 입력"
|
|
ariaLabelHexInput="HEX 입력"
|
|
value="#ff0000"
|
|
onChange={() => {}}
|
|
palette={TEXT_COLOR_PALETTE}
|
|
/>,
|
|
);
|
|
|
|
const hexInput = screen.getByLabelText("HEX 입력") as HTMLInputElement;
|
|
const className = hexInput.getAttribute("class") ?? "";
|
|
|
|
// 라이트 모드: 흰 배경 + 어두운 텍스트
|
|
expect(className).toContain("bg-white");
|
|
expect(className).toContain("text-slate-900");
|
|
// 다크 모드: 다크 배경 + 밝은 텍스트
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-100");
|
|
});
|
|
|
|
it("팔레트 드롭다운 요약 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
|
|
render(
|
|
<ColorPickerField
|
|
label="색상"
|
|
ariaLabelColorInput="컬러 입력"
|
|
ariaLabelHexInput="HEX 입력"
|
|
value="#ff0000"
|
|
onChange={() => {}}
|
|
palette={TEXT_COLOR_PALETTE}
|
|
/>,
|
|
);
|
|
|
|
const [label] = screen.getAllByText("Color palette");
|
|
const button = label.closest("button") as HTMLButtonElement | null;
|
|
expect(button).not.toBeNull();
|
|
|
|
const className = button!.getAttribute("class") ?? "";
|
|
|
|
// 라이트 모드: 밝은 배경 + 어두운 텍스트
|
|
expect(className).toContain("bg-white");
|
|
expect(className).toContain("text-slate-900");
|
|
// 다크 모드: 다크 배경 + 밝은 텍스트
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-100");
|
|
});
|
|
|
|
it("팔레트 드롭다운 항목은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
|
render(
|
|
<ColorPickerField
|
|
label="색상"
|
|
ariaLabelColorInput="컬러 입력"
|
|
ariaLabelHexInput="HEX 입력"
|
|
value="#ff0000"
|
|
onChange={() => {}}
|
|
palette={TEXT_COLOR_PALETTE}
|
|
/>,
|
|
);
|
|
|
|
// 드롭다운을 연다
|
|
const [label] = screen.getAllByText("Color palette");
|
|
const toggleButton = label.closest("button") as HTMLButtonElement | null;
|
|
expect(toggleButton).not.toBeNull();
|
|
fireEvent.click(toggleButton!);
|
|
|
|
// 팔레트 첫 항목 버튼(기본값: None)을 role/name 기준으로 찾는다
|
|
const itemButton = screen.getByRole("button", { name: "None" }) as HTMLButtonElement;
|
|
const className = itemButton.getAttribute("class") ?? "";
|
|
|
|
// 라이트 모드: 흰 배경 + 어두운 텍스트
|
|
expect(className).toContain("bg-white");
|
|
expect(className).toContain("text-slate-900");
|
|
// 다크 모드: 다크 배경 + 밝은 텍스트
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-100");
|
|
|
|
// 색상 불렛(span)은 테두리를 가져야 한다 (흰색/투명 색상도 배경과 구분되도록)
|
|
const bullet = itemButton.querySelector("span span") as HTMLSpanElement | null;
|
|
expect(bullet).not.toBeNull();
|
|
const bulletClass = bullet!.getAttribute("class") ?? "";
|
|
expect(bulletClass).toContain("rounded-full");
|
|
expect(bulletClass).toContain("border");
|
|
expect(bulletClass).toContain("border-slate-300");
|
|
expect(bulletClass).toContain("dark:border-slate-700");
|
|
});
|
|
});
|