126 lines
4.4 KiB
TypeScript
126 lines
4.4 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { render } from "@testing-library/react";
|
|
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
|
import type { Block } from "@/features/editor/state/editorStore";
|
|
|
|
// PublicPageRenderer 섹션 배경 이미지 TDD
|
|
// - SectionBlockProps 의 backgroundImage* 속성이 섹션 wrapper 스타일에 반영되는지 검증한다.
|
|
|
|
describe("PublicPageRenderer - 섹션 배경 이미지", () => {
|
|
it("backgroundImageSrc/size/position 이 설정된 섹션은 backgroundImage/backgroundSize/backgroundPosition 스타일을 가져야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "sec_bg_image",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_bg_image_col_1", span: 12 }],
|
|
backgroundImageSrc: "/images/section-bg.png",
|
|
backgroundImageSize: "cover",
|
|
backgroundImagePosition: "top",
|
|
backgroundImageRepeat: "repeat-y",
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_bg_text",
|
|
type: "text",
|
|
sectionId: "sec_bg_image",
|
|
columnId: "sec_bg_image_col_1",
|
|
props: {
|
|
text: "섹션 배경 이미지 테스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const sectionEl = getByTestId("preview-section") as HTMLElement;
|
|
expect(sectionEl.style.backgroundImage).toContain("/images/section-bg.png");
|
|
expect(sectionEl.style.backgroundSize).toBe("cover");
|
|
expect(sectionEl.style.backgroundPosition).toBe("center top");
|
|
expect(sectionEl.style.backgroundRepeat).toBe("repeat-y");
|
|
});
|
|
|
|
it("backgroundImagePositionMode 가 custom 인 섹션은 background-position 에 'X% Y%' 값이 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "sec_bg_image_xy",
|
|
type: "section",
|
|
props: {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "sec_bg_image_xy_col_1", span: 12 }],
|
|
backgroundImageSrc: "/images/section-bg-xy.png",
|
|
backgroundImageSize: "contain",
|
|
backgroundImagePositionMode: "custom",
|
|
backgroundImagePositionXPercent: 25,
|
|
backgroundImagePositionYPercent: 80,
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_bg_text_xy",
|
|
type: "text",
|
|
sectionId: "sec_bg_image_xy",
|
|
columnId: "sec_bg_image_xy_col_1",
|
|
props: {
|
|
text: "XY 커스텀 위치 텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getAllByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const sectionEl = getAllByTestId("preview-section").find(
|
|
(el) => (el as HTMLElement).dataset.sectionId === "sec_bg_image_xy",
|
|
) as HTMLElement;
|
|
expect(sectionEl.style.backgroundImage).toContain("/images/section-bg-xy.png");
|
|
expect(sectionEl.style.backgroundSize).toBe("contain");
|
|
expect(sectionEl.style.backgroundPosition).toBe("25% 80%");
|
|
});
|
|
|
|
it("backgroundVideoSrc 가 설정된 섹션은 프리뷰에서도 배경 비디오 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: "/videos/section-bg-preview.mp4",
|
|
},
|
|
} as any,
|
|
{
|
|
id: "sec_bg_text_video",
|
|
type: "text",
|
|
sectionId: "sec_bg_video",
|
|
columnId: "sec_bg_video_col_1",
|
|
props: {
|
|
text: "섹션 배경 비디오 테스트",
|
|
align: "left",
|
|
size: "base",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getAllByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const sectionEl = getAllByTestId("preview-section").find(
|
|
(el) => (el as HTMLElement).dataset.sectionId === "sec_bg_video",
|
|
) as HTMLElement;
|
|
expect(sectionEl).toBeTruthy();
|
|
|
|
const videoEl = getAllByTestId("preview-section-bg-video")[0] as HTMLVideoElement;
|
|
expect(videoEl).toBeTruthy();
|
|
expect(videoEl.src).toContain("/videos/section-bg-preview.mp4");
|
|
expect(videoEl.autoplay).toBe(true);
|
|
expect(videoEl.loop).toBe(true);
|
|
expect(videoEl.muted).toBe(true);
|
|
});
|
|
});
|