138 lines
4.1 KiB
TypeScript
138 lines
4.1 KiB
TypeScript
import { describe, it, expect, afterEach, vi, beforeEach } from "vitest";
|
|
import { render, screen, cleanup } from "@testing-library/react";
|
|
import PreviewPage from "@/app/preview/page";
|
|
import type { ProjectConfig, Block } from "@/features/editor/state/editorStore";
|
|
|
|
// PreviewPage 캔버스 프리셋/폭/배경색 TDD
|
|
// - canvasPreset / canvasWidthPx / canvasBgColorHex / bodyBgColorHex 가
|
|
// preview-canvas-inner 및 main 배경에 올바르게 반영되는지 검증한다.
|
|
|
|
let mockState: any;
|
|
|
|
beforeEach(() => {
|
|
const baseProjectConfig: ProjectConfig = {
|
|
title: "프리뷰 캔버스 테스트",
|
|
slug: "preview-canvas-test",
|
|
canvasPreset: "full",
|
|
canvasBgColorHex: "#0f172a",
|
|
bodyBgColorHex: "#020617",
|
|
};
|
|
|
|
mockState = {
|
|
blocks: [] as Block[],
|
|
projectConfig: baseProjectConfig,
|
|
};
|
|
});
|
|
|
|
vi.mock("@/features/editor/state/editorStore", () => {
|
|
const useEditorStore = (selector: (state: any) => any) => selector(mockState);
|
|
return {
|
|
__esModule: true,
|
|
useEditorStore,
|
|
};
|
|
});
|
|
|
|
vi.mock("next/link", () => {
|
|
return {
|
|
__esModule: true,
|
|
default: ({ href, children }: any) => <a href={href}>{children}</a>,
|
|
};
|
|
});
|
|
|
|
vi.mock("next/navigation", () => {
|
|
return {
|
|
__esModule: true,
|
|
useRouter: () => ({
|
|
push: vi.fn(),
|
|
}),
|
|
};
|
|
});
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
describe("PreviewPage - canvasPreset / canvasWidthPx", () => {
|
|
it("mobile 프리셋 + canvasWidthPx=390 은 preview-canvas-inner maxWidth 를 390px 로 설정해야 한다", () => {
|
|
mockState.projectConfig = {
|
|
...(mockState.projectConfig as ProjectConfig),
|
|
canvasPreset: "mobile",
|
|
canvasWidthPx: 390,
|
|
} as ProjectConfig;
|
|
|
|
render(<PreviewPage />);
|
|
|
|
const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
|
|
expect(inner.style.maxWidth).toBe("390px");
|
|
});
|
|
|
|
it("tablet 프리셋 + canvasWidthPx=768 은 maxWidth 를 768px 로 설정해야 한다", () => {
|
|
mockState.projectConfig = {
|
|
...(mockState.projectConfig as ProjectConfig),
|
|
canvasPreset: "tablet",
|
|
canvasWidthPx: 768,
|
|
} as ProjectConfig;
|
|
|
|
render(<PreviewPage />);
|
|
|
|
const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
|
|
expect(inner.style.maxWidth).toBe("768px");
|
|
});
|
|
|
|
it("desktop 프리셋 + canvasWidthPx=1200 은 maxWidth 를 1200px 로 설정해야 한다", () => {
|
|
mockState.projectConfig = {
|
|
...(mockState.projectConfig as ProjectConfig),
|
|
canvasPreset: "desktop",
|
|
canvasWidthPx: 1200,
|
|
} as ProjectConfig;
|
|
|
|
render(<PreviewPage />);
|
|
|
|
const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
|
|
expect(inner.style.maxWidth).toBe("1200px");
|
|
});
|
|
|
|
it("full 프리셋에서 canvasWidthPx 가 없으면 maxWidth 는 비워져 있어야 한다", () => {
|
|
mockState.projectConfig = {
|
|
...(mockState.projectConfig as ProjectConfig),
|
|
canvasPreset: "full",
|
|
canvasWidthPx: undefined,
|
|
} as ProjectConfig;
|
|
|
|
render(<PreviewPage />);
|
|
|
|
const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
|
|
expect(inner.style.maxWidth).toBe("");
|
|
});
|
|
|
|
it("custom 프리셋 + canvasWidthPx=1024 는 maxWidth 를 1024px 로 설정해야 한다", () => {
|
|
mockState.projectConfig = {
|
|
...(mockState.projectConfig as ProjectConfig),
|
|
canvasPreset: "custom",
|
|
canvasWidthPx: 1024,
|
|
} as ProjectConfig;
|
|
|
|
render(<PreviewPage />);
|
|
|
|
const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
|
|
expect(inner.style.maxWidth).toBe("1024px");
|
|
});
|
|
|
|
it("canvasBgColorHex 와 bodyBgColorHex 가 각각 preview-canvas-inner 및 main 배경에 적용되어야 한다", () => {
|
|
mockState.projectConfig = {
|
|
...(mockState.projectConfig as ProjectConfig),
|
|
canvasPreset: "full",
|
|
canvasBgColorHex: "#111111",
|
|
bodyBgColorHex: "#222222",
|
|
} as ProjectConfig;
|
|
|
|
const { container } = render(<PreviewPage />);
|
|
|
|
const inner = screen.getByTestId("preview-canvas-inner") as HTMLElement;
|
|
const main = container.querySelector("main") as HTMLElement;
|
|
|
|
expect(inner.style.backgroundColor).toBe("rgb(17, 17, 17)");
|
|
expect(main.style.backgroundColor).toBe("rgb(34, 34, 34)");
|
|
});
|
|
});
|