Files
page-builder/tests/api/export.spec.ts
jaybe 7a8ad7c057
CI / test (push) Failing after 10m34s
CI / pr_and_merge (push) Has been cancelled
이미지 파일 업로드 기능
2025-11-23 19:07:41 +09:00

726 lines
21 KiB
TypeScript

import "dotenv/config";
import { describe, it, expect } from "vitest";
import JSZip from "jszip";
import { promises as fs } from "fs";
import path from "path";
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
const BASE_URL = "http://localhost";
// /api/export 라우트 TDD:
// - blocks + projectConfig 를 받아 HTML/CSS/JS 가 포함된 ZIP 을 반환해야 한다.
// - index.html 의 <title> 은 projectConfig.title 을 사용해야 한다.
// - ZIP 안에 builder.css 와 main.js 파일이 포함되어야 한다.
describe("/api/export", () => {
it("POST /api/export 로 블록과 프로젝트 설정을 전송하면 기본 정적 ZIP 파일을 반환해야 한다", async () => {
const blocks: Block[] = [
{
id: "blk_test",
type: "text",
props: {
text: "ZIP 내보내기 테스트",
align: "left",
size: "base",
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "내보내기 테스트 페이지",
slug: "export-test",
canvasPreset: "full",
canvasBgColorHex: "#ffffff",
bodyBgColorHex: "#111111",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
expect(res.headers.get("Content-Type")).toBe("application/zip");
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
const cssEntry = zip.file("builder.css");
const jsEntry = zip.file("main.js");
expect(indexEntry).toBeTruthy();
expect(cssEntry).toBeTruthy();
expect(jsEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("<title>내보내기 테스트 페이지</title>");
expect(html).toContain("ZIP 내보내기 테스트");
// 캔버스 래퍼 배경색
expect(html).toContain("background-color:#ffffff");
// body 스타일: 배경색 + margin/padding 0
expect(html).toContain('style="background-color:#111111;margin:0;padding:0;"');
});
it("projectConfig.headHtml 과 trackingScript 는 index.html 의 head/body 에 그대로 포함되어야 한다", async () => {
const blocks: Block[] = [];
const projectConfig: ProjectConfig = {
title: "헤드/트래킹 테스트",
slug: "head-tracking-test",
canvasPreset: "full",
headHtml: '<meta name="robots" content="noindex" />',
trackingScript: '<script>window.__TEST_TRACKING__ = true;<\/script>',
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
// head 커스텀 HTML
expect(html).toContain('<meta name="robots" content="noindex" />');
// body 하단 추적 스크립트
expect(html).toContain('<script>window.__TEST_TRACKING__ = true;<\/script>');
});
it("폼 블록과 컨트롤러 필드 블록들은 정적 HTML에서도 폼 요소로 렌더되어야 한다", async () => {
const blocks: Block[] = [
{
id: "form_1",
type: "form",
props: {
kind: "contact",
submitTarget: "internal",
fields: [],
fieldIds: ["input_name", "select_plan"],
submitButtonId: null,
formWidthMode: "full",
},
} as any,
{
id: "input_name",
type: "formInput",
props: {
label: "이름",
formFieldName: "name",
required: true,
},
} as any,
{
id: "select_plan",
type: "formSelect",
props: {
label: "플랜",
formFieldName: "plan",
options: [
{ label: "Basic", value: "basic" },
{ label: "Pro", value: "pro" },
],
required: false,
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "폼 내보내기 테스트",
slug: "form-export-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
// form 요소와 기본 input/select 가 포함되어야 한다.
expect(html).toContain("<form");
expect(html).toContain("name=\"name\"");
expect(html).toContain("name=\"plan\"");
expect(html).toContain("<select");
});
it("/api/image/:id 기반 이미지 URL은 ZIP 안 images/ 디렉터리로 복사되고 HTML에서 상대 경로로 치환되어야 한다", async () => {
const imageId = `test-image-${Date.now()}`;
const uploadDir = path.join(process.cwd(), "uploads");
await fs.mkdir(uploadDir, { recursive: true });
await fs.writeFile(path.join(uploadDir, imageId), Buffer.from("dummy-image"));
const blocks: Block[] = [
{
id: "blk_image",
type: "image",
props: {
src: `/api/image/${imageId}`,
alt: "테스트 이미지",
align: "center",
widthMode: "auto",
borderRadius: "md",
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "이미지 내보내기 테스트",
slug: "image-export-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const buffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(buffer);
const imageEntry = zip.file(`images/${imageId}`);
expect(imageEntry).toBeTruthy();
const imageBytes = await imageEntry!.async("nodebuffer");
expect(imageBytes.length).toBeGreaterThan(0);
const html = await zip.file("index.html")!.async("string");
expect(html).toContain(`src="./images/${imageId}"`);
expect(html).not.toContain(`/api/image/${imageId}`);
});
it("divider 블록은 정적 HTML에서 구분선 요소로 렌더되어야 한다", async () => {
const blocks: Block[] = [
{
id: "divider_1",
type: "divider",
props: {
align: "center",
thickness: "medium",
widthMode: "full",
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "divider 테스트",
slug: "divider-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("<hr");
expect(html).toContain("pb-divider");
});
it("list 블록은 정적 HTML에서 리스트 요소로 렌더되어야 한다", async () => {
const blocks: Block[] = [
{
id: "list_1",
type: "list",
props: {
items: ["Item 1", "Item 2"],
ordered: false,
align: "left",
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "list 테스트",
slug: "list-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("<ul");
expect(html).toContain("<li>Item 1</li>");
expect(html).toContain("<li>Item 2</li>");
});
it("formInput 단독 블록은 입력 필드로 렌더되어야 한다", async () => {
const blocks: Block[] = [
{
id: "input_standalone",
type: "formInput",
props: {
label: "이름",
formFieldName: "name",
required: true,
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "formInput 단독 테스트",
slug: "form-input-standalone",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("<input");
expect(html).toContain("name=\"name\"");
expect(html).toContain("이름");
});
it("formSelect 단독 블록은 셀렉트 박스로 렌더되어야 한다", async () => {
const blocks: Block[] = [
{
id: "select_standalone",
type: "formSelect",
props: {
label: "플랜",
formFieldName: "plan",
options: [
{ label: "Basic", value: "basic" },
{ label: "Pro", value: "pro" },
],
required: false,
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "formSelect 단독 테스트",
slug: "form-select-standalone",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("<select");
expect(html).toContain("<option value=\"basic\">Basic</option>");
expect(html).toContain("<option value=\"pro\">Pro</option>");
});
it("formCheckbox 단독 블록은 체크박스 그룹으로 렌더되어야 한다", async () => {
const blocks: Block[] = [
{
id: "checkbox_standalone",
type: "formCheckbox",
props: {
groupLabel: "관심사",
formFieldName: "interests",
options: [
{ label: "뉴스", value: "news" },
{ label: "업데이트", value: "updates" },
],
required: false,
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "formCheckbox 단독 테스트",
slug: "form-checkbox-standalone",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("type=\"checkbox\"");
expect(html).toContain("뉴스");
expect(html).toContain("업데이트");
});
it("formRadio 단독 블록은 라디오 그룹으로 렌더되어야 한다", async () => {
const blocks: Block[] = [
{
id: "radio_standalone",
type: "formRadio",
props: {
groupLabel: "플랜",
formFieldName: "plan",
options: [
{ label: "Basic", value: "basic" },
{ label: "Pro", value: "pro" },
],
required: false,
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "formRadio 단독 테스트",
slug: "form-radio-standalone",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("type=\"radio\"");
expect(html).toContain("Basic");
expect(html).toContain("Pro");
});
it("text 블록은 pb 텍스트 스타일 클래스를 포함해야 한다", async () => {
const blocks: Block[] = [
{
id: "text_styled",
type: "text",
props: {
text: "스타일 테스트",
align: "center",
size: "base",
fontSizeMode: "scale",
fontSizeScale: "lg",
lineHeightMode: "scale",
lineHeightScale: "relaxed",
fontWeightMode: "scale",
fontWeightScale: "semibold",
colorMode: "palette",
colorPalette: "strong",
underline: true,
italic: true,
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "텍스트 스타일 테스트",
slug: "text-style-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("스타일 테스트");
expect(html).toContain("pb-text-center");
expect(html).toContain("pb-text-lg");
expect(html).toContain("pb-leading-relaxed");
expect(html).toContain("pb-font-semibold");
expect(html).toContain("pb-text-color-strong");
expect(html).toContain("pb-underline");
expect(html).toContain("pb-italic");
});
it("버튼 블록은 버튼 스타일 클래스를 포함해야 한다", async () => {
const blocks: Block[] = [
{
id: "button_styled",
type: "button",
props: {
label: "클릭",
href: "#",
align: "center",
size: "md",
variant: "solid",
colorPalette: "primary",
},
} as any,
];
const projectConfig: ProjectConfig = {
title: "버튼 스타일 테스트",
slug: "button-style-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("클릭");
expect(html).toContain("pb-text-center");
expect(html).toContain("pb-btn-base");
expect(html).toContain("pb-btn-size-md");
expect(html).toContain("pb-btn-variant-solid-primary");
});
it("section 블록은 배경/패딩 토큰을 pb-section 클래스 조합으로 반영해야 한다", async () => {
const blocks: Block[] = [
{
id: "sec_1",
type: "section",
props: {
background: "primary",
paddingY: "lg",
columns: [
{
id: "sec_1_col_1",
span: 12,
},
],
maxWidthMode: "normal",
gapX: "md",
alignItems: "top",
},
} as any,
{
id: "sec_1_text",
type: "text",
props: {
text: "섹션 텍스트",
align: "left",
size: "base",
},
sectionId: "sec_1",
columnId: "sec_1_col_1",
} as any,
];
const projectConfig: ProjectConfig = {
title: "섹션 스타일 테스트",
slug: "section-style-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const indexEntry = zip.file("index.html");
expect(indexEntry).toBeTruthy();
const html = await indexEntry!.async("string");
expect(html).toContain("pb-section");
expect(html).toContain("pb-section-bg-primary");
expect(html).toContain("pb-section-py-lg");
});
it("builder.css 는 리스트/섹션 유틸리티 클래스를 포함해야 한다", async () => {
const blocks: Block[] = [];
const projectConfig: ProjectConfig = {
title: "CSS 유틸리티 테스트",
slug: "css-utility-test",
canvasPreset: "full",
};
const payload = { blocks, projectConfig };
const { POST: handleExport } = await import("@/app/api/export/route");
const res = await handleExport(
new Request(`${BASE_URL}/api/export`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
}),
);
expect(res.status).toBe(200);
const arrayBuffer = await res.arrayBuffer();
const zip = await JSZip.loadAsync(arrayBuffer);
const cssEntry = zip.file("builder.css");
expect(cssEntry).toBeTruthy();
const css = await cssEntry!.async("string");
expect(css).toContain(".pb-section-bg-default");
expect(css).toContain(".pb-section-py-md");
expect(css).toContain(".pb-list");
});
});