108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import { describe, it, expect, afterEach } from "vitest";
|
|
import { render, cleanup } from "@testing-library/react";
|
|
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
|
import type { Block } from "@/features/editor/state/editorStore";
|
|
|
|
// PublicPageRenderer 이미지 블록 스타일 TDD
|
|
// - backgroundColorCustom 카드 배경 적용 여부
|
|
// - widthMode=fixed, widthPx 의 em 변환
|
|
// - borderRadiusPx 의 em 변환
|
|
|
|
describe("PublicPageRenderer - 이미지 블록 스타일", () => {
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
it("image 블록은 backgroundColorCustom 이 설정된 경우에만 wrapper 에 배경색이 적용되어야 한다", () => {
|
|
const blocksWithBg: Block[] = [
|
|
{
|
|
id: "img_with_bg",
|
|
type: "image",
|
|
props: {
|
|
src: "/images/example.png",
|
|
alt: "배경 있는 이미지",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
backgroundColorCustom: "#123456",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const { container, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);
|
|
|
|
const imgWithBg = container.querySelector("img") as HTMLImageElement | null;
|
|
expect(imgWithBg).not.toBeNull();
|
|
const wrapperWithBg = imgWithBg!.parentElement as HTMLElement | null;
|
|
expect(wrapperWithBg).not.toBeNull();
|
|
// JSDOM 은 #123456 을 rgb(18, 52, 86) 형태로 노출한다.
|
|
expect(wrapperWithBg!.style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
|
|
const blocksWithoutBg: Block[] = [
|
|
{
|
|
id: "img_no_bg",
|
|
type: "image",
|
|
props: {
|
|
src: "/images/example2.png",
|
|
alt: "배경 없는 이미지",
|
|
align: "center",
|
|
widthMode: "auto",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);
|
|
|
|
const imgNoBg = container.querySelector("img") as HTMLImageElement | null;
|
|
expect(imgNoBg).not.toBeNull();
|
|
const wrapperNoBg = imgNoBg!.parentElement as HTMLElement | null;
|
|
expect(wrapperNoBg).not.toBeNull();
|
|
expect(
|
|
wrapperNoBg!.style.backgroundColor === "" || wrapperNoBg!.style.backgroundColor === "transparent",
|
|
).toBe(true);
|
|
});
|
|
|
|
it("widthMode 가 fixed 이고 widthPx 가 설정된 경우 img width 는 em 단위로 설정되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "img_fixed_width",
|
|
type: "image",
|
|
props: {
|
|
src: "/images/example.png",
|
|
alt: "고정 너비 이미지",
|
|
align: "center",
|
|
widthMode: "fixed",
|
|
widthPx: 480,
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const { container } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const img = container.querySelector("img") as HTMLImageElement | null;
|
|
expect(img).not.toBeNull();
|
|
// 480px / 16 = 30em
|
|
expect(img!.style.width).toBe("30em");
|
|
});
|
|
|
|
it("borderRadiusPx 가 설정된 경우 img borderRadius 는 em 단위로 설정되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "img_radius",
|
|
type: "image",
|
|
props: {
|
|
src: "/images/example.png",
|
|
alt: "둥근 이미지",
|
|
borderRadiusPx: 32,
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const { container } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const img = container.querySelector("img") as HTMLImageElement | null;
|
|
expect(img).not.toBeNull();
|
|
// 32px / 16 = 2em
|
|
expect(img!.style.borderRadius).toBe("2em");
|
|
});
|
|
});
|