2555 lines
81 KiB
TypeScript
2555 lines
81 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";
|
|
import { createHeroTemplateBlocks } from "@/app/editor/templates/heroTemplate";
|
|
import { createFeaturesTemplateBlocks } from "@/app/editor/templates/featuresTemplate";
|
|
import { createCtaTemplateBlocks } from "@/app/editor/templates/ctaTemplate";
|
|
import { createFooterTemplateBlocks } from "@/app/editor/templates/footerTemplate";
|
|
import { buildStaticHtml } from "@/app/api/export/route";
|
|
|
|
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("업로드 디렉터리에 이미지 파일이 없어도 ZIP 생성은 실패하지 않아야 한다", async () => {
|
|
const missingImageId = `missing-image-${Date.now()}`;
|
|
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_image_missing",
|
|
type: "image",
|
|
props: {
|
|
src: `/api/image/${missingImageId}`,
|
|
alt: "누락된 이미지",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
borderRadius: "md",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "이미지 파일 누락 내보내기 테스트",
|
|
slug: "image-missing-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);
|
|
|
|
// 업로드 파일이 없으므로 images/ 디렉터리에 엔트리는 없어야 한다.
|
|
const imageEntry = zip.file(`images/${missingImageId}`);
|
|
expect(imageEntry).toBeNull();
|
|
|
|
const html = await zip.file("index.html")!.async("string");
|
|
// HTML 은 원본 /api/image 경로를 그대로 유지하거나, 최소한 오류 없이 렌더되어야 한다.
|
|
expect(html).toContain(`/api/image/${missingImageId}`);
|
|
});
|
|
|
|
it("업로드 디렉터리에 비디오 파일이 없어도 ZIP 생성은 실패하지 않아야 한다", async () => {
|
|
const missingVideoId = `missing-video-${Date.now()}`;
|
|
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_video_missing",
|
|
type: "video",
|
|
props: {
|
|
sourceUrl: `/api/video/${missingVideoId}`,
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "비디오 파일 누락 내보내기 테스트",
|
|
slug: "video-missing-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 videoEntry = zip.file(`videos/${missingVideoId}`);
|
|
expect(videoEntry).toBeNull();
|
|
|
|
const html = await zip.file("index.html")!.async("string");
|
|
// HTML 은 원본 /api/video 경로를 그대로 유지하거나, 최소한 오류 없이 렌더되어야 한다.
|
|
expect(html).toContain(`/api/video/${missingVideoId}`);
|
|
});
|
|
|
|
it("video 블록의 sourceUrl 이 비어 있어도 ZIP 생성은 실패하지 않아야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_video_empty_source",
|
|
type: "video",
|
|
props: {
|
|
sourceUrl: "",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "비디오 sourceUrl 빈 값 내보내기 테스트",
|
|
slug: "video-empty-source-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 html = await zip.file("index.html")!.async("string");
|
|
// sourceUrl 이 비어 있어도 index.html 은 정상 생성되어야 한다.
|
|
expect(html).toContain("<video");
|
|
});
|
|
|
|
it("canvasPreset / canvasWidthPx / 배경색은 정적 HTML 캔버스 wrapper 및 body 스타일에 반영되어야 한다", () => {
|
|
const blocks: Block[] = [];
|
|
|
|
const createConfig = (partial: Partial<ProjectConfig>): ProjectConfig => ({
|
|
title: "캔버스 프리셋 테스트",
|
|
slug: "canvas-preset-test",
|
|
canvasPreset: "full",
|
|
canvasBgColorHex: "#0f172a",
|
|
bodyBgColorHex: "#020617",
|
|
...partial,
|
|
});
|
|
|
|
const htmlMobile = buildStaticHtml(blocks, createConfig({ canvasPreset: "mobile" }));
|
|
expect(htmlMobile).toContain("max-width:390px;");
|
|
|
|
const htmlTablet = buildStaticHtml(blocks, createConfig({ canvasPreset: "tablet" }));
|
|
expect(htmlTablet).toContain("max-width:768px;");
|
|
|
|
const htmlDesktop = buildStaticHtml(blocks, createConfig({ canvasPreset: "desktop" }));
|
|
expect(htmlDesktop).toContain("max-width:1200px;");
|
|
|
|
const htmlCustom = buildStaticHtml(blocks, createConfig({ canvasPreset: "custom", canvasWidthPx: 1024 }));
|
|
expect(htmlCustom).toContain("max-width:1024px;");
|
|
|
|
const htmlFull = buildStaticHtml(blocks, createConfig({ canvasPreset: "full" }));
|
|
// full 프리셋에서 canvasWidthPx 가 없으면 max-width 스타일이 없어야 한다.
|
|
expect(htmlFull).not.toContain("max-width:");
|
|
|
|
// bodyBgColorHex / canvasBgColorHex 도 각각 body 및 캔버스 wrapper 스타일에 반영된다.
|
|
const htmlColors = buildStaticHtml(
|
|
blocks,
|
|
createConfig({ canvasBgColorHex: "#111111", bodyBgColorHex: "#222222" }),
|
|
);
|
|
expect(htmlColors).toContain("background-color:#111111;");
|
|
expect(htmlColors).toContain('style="background-color:#222222;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("index.html head 에는 기본 viewport 메타 태그가 포함되어야 한다", async () => {
|
|
const blocks: Block[] = [];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "뷰포트 메타 테스트",
|
|
slug: "viewport-meta-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(
|
|
'<meta name="viewport" content="width=device-width, initial-scale=1" />',
|
|
);
|
|
});
|
|
|
|
it("seoTitle/seoDescription/seoCanonicalUrl/seoOgImageUrl/seoNoIndex 가 설정된 경우 head 에 SEO 메타 태그들이 생성되어야 한다", () => {
|
|
const blocks: Block[] = [];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "기본 타이틀",
|
|
slug: "seo-meta-test",
|
|
canvasPreset: "full",
|
|
seoTitle: "SEO 타이틀",
|
|
seoDescription: "SEO 설명",
|
|
seoOgImageUrl: "https://example.com/og.png",
|
|
seoCanonicalUrl: "https://example.com/landing",
|
|
seoNoIndex: true,
|
|
} as ProjectConfig;
|
|
|
|
const html = buildStaticHtml(blocks, projectConfig);
|
|
|
|
expect(html).toContain("<title>SEO 타이틀</title>");
|
|
expect(html).toContain('meta name="description" content="SEO 설명"');
|
|
expect(html).toContain('meta property="og:title" content="SEO 타이틀"');
|
|
expect(html).toContain('meta property="og:description" content="SEO 설명"');
|
|
expect(html).toContain('meta property="og:type" content="website"');
|
|
expect(html).toContain('meta property="og:image" content="https://example.com/og.png"');
|
|
expect(html).toContain('meta property="og:url" content="https://example.com/landing"');
|
|
|
|
expect(html).toContain('meta name="twitter:card" content="summary_large_image"');
|
|
expect(html).toContain('meta name="twitter:title" content="SEO 타이틀"');
|
|
expect(html).toContain('meta name="twitter:description" content="SEO 설명"');
|
|
expect(html).toContain('meta name="twitter:image" content="https://example.com/og.png"');
|
|
|
|
expect(html).toContain('<link rel="canonical" href="https://example.com/landing" />');
|
|
expect(html).toContain('<meta name="robots" content="noindex, nofollow" />');
|
|
});
|
|
|
|
it("기본 SEO 메타 태그들 이후에 projectConfig.headHtml 이 head 에 추가되어야 한다", () => {
|
|
const blocks: Block[] = [];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "헤드 SEO 순서 테스트",
|
|
slug: "head-seo-order-test",
|
|
canvasPreset: "full",
|
|
seoTitle: "SEO 타이틀",
|
|
seoDescription: "SEO 설명",
|
|
headHtml: '<meta name="custom" content="custom-meta" />',
|
|
} as ProjectConfig;
|
|
|
|
const html = buildStaticHtml(blocks, projectConfig);
|
|
const headStart = html.indexOf("<head>");
|
|
const headEnd = html.indexOf("</head>");
|
|
const head = html.slice(headStart, headEnd);
|
|
|
|
const descriptionIndex = head.indexOf('meta name="description"');
|
|
const customIndex = head.indexOf('meta name="custom" content="custom-meta"');
|
|
|
|
expect(descriptionIndex).toBeGreaterThan(-1);
|
|
expect(customIndex).toBeGreaterThan(-1);
|
|
expect(customIndex).toBeGreaterThan(descriptionIndex);
|
|
});
|
|
|
|
it("SEO 필드 값에 특수 문자가 포함되어도 HTML 이 깨지지 않고 이스케이프되어야 한다", () => {
|
|
const blocks: Block[] = [];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: '기본 & "타이틀" <테스트>',
|
|
slug: "seo-escape-test",
|
|
canvasPreset: "full",
|
|
seoTitle: 'SEO & "타이틀" <테스트>',
|
|
seoDescription: '설명 & "디스크립션" <테스트>',
|
|
} as ProjectConfig;
|
|
|
|
const html = buildStaticHtml(blocks, projectConfig);
|
|
|
|
expect(html).toContain(
|
|
"<title>SEO & "타이틀" <테스트></title>",
|
|
);
|
|
expect(html).toContain(
|
|
'meta name="description" content="설명 & "디스크립션" <테스트>"',
|
|
);
|
|
expect(html).toContain(
|
|
'meta property="og:title" content="SEO & "타이틀" <테스트>"',
|
|
);
|
|
});
|
|
|
|
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");
|
|
// required: formInput(name) 은 required, formSelect(plan) 은 required 가 없어야 한다.
|
|
expect(html).toMatch(/name=\"name\"[^>]*required/);
|
|
expect(html).not.toMatch(/name=\"plan\"[^>]*required/);
|
|
});
|
|
|
|
|
|
it("FormBlock 에 fieldIds/fields 가 모두 없으면 기본 폼/필드를 내보내지 않아야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_fallback_1",
|
|
type: "form",
|
|
props: {
|
|
kind: "contact",
|
|
submitTarget: "internal",
|
|
// fieldIds, fields 를 모두 생략해 fallback 경로를 타게 한다.
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 fallback 내보내기 테스트",
|
|
slug: "form-fallback-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");
|
|
|
|
// 빈 FormBlock 은 컨트롤러 역할만 하고, 정적 HTML 에서는 기본 폼/필드를 생성하지 않아야 한다.
|
|
expect(html).not.toContain("<form");
|
|
expect(html).not.toMatch(/name=\"name\"/);
|
|
expect(html).not.toMatch(/name=\"email\"/);
|
|
expect(html).not.toMatch(/name=\"message\"/);
|
|
});
|
|
|
|
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("비디오 포스터 이미지 /api/image/:id 는 ZIP 안 images/ 로 복사되고 poster 경로가 상대 경로로 치환되어야 한다", async () => {
|
|
const posterId = `test-video-poster-${Date.now()}`;
|
|
const uploadDir = path.join(process.cwd(), "uploads");
|
|
await fs.mkdir(uploadDir, { recursive: true });
|
|
await fs.writeFile(path.join(uploadDir, posterId), Buffer.from("dummy-poster"));
|
|
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_video_poster",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "https://example.com/video.mp4",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
posterImageSrc: `/api/image/${posterId}`,
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "비디오 포스터 내보내기 테스트",
|
|
slug: "video-poster-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 posterEntry = zip.file(`images/${posterId}`);
|
|
expect(posterEntry).toBeTruthy();
|
|
|
|
const posterBytes = await posterEntry!.async("nodebuffer");
|
|
expect(posterBytes.length).toBeGreaterThan(0);
|
|
|
|
const html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain(`poster=\"./images/${posterId}\"`);
|
|
expect(html).not.toContain(`/api/image/${posterId}`);
|
|
});
|
|
|
|
it("HTML5 비디오 startTimeSec/endTimeSec 는 정적 HTML video 태그 data-start-seconds/data-end-seconds 속성으로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_video_range",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "https://example.com/video-range.mp4",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
startTimeSec: 5,
|
|
endTimeSec: 12,
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "비디오 시작/종료 시점 내보내기 테스트",
|
|
slug: "video-range-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 html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain("data-start-seconds=\"5\"");
|
|
expect(html).toContain("data-end-seconds=\"12\"");
|
|
});
|
|
|
|
it("섹션 backgroundImageSrc 에 /api/image/:id 가 포함된 경우에도 ZIP images/ 및 상대 경로로 치환되어야 한다", async () => {
|
|
const imageId = `test-section-bg-${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: "sec_bg",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_bg_col_1", span: 12 }],
|
|
backgroundImageSrc: `/api/image/${imageId}`,
|
|
backgroundImageSize: "cover",
|
|
backgroundImagePosition: "center",
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_bg_text",
|
|
type: "text",
|
|
props: {
|
|
text: "섹션 배경 이미지 내보내기 테스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
sectionId: "sec_bg",
|
|
columnId: "sec_bg_col_1",
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "섹션 배경 이미지 내보내기 테스트",
|
|
slug: "section-bg-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(`background-image:url(./images/${imageId})`);
|
|
expect(html).not.toContain(`/api/image/${imageId}`);
|
|
});
|
|
|
|
it("섹션 backgroundImageRepeat 가 설정되면 정적 HTML style 에 background-repeat 이 포함되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "sec_bg_repeat",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_bg_repeat_col_1", span: 12 }],
|
|
backgroundImageSrc: "/images/pattern.png",
|
|
backgroundImageSize: "auto",
|
|
backgroundImageRepeat: "repeat-x",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "섹션 배경 반복 테스트",
|
|
slug: "section-bg-repeat-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 html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain("background-repeat:repeat-x");
|
|
});
|
|
|
|
it("섹션 backgroundImagePositionMode 가 custom 이고 X/Y 퍼센트가 설정되면 정적 HTML background-position 에 'X% Y%' 가 포함되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "sec_bg_xy",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_bg_xy_col_1", span: 12 }],
|
|
backgroundImageSrc: "/images/section-bg-xy.png",
|
|
backgroundImageSize: "cover",
|
|
backgroundImagePositionMode: "custom",
|
|
backgroundImagePositionXPercent: 10,
|
|
backgroundImagePositionYPercent: 90,
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "섹션 배경 XY 위치 테스트",
|
|
slug: "section-bg-xy-position-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 html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain("background-position:10% 90%");
|
|
});
|
|
|
|
it("HTML5 비디오 ariaLabel/captionText 는 정적 HTML video 태그 aria-label 및 pb-video-caption 으로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_video_a11y_html5",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "https://example.com/video-a11y.mp4",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
ariaLabel: "정적 내보내기 접근성 비디오 설명",
|
|
captionText: "정적 내보내기 비디오 캡션입니다.",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "비디오 접근성 HTML5 내보내기 테스트",
|
|
slug: "video-a11y-html5-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 html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain('aria-label="정적 내보내기 접근성 비디오 설명"');
|
|
expect(html).toContain('<p class="pb-video-caption">정적 내보내기 비디오 캡션입니다.</p>');
|
|
});
|
|
|
|
it("titleText 가 설정된 YouTube 비디오는 정적 HTML iframe title 로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_video_a11y_youtube",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
titleText: "정적 내보내기 YouTube 비디오 제목",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "비디오 접근성 YouTube 내보내기 테스트",
|
|
slug: "video-a11y-youtube-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 html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain('iframe title="정적 내보내기 YouTube 비디오 제목"');
|
|
});
|
|
|
|
it("/api/video/:id 기반 비디오 URL은 ZIP 안 videos/ 디렉터리로 복사되고 HTML에서 상대 경로로 치환되어야 한다", async () => {
|
|
const videoId = `test-video-${Date.now()}`;
|
|
const uploadDir = path.join(process.cwd(), "uploads");
|
|
await fs.mkdir(uploadDir, { recursive: true });
|
|
await fs.writeFile(path.join(uploadDir, videoId), Buffer.from("dummy-video"));
|
|
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "blk_video",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: `/api/video/${videoId}`,
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
backgroundColorCustom: "#123456",
|
|
cardPaddingPx: 24,
|
|
borderRadiusPx: 16,
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "비디오 내보내기 테스트",
|
|
slug: "video-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 videoEntry = zip.file(`videos/${videoId}`);
|
|
expect(videoEntry).toBeTruthy();
|
|
|
|
const videoBytes = await videoEntry!.async("nodebuffer");
|
|
expect(videoBytes.length).toBeGreaterThan(0);
|
|
|
|
const html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain(`src="./videos/${videoId}`);
|
|
expect(html).not.toContain(`/api/video/${videoId}`);
|
|
// 비디오 카드 스타일이 wrapper style 에 반영되어야 한다.
|
|
expect(html).toContain("background-color:#123456");
|
|
expect(html).toContain("padding:24px");
|
|
expect(html).toContain("border-radius:16px");
|
|
});
|
|
|
|
it("섹션 backgroundVideoSrc 가 /api/video/:id 인 경우 ZIP videos/ 및 상대 경로로 치환되고 섹션 안에 배경 비디오 video 태그로 렌더되어야 한다", async () => {
|
|
const videoId = `test-section-bg-video-${Date.now()}`;
|
|
const uploadDir = path.join(process.cwd(), "uploads");
|
|
await fs.mkdir(uploadDir, { recursive: true });
|
|
await fs.writeFile(path.join(uploadDir, videoId), Buffer.from("dummy-section-video"));
|
|
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "sec_bg_video",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_bg_video_col_1", span: 12 }],
|
|
backgroundVideoSrc: `/api/video/${videoId}`,
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_bg_video_text",
|
|
type: "text",
|
|
sectionId: "sec_bg_video",
|
|
columnId: "sec_bg_video_col_1",
|
|
props: {
|
|
text: "섹션 배경 비디오 내보내기 테스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "섹션 배경 비디오 내보내기 테스트",
|
|
slug: "section-bg-video-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 videoEntry = zip.file(`videos/${videoId}`);
|
|
expect(videoEntry).toBeTruthy();
|
|
|
|
const videoBytes = await videoEntry!.async("nodebuffer");
|
|
expect(videoBytes.length).toBeGreaterThan(0);
|
|
|
|
const html = await zip.file("index.html")!.async("string");
|
|
expect(html).toContain(`src="./videos/${videoId}`);
|
|
expect(html).not.toContain(`/api/video/${videoId}`);
|
|
expect(html).toContain("class=\"pb-section-bg-video\"");
|
|
});
|
|
|
|
it("divider 블록은 정적 HTML에서 구분선 요소로 렌더되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "divider_1",
|
|
type: "divider",
|
|
props: {
|
|
align: "center",
|
|
thickness: "medium",
|
|
widthMode: "full",
|
|
colorHex: "#123456",
|
|
marginYPx: 32,
|
|
},
|
|
} 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");
|
|
// 스타일 검증: medium 두께, 지정 색상, marginYPx 기반 여백이 style 속성에 포함되어야 한다.
|
|
expect(html).toContain("border-bottom:2px solid #123456");
|
|
expect(html).toContain("margin:32px 0;");
|
|
});
|
|
|
|
it("image 블록은 정적 HTML에서 카드 스타일(배경/너비/둥글기)이 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "image_1",
|
|
type: "image",
|
|
props: {
|
|
src: "/images/example.png",
|
|
alt: "카드 이미지",
|
|
align: "center",
|
|
widthMode: "fixed",
|
|
widthPx: 480,
|
|
borderRadiusPx: 32,
|
|
backgroundColorCustom: "#123456",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "image 스타일 테스트",
|
|
slug: "image-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('<img src="/images/example.png"');
|
|
// 카드 배경색이 wrapper div style 에 반영되어야 한다.
|
|
expect(html).toContain("background-color:#123456");
|
|
// 고정 너비/둥글기 스타일이 img style 에 반영되어야 한다.
|
|
expect(html).toContain("width:480px");
|
|
expect(html).toContain("border-radius:32px");
|
|
});
|
|
|
|
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");
|
|
});
|
|
|
|
describe("템플릿 섹션 정적 export", () => {
|
|
function createIdFactory() {
|
|
let i = 0;
|
|
return () => `tpl_${++i}`;
|
|
}
|
|
|
|
async function exportTemplateHtml(blocks: Block[]): Promise<string> {
|
|
const projectConfig: ProjectConfig = {
|
|
title: "템플릿 export 테스트",
|
|
slug: "template-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");
|
|
return html;
|
|
}
|
|
|
|
it("Hero 템플릿 섹션은 export HTML 에 기본 헤드라인/서브텍스트/버튼 텍스트를 포함해야 한다", async () => {
|
|
const sectionId = "hero_section_export";
|
|
const { blocks } = createHeroTemplateBlocks({ sectionId, createId: createIdFactory() });
|
|
|
|
const html = await exportTemplateHtml(blocks as Block[]);
|
|
|
|
expect(html).toContain("Hero 제목을 여기에 입력하세요");
|
|
expect(html).toContain("제품이나 서비스를 한 문장으로 설명하는 서브텍스트입니다.");
|
|
expect(html).toContain("지금 시작하기");
|
|
});
|
|
|
|
it("Features 템플릿 섹션은 export HTML 에 3개의 Feature 제목과 설명 텍스트를 포함해야 한다", async () => {
|
|
const sectionId = "features_section_export";
|
|
const { blocks } = createFeaturesTemplateBlocks({ sectionId, createId: createIdFactory() });
|
|
|
|
const html = await exportTemplateHtml(blocks as Block[]);
|
|
|
|
expect(html).toContain("Feature 1 제목");
|
|
expect(html).toContain("Feature 2 제목");
|
|
expect(html).toContain("Feature 3 제목");
|
|
|
|
const descText = "해당 기능을 간단히 설명하는 텍스트입니다.";
|
|
const occurrences = html.split(descText).length - 1;
|
|
expect(occurrences).toBeGreaterThanOrEqual(3);
|
|
});
|
|
|
|
it("CTA 템플릿 섹션은 export HTML 에 CTA 본문 텍스트와 버튼 라벨을 포함해야 한다", async () => {
|
|
const sectionId = "cta_section_export";
|
|
const { blocks } = createCtaTemplateBlocks({ sectionId, createId: createIdFactory() });
|
|
|
|
const html = await exportTemplateHtml(blocks as Block[]);
|
|
|
|
expect(html).toContain("지금 바로 행동을 유도하는 CTA 텍스트를 입력하세요.");
|
|
expect(html).toContain("CTA 버튼");
|
|
});
|
|
|
|
it("Footer 템플릿 섹션은 export HTML 의 마지막 섹션으로 렌더되고 푸터 텍스트를 포함해야 한다", async () => {
|
|
const sectionId = "footer_section_export";
|
|
const { blocks } = createFooterTemplateBlocks({ sectionId, createId: createIdFactory() });
|
|
|
|
const html = await exportTemplateHtml(blocks as Block[]);
|
|
|
|
expect(html).toContain("MyLanding");
|
|
expect(html).toContain("더 나은 웹사이트를 위한 최고의 선택.");
|
|
expect(html).toContain("서비스 소개");
|
|
expect(html).toContain("문의하기");
|
|
expect(html).toContain(" 2025 MyLanding.");
|
|
|
|
const lastSectionIndex = html.lastIndexOf("<section");
|
|
expect(lastSectionIndex).toBeGreaterThan(-1);
|
|
const lastSectionHtml = html.slice(lastSectionIndex);
|
|
expect(lastSectionHtml).toContain(" 2025 MyLanding.");
|
|
});
|
|
|
|
it("루트 버튼 내비게이션 링크는 Export HTML 에서 동일한 라벨과 href 로 렌더되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "nav_btn_1",
|
|
type: "button",
|
|
props: {
|
|
label: "요금제",
|
|
href: "/pricing",
|
|
align: "left",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "내비게이션 링크 테스트",
|
|
slug: "nav-link-test",
|
|
canvasPreset: "full",
|
|
};
|
|
|
|
const html = buildStaticHtml(blocks, projectConfig);
|
|
|
|
expect(html).toContain('<a href="/pricing"');
|
|
expect(html).toContain(">요금제</a>");
|
|
});
|
|
});
|
|
|
|
describe("스타일 테스트", () => {
|
|
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: "text_default",
|
|
type: "text",
|
|
props: {
|
|
text: "첫 줄\n둘째 줄",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "텍스트 기본 스타일 테스트",
|
|
slug: "text-default-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("둘째 줄");
|
|
expect(html).toContain("pb-text-color-strong");
|
|
expect(html).toContain("pb-whitespace-pre-wrap");
|
|
});
|
|
|
|
it("custom 색상을 가진 텍스트 블록은 정적 HTML에서도 같은 색상을 사용해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "text_custom_color",
|
|
type: "text",
|
|
props: {
|
|
text: "커스텀 색상 텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
colorMode: "custom",
|
|
colorCustom: "#ff0000",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "텍스트 색상 커스텀 테스트",
|
|
slug: "text-custom-color-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("color:#ff0000");
|
|
});
|
|
|
|
it("backgroundColorCustom 이 지정된 텍스트 블록은 정적 HTML에서 같은 배경색을 사용해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "text_bg_custom",
|
|
type: "text",
|
|
props: {
|
|
text: "배경색 있는 텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
backgroundColorCustom: "#123456",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "텍스트 배경색 테스트",
|
|
slug: "text-bg-color-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("background-color:#123456");
|
|
});
|
|
|
|
it("backgroundColorCustom 이 지정된 리스트 블록은 정적 HTML에서 리스트 컨테이너 배경색을 반영해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "list_bg_custom",
|
|
type: "list",
|
|
props: {
|
|
items: ["아이템 1"],
|
|
ordered: false,
|
|
align: "left",
|
|
backgroundColorCustom: "#00ff88",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "리스트 배경색 테스트",
|
|
slug: "list-bg-color-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("아이템 1");
|
|
expect(html).toContain("background-color:#00ff88");
|
|
});
|
|
|
|
it("backgroundColorCustom 이 지정된 폼 블록은 정적 HTML에서 form 요소 배경색을 반영하지 않아야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_bg_custom",
|
|
type: "form",
|
|
props: {
|
|
kind: "contact",
|
|
submitTarget: "internal",
|
|
// v1 fields 설정이 있는 FormBlock 은 여전히 정적 HTML 폼으로 렌더되어야 한다.
|
|
fields: [
|
|
{
|
|
id: "f1",
|
|
name: "email",
|
|
label: "이메일",
|
|
type: "email",
|
|
required: true,
|
|
},
|
|
],
|
|
fieldIds: [],
|
|
formWidthMode: "auto",
|
|
backgroundColorCustom: "#111111",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 배경색 테스트",
|
|
slug: "form-bg-color-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("<form");
|
|
expect(html).not.toContain("background-color:#111111");
|
|
});
|
|
|
|
it("backgroundColorCustom 이 지정된 섹션 블록은 정적 HTML에서 섹션 요소 배경색을 인라인 스타일로 반영해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "sec_1",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_1_col_1", span: 12 }],
|
|
backgroundColorCustom: "#123456",
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_1_text",
|
|
type: "text",
|
|
sectionId: "sec_1",
|
|
columnId: "sec_1_col_1",
|
|
props: {
|
|
text: "섹션 안 텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "섹션 배경색 테스트",
|
|
slug: "section-bg-color-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("class=\"pb-section");
|
|
expect(html).toContain("background-color:#123456");
|
|
});
|
|
|
|
it("루트/섹션 레이아웃은 pb-root / pb-section-inner / pb-section-columns 구조를 사용해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "root_layout_text",
|
|
type: "text",
|
|
props: {
|
|
text: "루트 레이아웃 텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_layout_1",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_layout_1_col_1", span: 12 }],
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_layout_1_text",
|
|
type: "text",
|
|
sectionId: "sec_layout_1",
|
|
columnId: "sec_layout_1_col_1",
|
|
props: {
|
|
text: "섹션 레이아웃 텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "레이아웃 구조 테스트",
|
|
slug: "layout-structure-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");
|
|
// 루트 텍스트는 pb-root / pb-root-inner 안에 포함되어야 한다.
|
|
expect(html).toContain('<section class="pb-root"><div class="pb-root-inner">');
|
|
expect(html).toContain("루트 레이아웃 텍스트");
|
|
// 섹션 레이아웃 구조: pb-section + pb-section-inner + pb-section-columns + pb-section-column
|
|
expect(html).toContain('class="pb-section');
|
|
expect(html).toContain('class="pb-section-inner"');
|
|
expect(html).toContain('class="pb-section-columns"');
|
|
expect(html).toContain('class="pb-section-column"');
|
|
expect(html).toContain("섹션 레이아웃 텍스트");
|
|
});
|
|
|
|
it("formInput 블록의 textColorCustom 은 정적 HTML에서 input 텍스트 색상 스타일로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_input_color",
|
|
type: "formInput",
|
|
props: {
|
|
label: "이메일",
|
|
formFieldName: "email",
|
|
required: true,
|
|
textColorCustom: "#123456",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 입력 텍스트 색상 테스트",
|
|
slug: "form-input-text-color-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('name="email"');
|
|
expect(html).toContain("color:#123456");
|
|
});
|
|
|
|
it("formSelect 블록의 textColorCustom 은 정적 HTML에서 select 텍스트 색상 스타일로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_select_color_export",
|
|
type: "formSelect",
|
|
props: {
|
|
label: "플랜",
|
|
formFieldName: "plan",
|
|
options: [
|
|
{ label: "Basic", value: "basic" },
|
|
{ label: "Pro", value: "pro" },
|
|
],
|
|
textColorCustom: "#00ff88",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 셀렉트 텍스트 색상 테스트",
|
|
slug: "form-select-text-color-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("name=\"plan\"");
|
|
expect(html).toContain("color:#00ff88");
|
|
});
|
|
|
|
it("formCheckbox 블록의 textColorCustom 은 정적 HTML에서 그룹/옵션 텍스트 색상 스타일로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_checkbox_color_export",
|
|
type: "formCheckbox",
|
|
props: {
|
|
groupLabel: "기능",
|
|
formFieldName: "features",
|
|
options: [{ label: "옵션 1", value: "opt1" }],
|
|
textColorCustom: "#8800ff",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 체크박스 텍스트 색상 테스트",
|
|
slug: "form-checkbox-text-color-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("name=\"features\"");
|
|
expect(html).toContain("color:#8800ff");
|
|
});
|
|
|
|
it("formRadio 블록의 textColorCustom 은 정적 HTML에서 그룹/옵션 텍스트 색상 스타일로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_radio_color_export",
|
|
type: "formRadio",
|
|
props: {
|
|
groupLabel: "플랜",
|
|
formFieldName: "plan",
|
|
options: [{ label: "A 플랜", value: "a" }],
|
|
textColorCustom: "#ff9900",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 라디오 텍스트 색상 테스트",
|
|
slug: "form-radio-text-color-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("name=\"plan\"");
|
|
expect(html).toContain("color:#ff9900");
|
|
});
|
|
|
|
it("formInput 블록은 스타일 속성으로 필드 배경/보더/패딩/너비/둥글기를 반영해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_input_styles_export",
|
|
type: "formInput",
|
|
props: {
|
|
label: "이메일",
|
|
formFieldName: "email",
|
|
required: true,
|
|
widthMode: "fixed",
|
|
widthPx: 320,
|
|
paddingX: 16,
|
|
paddingY: 8,
|
|
textColorCustom: "#112233",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 입력 스타일 테스트",
|
|
slug: "form-input-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("name=\"email\"");
|
|
expect(html).toContain("width:320px");
|
|
expect(html).toContain("padding-left:16px");
|
|
expect(html).toContain("padding-right:16px");
|
|
expect(html).toContain("padding-top:8px");
|
|
expect(html).toContain("padding-bottom:8px");
|
|
expect(html).toContain("background-color:#123456");
|
|
expect(html).toContain("border-color:#ff0000");
|
|
expect(html).toContain("border-radius:6px");
|
|
});
|
|
|
|
it("formSelect 블록은 스타일 속성으로 셀렉트 배경/보더/패딩/너비/둥글기를 반영해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_select_styles_export",
|
|
type: "formSelect",
|
|
props: {
|
|
label: "카테고리",
|
|
formFieldName: "category",
|
|
options: [
|
|
{ label: "옵션 A", value: "a" },
|
|
{ label: "옵션 B", value: "b" },
|
|
],
|
|
widthMode: "fixed",
|
|
widthPx: 240,
|
|
paddingX: 16,
|
|
paddingY: 8,
|
|
textColorCustom: "#00ff00",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 셀렉트 스타일 테스트",
|
|
slug: "form-select-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("name=\"category\"");
|
|
expect(html).toContain("width:240px");
|
|
expect(html).toContain("padding-left:16px");
|
|
expect(html).toContain("padding-right:16px");
|
|
expect(html).toContain("padding-top:8px");
|
|
expect(html).toContain("padding-bottom:8px");
|
|
expect(html).toContain("background-color:#123456");
|
|
expect(html).toContain("border-color:#ff0000");
|
|
expect(html).toContain("border-radius:6px");
|
|
});
|
|
|
|
it("formCheckbox 블록은 스타일 속성으로 옵션 컨테이너 배경/보더/패딩/둥글기를 반영해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_checkbox_styles_export",
|
|
type: "formCheckbox",
|
|
props: {
|
|
groupLabel: "기능",
|
|
formFieldName: "features",
|
|
options: [{ label: "옵션 1", value: "opt1" }],
|
|
paddingX: 8,
|
|
paddingY: 4,
|
|
textColorCustom: "#ffffff",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 체크박스 스타일 테스트",
|
|
slug: "form-checkbox-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("name=\"features\"");
|
|
expect(html).toContain("padding-left:8px");
|
|
expect(html).toContain("padding-right:8px");
|
|
expect(html).toContain("padding-top:4px");
|
|
expect(html).toContain("padding-bottom:4px");
|
|
expect(html).toContain("background-color:#123456");
|
|
expect(html).toContain("border-color:#ff0000");
|
|
expect(html).toContain("border-radius:6px");
|
|
});
|
|
|
|
it("formRadio 블록은 스타일 속성으로 옵션 컨테이너 배경/보더/패딩/둥글기를 반영해야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_radio_styles_export",
|
|
type: "formRadio",
|
|
props: {
|
|
groupLabel: "플랜",
|
|
formFieldName: "plan",
|
|
options: [{ label: "플랜 A", value: "a" }],
|
|
paddingX: 8,
|
|
paddingY: 4,
|
|
textColorCustom: "#ffffff",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "폼 라디오 스타일 테스트",
|
|
slug: "form-radio-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("name=\"plan\"");
|
|
expect(html).toContain("padding-left:8px");
|
|
expect(html).toContain("padding-right:8px");
|
|
expect(html).toContain("padding-top:4px");
|
|
expect(html).toContain("padding-bottom:4px");
|
|
expect(html).toContain("background-color:#123456");
|
|
expect(html).toContain("border-color:#ff0000");
|
|
expect(html).toContain("border-radius:6px");
|
|
});
|
|
|
|
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("버튼 블록의 커스텀 스타일은 style 속성으로 반영되어야 한다", async () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "button_custom_styles",
|
|
type: "button",
|
|
props: {
|
|
label: "스타일 버튼",
|
|
href: "#",
|
|
align: "left",
|
|
widthMode: "fixed",
|
|
widthPx: 240,
|
|
paddingX: 16,
|
|
paddingY: 8,
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
textColorCustom: "#00ff00",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const projectConfig: ProjectConfig = {
|
|
title: "버튼 커스텀 스타일 테스트",
|
|
slug: "button-custom-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");
|
|
// widthMode=fixed, widthPx, paddingX/paddingY, fillColorCustom, strokeColorCustom, textColorCustom 이 style 속성에 포함되어야 한다.
|
|
expect(html).toContain("width:240px");
|
|
expect(html).toContain("padding-left:16px");
|
|
expect(html).toContain("padding-right:16px");
|
|
expect(html).toContain("padding-top:8px");
|
|
expect(html).toContain("padding-bottom:8px");
|
|
expect(html).toContain("background-color:#123456");
|
|
expect(html).toContain("border-color:#ff0000");
|
|
expect(html).toContain("color:#00ff00");
|
|
});
|
|
|
|
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");
|
|
expect(css).toContain(".pb-whitespace-pre-wrap");
|
|
expect(css).toContain("color: var(--pb-color-text-strong)");
|
|
// 레이아웃 관련 유틸리티 클래스도 고정해 둔다.
|
|
expect(css).toContain(".pb-root-inner");
|
|
expect(css).toContain("max-width: 72rem");
|
|
expect(css).toContain(".pb-section-inner");
|
|
expect(css).toContain(".pb-section-columns");
|
|
expect(css).toContain("gap: 2rem");
|
|
expect(css).toContain(".pb-section-column");
|
|
});
|
|
});
|
|
});
|