이미지 파일 업로드 기능
This commit is contained in:
@@ -0,0 +1,725 @@
|
||||
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");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user