117 lines
3.7 KiB
TypeScript
117 lines
3.7 KiB
TypeScript
import { describe, it, expect, afterEach, vi } from "vitest";
|
|
import { render, screen, fireEvent, cleanup, waitFor } from "@testing-library/react";
|
|
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
|
import type { Block } from "@/features/editor/state/editorStore";
|
|
|
|
// PublicPageRenderer 폼 제출 UX TDD
|
|
// - 성공 응답 시 FormBlockProps 의 successMessage 를 success 스타일로 표시해야 한다.
|
|
// - 실패 응답 시 FormBlockProps 의 errorMessage 를 error 스타일로 표시해야 한다.
|
|
|
|
describe("PublicPageRenderer - 폼 제출 메시지", () => {
|
|
afterEach(() => {
|
|
cleanup();
|
|
// fetch 목 초기화
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(globalThis as any).fetch = undefined;
|
|
});
|
|
|
|
it("성공 응답 시 FormBlock 의 successMessage 를 성공 메시지로 렌더해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_success",
|
|
type: "form",
|
|
props: {
|
|
kind: "contact",
|
|
submitTarget: "internal",
|
|
successMessage: "폼 성공 메시지 (config)",
|
|
errorMessage: "폼 에러 메시지 (config)",
|
|
fields: [
|
|
{ id: "f1", name: "name", label: "이름", type: "text", required: true },
|
|
],
|
|
fieldIds: [],
|
|
submitButtonId: null,
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const fetchMock = vi.fn(async () =>
|
|
new Response("ok", {
|
|
status: 200,
|
|
headers: { "Content-Type": "text/plain" },
|
|
}),
|
|
);
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(globalThis as any).fetch = fetchMock;
|
|
|
|
render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
|
|
expect(form).toBeTruthy();
|
|
|
|
const input = form.querySelector('input[name="name"]') as HTMLInputElement | null;
|
|
expect(input).not.toBeNull();
|
|
|
|
const submitButton = screen.getByRole("button", { name: "폼 전송" });
|
|
expect(submitButton).toBeTruthy();
|
|
|
|
fireEvent.submit(form);
|
|
|
|
await waitFor(() => {
|
|
expect(fetchMock).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
await waitFor(() => {
|
|
const msg = screen.getByText("폼 성공 메시지 (config)");
|
|
expect(msg).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
it("실패 응답 시 FormBlock 의 errorMessage 를 에러 메시지로 렌더해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_error",
|
|
type: "form",
|
|
props: {
|
|
kind: "contact",
|
|
submitTarget: "internal",
|
|
successMessage: "폼 성공 메시지 (config)",
|
|
errorMessage: "폼 에러 메시지 (config)",
|
|
fields: [
|
|
{ id: "f1", name: "name", label: "이름", type: "text", required: true },
|
|
],
|
|
fieldIds: [],
|
|
submitButtonId: null,
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const fetchMock = vi.fn(async () =>
|
|
new Response("error", {
|
|
status: 500,
|
|
headers: { "Content-Type": "text/plain" },
|
|
}),
|
|
);
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(globalThis as any).fetch = fetchMock;
|
|
|
|
render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
|
|
expect(form).toBeTruthy();
|
|
|
|
const submitButton = screen.getByRole("button", { name: "폼 전송" });
|
|
expect(submitButton).toBeTruthy();
|
|
|
|
fireEvent.submit(form);
|
|
|
|
await waitFor(() => {
|
|
expect(fetchMock).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
await waitFor(() => {
|
|
const errorMsg = screen.getByText("폼 에러 메시지 (config)");
|
|
expect(errorMsg).toBeTruthy();
|
|
});
|
|
});
|
|
});
|