286 lines
8.3 KiB
TypeScript
286 lines
8.3 KiB
TypeScript
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
|
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
|
|
import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
|
|
import EditorPage from "@/app/editor/page";
|
|
|
|
let mockState: any;
|
|
|
|
beforeEach(() => {
|
|
const baseProjectConfig: ProjectConfig = {
|
|
title: "비디오 블록 스타일 테스트",
|
|
slug: "editor-video-style-test",
|
|
canvasPreset: "full",
|
|
canvasWidthPx: 1024,
|
|
canvasBgColorHex: "#0f172a",
|
|
bodyBgColorHex: "#020617",
|
|
} as ProjectConfig;
|
|
|
|
mockState = {
|
|
blocks: [] as Block[],
|
|
projectConfig: baseProjectConfig,
|
|
selectedBlockId: null as string | null,
|
|
selectedListItemId: null as string | null,
|
|
undo: vi.fn(),
|
|
redo: vi.fn(),
|
|
removeBlock: vi.fn(),
|
|
duplicateBlock: vi.fn(),
|
|
selectBlock: vi.fn(),
|
|
selectListItem: vi.fn(),
|
|
addTextBlock: vi.fn(),
|
|
addButtonBlock: vi.fn(),
|
|
addImageBlock: vi.fn(),
|
|
addDividerBlock: vi.fn(),
|
|
addListBlock: vi.fn(),
|
|
addSectionBlock: vi.fn(),
|
|
addFormBlock: vi.fn(),
|
|
addFormInputBlock: vi.fn(),
|
|
addFormSelectBlock: vi.fn(),
|
|
addFormCheckboxBlock: vi.fn(),
|
|
addFormRadioBlock: vi.fn(),
|
|
addHeroTemplateSection: vi.fn(),
|
|
addFeaturesTemplateSection: vi.fn(),
|
|
addCtaTemplateSection: vi.fn(),
|
|
addFaqTemplateSection: vi.fn(),
|
|
addPricingTemplateSection: vi.fn(),
|
|
addTestimonialsTemplateSection: vi.fn(),
|
|
addBlogTemplateSection: vi.fn(),
|
|
addTeamTemplateSection: vi.fn(),
|
|
addFooterTemplateSection: vi.fn(),
|
|
updateBlock: vi.fn(),
|
|
replaceBlocks: vi.fn(),
|
|
reorderBlocks: vi.fn(),
|
|
moveBlock: vi.fn(),
|
|
};
|
|
});
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
vi.mock("@/features/editor/state/editorStore", () => {
|
|
const useEditorStore = (selector: (state: any) => any) => selector(mockState);
|
|
(useEditorStore as any).getState = () => 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(),
|
|
}),
|
|
};
|
|
});
|
|
|
|
// 단순 유튜브 URL, 업로드 비디오 URL 케이스에 대한 에디터 렌더링을 검증한다.
|
|
describe("EditorPage - 비디오 블록 스타일", () => {
|
|
it("YouTube URL 비디오 블록은 iframe 으로 렌더되고 기본 16:9 비율 wrapper 를 가져야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "video_youtube_1",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "video_youtube_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const iframe = screen.getByTitle("비디오") as HTMLIFrameElement;
|
|
const wrapper = iframe.parentElement as HTMLElement;
|
|
|
|
expect(iframe).toBeTruthy();
|
|
expect(iframe.src).toContain("youtube.com/embed");
|
|
expect(wrapper.className).toContain("pb-video-wrapper");
|
|
});
|
|
|
|
it("업로드 비디오 URL 은 video 태그로 렌더되고 controls 속성을 포함해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "video_upload_1",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "/api/video/abc123",
|
|
align: "left",
|
|
widthMode: "fixed",
|
|
widthPx: 640,
|
|
aspectRatio: "16:9",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "video_upload_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const video = screen.getByTestId("editor-video") as HTMLVideoElement;
|
|
expect(video).toBeTruthy();
|
|
expect(video.getAttribute("controls")).not.toBeNull();
|
|
expect(video.style.width).toBe("640px");
|
|
});
|
|
|
|
it("posterImageSrc 가 설정된 HTML5 비디오는 video 태그 poster 속성으로 렌더되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "video_poster_1",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "/videos/sample.mp4",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
posterImageSrc: "/images/sample-poster.png",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "video_poster_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const video = screen.getByTestId("editor-video") as HTMLVideoElement;
|
|
expect(video).toBeTruthy();
|
|
expect(video.getAttribute("poster")).toBe("/images/sample-poster.png");
|
|
});
|
|
|
|
it("startTimeSec/endTimeSec 가 설정된 HTML5 비디오는 loadedmetadata/timeupdate 이벤트에서 시작/종료 범위가 적용되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "video_range_1",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "/videos/range.mp4",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
startTimeSec: 5,
|
|
endTimeSec: 10,
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "video_range_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const video = screen.getByTestId("editor-video") as HTMLVideoElement;
|
|
|
|
fireEvent(video, new Event("loadedmetadata"));
|
|
expect(video.currentTime).toBe(5);
|
|
|
|
(video as any).pause = vi.fn();
|
|
video.currentTime = 10.1;
|
|
fireEvent(video, new Event("timeupdate"));
|
|
expect((video as any).pause).toHaveBeenCalled();
|
|
});
|
|
|
|
it("HTML5 비디오의 ariaLabel/titleText/captionText 는 에디터에서 aria-label 및 캡션 요소로 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "video_a11y_html5",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "/videos/a11y.mp4",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
titleText: "접근성 비디오 타이틀",
|
|
ariaLabel: "접근성 비디오 설명",
|
|
captionText: "비디오 캡션입니다.",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "video_a11y_html5";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const video = screen.getByTestId("editor-video") as HTMLVideoElement;
|
|
expect(video).toBeTruthy();
|
|
expect(video.getAttribute("aria-label")).toBe("접근성 비디오 설명");
|
|
|
|
const caption = screen.getByTestId("editor-video-caption");
|
|
expect(caption).toBeTruthy();
|
|
expect(caption.textContent).toBe("비디오 캡션입니다.");
|
|
});
|
|
|
|
it("sourceUrl 이 비어 있는 HTML5 비디오는 src 속성을 렌더링하지 않아야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "video_empty_src",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
aspectRatio: "16:9",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "video_empty_src";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const video = screen.getByTestId("editor-video") as HTMLVideoElement;
|
|
expect(video).toBeTruthy();
|
|
expect(video.getAttribute("src")).toBeNull();
|
|
});
|
|
|
|
it("비디오 카드 스타일 props(backgroundColorCustom/cardPaddingPx/borderRadiusPx)는 wrapper 의 스타일에 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "video_card_1",
|
|
type: "video" as any,
|
|
props: {
|
|
sourceUrl: "/api/video/card-test",
|
|
align: "center",
|
|
widthMode: "fixed",
|
|
widthPx: 480,
|
|
aspectRatio: "16:9",
|
|
backgroundColorCustom: "#123456",
|
|
cardPaddingPx: 24,
|
|
borderRadiusPx: 16,
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
mockState.blocks = blocks;
|
|
mockState.selectedBlockId = "video_card_1";
|
|
|
|
render(<EditorPage />);
|
|
|
|
const video = screen.getByTestId("editor-video") as HTMLVideoElement;
|
|
const wrapper = video.parentElement as HTMLElement;
|
|
|
|
expect(wrapper).toBeTruthy();
|
|
// #123456 -> rgb(18, 52, 86)
|
|
expect(wrapper.style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
expect(wrapper.style.padding).toBe("24px");
|
|
expect(wrapper.style.borderRadius).toBe("16px");
|
|
});
|
|
});
|