테마 적용
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { describe, it, expect, vi, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
||||
import { render, screen, fireEvent, cleanup, within } from "@testing-library/react";
|
||||
import { FormControllerPanel } from "@/app/editor/forms/FormControllerPanel";
|
||||
import type { Block, FormBlockProps } from "@/features/editor/state/editorStore";
|
||||
|
||||
@@ -222,4 +222,183 @@ describe("FormControllerPanel", () => {
|
||||
expect(scriptTextarea.value).toContain("params.email || \"\"");
|
||||
expect(scriptTextarea.value).toContain("new Date()");
|
||||
});
|
||||
|
||||
it("폼 컨트롤러 주요 인풋/셀렉트 컨트롤은 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
||||
const formBlock = makeFormBlock("form-theme", {
|
||||
submitTarget: "webhook",
|
||||
} as any);
|
||||
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
render(
|
||||
<FormControllerPanel
|
||||
block={formBlock}
|
||||
blocks={[formBlock]}
|
||||
selectedBlockId="form-theme"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const submitTargetSelect = screen.getByLabelText("전송 대상") as HTMLSelectElement;
|
||||
const submitTargetClass = submitTargetSelect.getAttribute("class") ?? "";
|
||||
expect(submitTargetClass).toContain("bg-white");
|
||||
expect(submitTargetClass).toContain("text-slate-900");
|
||||
expect(submitTargetClass).toContain("border-slate-300");
|
||||
expect(submitTargetClass).toContain("dark:bg-slate-900");
|
||||
expect(submitTargetClass).toContain("dark:text-slate-100");
|
||||
expect(submitTargetClass).toContain("dark:border-slate-700");
|
||||
|
||||
const formWidthModeSelect = screen.getByLabelText("폼 너비 모드") as HTMLSelectElement;
|
||||
const formWidthModeClass = formWidthModeSelect.getAttribute("class") ?? "";
|
||||
expect(formWidthModeClass).toContain("bg-white");
|
||||
expect(formWidthModeClass).toContain("text-slate-900");
|
||||
expect(formWidthModeClass).toContain("border-slate-300");
|
||||
expect(formWidthModeClass).toContain("dark:bg-slate-900");
|
||||
expect(formWidthModeClass).toContain("dark:text-slate-100");
|
||||
expect(formWidthModeClass).toContain("dark:border-slate-700");
|
||||
|
||||
const successInput = screen.getByLabelText("성공 메시지") as HTMLInputElement;
|
||||
const successClass = successInput.getAttribute("class") ?? "";
|
||||
expect(successClass).toContain("bg-white");
|
||||
expect(successClass).toContain("text-slate-900");
|
||||
expect(successClass).toContain("border-slate-300");
|
||||
expect(successClass).toContain("dark:bg-slate-900");
|
||||
expect(successClass).toContain("dark:text-slate-100");
|
||||
expect(successClass).toContain("dark:border-slate-700");
|
||||
|
||||
const errorInput = screen.getByLabelText("에러 메시지") as HTMLInputElement;
|
||||
const errorClass = errorInput.getAttribute("class") ?? "";
|
||||
expect(errorClass).toContain("bg-white");
|
||||
expect(errorClass).toContain("text-slate-900");
|
||||
expect(errorClass).toContain("border-slate-300");
|
||||
expect(errorClass).toContain("dark:bg-slate-900");
|
||||
expect(errorClass).toContain("dark:text-slate-100");
|
||||
expect(errorClass).toContain("dark:border-slate-700");
|
||||
|
||||
const extraParamsTextarea = screen.getByLabelText(/추가 파라미터/) as HTMLTextAreaElement;
|
||||
const extraParamsClass = extraParamsTextarea.getAttribute("class") ?? "";
|
||||
expect(extraParamsClass).toContain("bg-white");
|
||||
expect(extraParamsClass).toContain("text-slate-900");
|
||||
expect(extraParamsClass).toContain("border-slate-300");
|
||||
expect(extraParamsClass).toContain("dark:bg-slate-900");
|
||||
expect(extraParamsClass).toContain("dark:text-slate-100");
|
||||
expect(extraParamsClass).toContain("dark:border-slate-700");
|
||||
});
|
||||
|
||||
it("Google Sheets 연동 가이드 모달 카드와 textarea 는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
||||
const formBlock = makeFormBlock("form-webhook-theme", {
|
||||
submitTarget: "webhook",
|
||||
} as any);
|
||||
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
render(
|
||||
<FormControllerPanel
|
||||
block={formBlock}
|
||||
blocks={[formBlock]}
|
||||
selectedBlockId="form-webhook-theme"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" });
|
||||
fireEvent.click(guideButton);
|
||||
|
||||
const heading = screen.getByRole("heading", { name: "Google Sheets 연동 가이드" });
|
||||
const card = heading.closest("div")?.parentElement as HTMLDivElement | null;
|
||||
expect(card).not.toBeNull();
|
||||
|
||||
const cardClass = card!.getAttribute("class") ?? "";
|
||||
expect(cardClass).toContain("bg-white");
|
||||
expect(cardClass).toContain("text-slate-900");
|
||||
expect(cardClass).toContain("border-slate-200");
|
||||
expect(cardClass).toContain("dark:bg-slate-900");
|
||||
expect(cardClass).toContain("dark:text-slate-100");
|
||||
expect(cardClass).toContain("dark:border-slate-700");
|
||||
|
||||
const scriptTextarea = screen.getByDisplayValue(/function doPost/) as HTMLTextAreaElement;
|
||||
const scriptClass = scriptTextarea.getAttribute("class") ?? "";
|
||||
expect(scriptClass).toContain("bg-white");
|
||||
expect(scriptClass).toContain("text-slate-900");
|
||||
expect(scriptClass).toContain("border-slate-300");
|
||||
expect(scriptClass).toContain("dark:bg-slate-900");
|
||||
expect(scriptClass).toContain("dark:text-slate-100");
|
||||
expect(scriptClass).toContain("dark:border-slate-700");
|
||||
});
|
||||
|
||||
it("폼 필드 매핑 체크박스와 필수 체크박스는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
||||
const formBlock = makeFormBlock("form-fields-theme", {
|
||||
fieldIds: ["input-1"],
|
||||
requiredFieldIds: ["input-1"],
|
||||
} as any);
|
||||
|
||||
const inputBlock: Block = {
|
||||
id: "input-1",
|
||||
type: "formInput",
|
||||
props: {
|
||||
label: "이름",
|
||||
formFieldName: "name",
|
||||
} as any,
|
||||
} as any;
|
||||
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
render(
|
||||
<FormControllerPanel
|
||||
block={formBlock}
|
||||
blocks={[formBlock, inputBlock]}
|
||||
selectedBlockId="form-fields-theme"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const fieldset = screen.getByRole("group", { name: "폼 필드 매핑" });
|
||||
const checkboxes = within(fieldset).getAllByRole("checkbox");
|
||||
|
||||
const includeCheckbox = checkboxes[0] as HTMLInputElement;
|
||||
const requiredCheckbox = checkboxes[1] as HTMLInputElement;
|
||||
|
||||
for (const checkbox of [includeCheckbox, requiredCheckbox]) {
|
||||
const className = checkbox.getAttribute("class") ?? "";
|
||||
expect(className).toContain("bg-white");
|
||||
expect(className).toContain("border-slate-300");
|
||||
expect(className).toContain("dark:bg-slate-900");
|
||||
expect(className).toContain("dark:border-slate-600");
|
||||
}
|
||||
});
|
||||
|
||||
it("Submit 버튼 셀렉트는 라이트/다크 듀얼 테마 크롬을 사용해야 한다", () => {
|
||||
const formBlock = makeFormBlock("form-submit-theme", {
|
||||
submitButtonId: "btn-1",
|
||||
} as any);
|
||||
|
||||
const buttonBlock: Block = {
|
||||
id: "btn-1",
|
||||
type: "button",
|
||||
props: {
|
||||
label: "제출하기",
|
||||
} as any,
|
||||
} as any;
|
||||
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
render(
|
||||
<FormControllerPanel
|
||||
block={formBlock}
|
||||
blocks={[formBlock, buttonBlock]}
|
||||
selectedBlockId="form-submit-theme"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const select = screen.getByLabelText("Submit 버튼") 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");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user