115 lines
3.8 KiB
TypeScript
115 lines
3.8 KiB
TypeScript
import { describe, it, expect, vi, afterEach } from "vitest";
|
|
import { render, screen, cleanup } from "@testing-library/react";
|
|
import { TextPropertiesPanel } from "@/app/editor/panels/TextPropertiesPanel";
|
|
import type { TextBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
// TextPropertiesPanel 컨트롤 라이트/다크 테마 TDD
|
|
|
|
describe("TextPropertiesPanel", () => {
|
|
const baseProps: TextBlockProps = {
|
|
text: "텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
} as any;
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
it("텍스트 정렬 셀렉트는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<TextPropertiesPanel
|
|
textProps={baseProps}
|
|
selectedBlockId="text-align"
|
|
updateBlock={updateBlock}
|
|
editingBlockId={null}
|
|
setEditingText={() => {}}
|
|
/>,
|
|
);
|
|
|
|
const select = screen.getByLabelText("Alignment") as HTMLSelectElement;
|
|
const className = select.getAttribute("class") ?? "";
|
|
|
|
expect(className).toContain("bg-white");
|
|
expect(className).toContain("text-slate-900");
|
|
expect(className).toContain("border-slate-300");
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-100");
|
|
expect(className).toContain("dark:border-slate-700");
|
|
});
|
|
|
|
it("글자 간격 프리셋 셀렉트는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<TextPropertiesPanel
|
|
textProps={baseProps}
|
|
selectedBlockId="text-letter-spacing"
|
|
updateBlock={updateBlock}
|
|
editingBlockId={null}
|
|
setEditingText={() => {}}
|
|
/>,
|
|
);
|
|
|
|
const select = screen.getByLabelText("Letter spacing preset") as HTMLSelectElement;
|
|
const className = select.getAttribute("class") ?? "";
|
|
|
|
expect(className).toContain("bg-white");
|
|
expect(className).toContain("text-slate-900");
|
|
expect(className).toContain("border-slate-300");
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-100");
|
|
expect(className).toContain("dark:border-slate-700");
|
|
});
|
|
|
|
it("최대 너비 프리셋 셀렉트는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<TextPropertiesPanel
|
|
textProps={baseProps}
|
|
selectedBlockId="text-max-width-select"
|
|
updateBlock={updateBlock}
|
|
editingBlockId={null}
|
|
setEditingText={() => {}}
|
|
/>,
|
|
);
|
|
|
|
const select = screen.getByLabelText("Max width preset") as HTMLSelectElement;
|
|
const className = select.getAttribute("class") ?? "";
|
|
|
|
expect(className).toContain("bg-white");
|
|
expect(className).toContain("text-slate-900");
|
|
expect(className).toContain("border-slate-300");
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-100");
|
|
expect(className).toContain("dark:border-slate-700");
|
|
});
|
|
|
|
it("최대 너비 커스텀 인풋은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<TextPropertiesPanel
|
|
textProps={baseProps}
|
|
selectedBlockId="text-max-width-input"
|
|
updateBlock={updateBlock}
|
|
editingBlockId={null}
|
|
setEditingText={() => {}}
|
|
/>,
|
|
);
|
|
|
|
const input = screen.getByLabelText("Max width custom") as HTMLInputElement;
|
|
const className = input.getAttribute("class") ?? "";
|
|
|
|
expect(className).toContain("bg-white");
|
|
expect(className).toContain("text-slate-900");
|
|
expect(className).toContain("border-slate-300");
|
|
expect(className).toContain("dark:bg-slate-900");
|
|
expect(className).toContain("dark:text-slate-100");
|
|
expect(className).toContain("dark:border-slate-700");
|
|
});
|
|
});
|