테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -0,0 +1,114 @@
+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("정렬") 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("글자 간격 프리셋") 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("최대 너비 프리셋") 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("최대 너비 커스텀") 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");
+  });
+});