jaybe/page-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TDD,E2E 개선, 미적용 스타일 개선
CI / test (push) Failing after 2m54s
Details
CI / e2e (push) Has been skipped
Details
CI / pr_and_merge (push) Has been skipped
Details

Browse Source
This commit is contained in:
Jaybe
2025-12-07 09:52:42 +09:00
parent e726f43f7c
commit a5b432fb7b
167 changed files with 7397 additions and 663 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/PublicPageRendererFormSubmitMessages.spec.tsx
+168 -21
View File
@@ -25,11 +25,26 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)",
errorMessage: "폼 에러 메시지 (config)",
fields: [
{ id: "f1", name: "name", label: "이름", type: "text", required: true },
],
fieldIds: [],
submitButtonId: null,
fieldIds: ["field_name"],
requiredFieldIds: ["field_name"],
submitButtonId: "submit_btn",
} as any,
},
{
id: "field_name",
type: "formInput",
props: {
label: "이름",
formFieldName: "name",
required: true,
} as any,
},
{
id: "submit_btn",
type: "button",
props: {
label: "제출하기",
href: "#",
} as any,
},
];
@@ -45,16 +60,13 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
render(<PublicPageRenderer blocks={blocks} />);
const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
expect(form).toBeTruthy();
const nameInput = screen.getByLabelText("이름") as HTMLInputElement;
fireEvent.change(nameInput, { target: { value: "홍길동" } });
const input = form.querySelector('input[name="name"]') as HTMLInputElement | null;
expect(input).not.toBeNull();
const submitButton = screen.getByRole("button", { name: "폼 전송" });
const submitButton = screen.getByRole("link", { name: "제출하기" });
expect(submitButton).toBeTruthy();
fireEvent.submit(form);
fireEvent.click(submitButton);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
@@ -76,11 +88,26 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)",
errorMessage: "폼 에러 메시지 (config)",
fields: [
{ id: "f1", name: "name", label: "이름", type: "text", required: true },
],
fieldIds: [],
submitButtonId: null,
fieldIds: ["field_name"],
requiredFieldIds: ["field_name"],
submitButtonId: "submit_btn",
} as any,
},
{
id: "field_name",
type: "formInput",
props: {
label: "이름",
formFieldName: "name",
required: true,
} as any,
},
{
id: "submit_btn",
type: "button",
props: {
label: "제출하기",
href: "#",
} as any,
},
];
@@ -96,13 +123,13 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
render(<PublicPageRenderer blocks={blocks} />);
const form = screen.getByTestId("preview-form-controller") as HTMLFormElement;
expect(form).toBeTruthy();
const nameInput = screen.getByLabelText("이름") as HTMLInputElement;
fireEvent.change(nameInput, { target: { value: "홍길동" } });
const submitButton = screen.getByRole("button", { name: "폼 전송" });
const submitButton = screen.getByRole("link", { name: "제출하기" });
expect(submitButton).toBeTruthy();
fireEvent.submit(form);
fireEvent.click(submitButton);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
@@ -113,4 +140,124 @@ describe("PublicPageRenderer - 폼 제출 메시지", () => {
expect(errorMsg).toBeTruthy();
});
});
it("필수 필드가 비어 있고 errorMessage 가 없으면 기본 문구에 필수 항목 라벨을 포함해야 한다", async () => {
const blocks: Block[] = [
{
id: "form_required_default_msg",
type: "form",
props: {
kind: "contact",
submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)",
fieldIds: ["field_email"],
requiredFieldIds: ["field_email"],
submitButtonId: "submit_btn",
} as any,
},
{
id: "field_email",
type: "formInput",
props: {
label: "이메일",
formFieldName: "email",
required: true,
} as any,
},
{
id: "submit_btn",
type: "button",
props: {
label: "제출하기",
href: "#",
} 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 submitButton = screen.getByRole("link", { name: "제출하기" });
expect(submitButton).toBeTruthy();
fireEvent.click(submitButton);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(0);
});
await waitFor(() => {
const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이메일/);
expect(errorMsg).toBeTruthy();
});
});
it("필수 필드가 비어 있으면 요청을 보내지 않고 필수 항목 안내 메시지를 표시해야 한다 (errorMessage 설정 시)", async () => {
const blocks: Block[] = [
{
id: "form_required",
type: "form",
props: {
kind: "contact",
submitTarget: "internal",
successMessage: "폼 성공 메시지 (config)",
errorMessage: "폼 에러 메시지 (config)",
fieldIds: ["field_name"],
requiredFieldIds: ["field_name"],
submitButtonId: "submit_btn",
} as any,
},
{
id: "field_name",
type: "formInput",
props: {
label: "이름",
formFieldName: "name",
required: true,
} as any,
},
{
id: "submit_btn",
type: "button",
props: {
label: "제출하기",
href: "#",
} 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 submitButton = screen.getByRole("link", { name: "제출하기" });
expect(submitButton).toBeTruthy();
// 이름 필드를 비운 채로 제출한다.
fireEvent.click(submitButton);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(0);
});
await waitFor(() => {
const errorMsg = screen.getByText(/다음 필수 항목을 입력해 주세요:\s*-\s*이름/);
expect(errorMsg).toBeTruthy();
});
});
});