page-builder/tests/unit/PublicPageRendererBlockBackground.spec.tsx

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";

// 블록 배경색 확장 TDD
// - backgroundColorCustom 이 설정된 경우에만 프리뷰에서 배경색이 적용되어야 한다.
// - 설정되지 않은 경우에는 기본 배경(투명)으로 남아야 한다.

describe("PublicPageRenderer - 블록 배경색", () => {
  it("text 블록은 backgroundColorCustom 이 설정된 경우에만 배경색 스타일을 가져야 한다", () => {
    const blocksWithBg: Block[] = [
      {
        id: "text_with_bg",
        type: "text",
        props: {
          text: "배경 있는 텍스트",
          align: "left",
          size: "base",
          // TDD: 새 배경색 속성
          backgroundColorCustom: "#123456",
        },
      } as any,
    ];

    const { container, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);

    const pWithBg = container.querySelector("p") as HTMLElement | null;
    expect(pWithBg).not.toBeNull();
    // JSDOM 은 #123456 을 rgb(18, 52, 86) 형태로 노출한다.
    expect(pWithBg!.style.backgroundColor).toBe("rgb(18, 52, 86)");

    const blocksWithoutBg: Block[] = [
      {
        id: "text_no_bg",
        type: "text",
        props: {
          text: "배경 없는 텍스트",
          align: "left",
          size: "base",
        },
      } as any,
    ];

    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);

    const pNoBg = container.querySelector("p") as HTMLElement | null;
    expect(pNoBg).not.toBeNull();
    // 기본값은 inline style 이 설정되지 않은 상태여야 한다.
    expect(pNoBg!.style.backgroundColor === "" || pNoBg!.style.backgroundColor === "transparent").toBe(true);
  });

  it("list 블록은 backgroundColorCustom 이 설정된 경우에만 리스트 컨테이너에 배경색이 적용되어야 한다", () => {
    const blocksWithBg: Block[] = [
      {
        id: "list_with_bg",
        type: "list",
        props: {
          items: ["아이템 1"],
          ordered: false,
          // TDD: 새 배경색 속성
          backgroundColorCustom: "#00ff88",
        },
      } as any,
    ];

    const { container, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);

    const listWithBg = (container.querySelector("ul,ol") as HTMLElement | null);
    expect(listWithBg).not.toBeNull();
    expect(listWithBg!.style.backgroundColor).toBe("rgb(0, 255, 136)");

    const blocksWithoutBg: Block[] = [
      {
        id: "list_no_bg",
        type: "list",
        props: {
          items: ["아이템 1"],
          ordered: false,
        },
      } as any,
    ];

    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);

    const listNoBg = (container.querySelector("ul,ol") as HTMLElement | null);
    expect(listNoBg).not.toBeNull();
    expect(listNoBg!.style.backgroundColor === "" || listNoBg!.style.backgroundColor === "transparent").toBe(true);
  });

  it("form 컨트롤러 블록은 backgroundColorCustom 이 설정된 경우에만 폼 요소에 배경색을 적용해야 한다", () => {
    const blocksWithBg: Block[] = [
      {
        id: "form_with_bg",
        type: "form",
        props: {
          kind: "contact",
          submitTarget: "internal",
          fields: [],
          fieldIds: [],
          formWidthMode: "auto",
          // TDD: 새 배경색 속성
          backgroundColorCustom: "#111111",
        },
      } as any,
    ];

    const { queryByTestId, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);

    const formWithBg = queryByTestId("preview-form-controller") as HTMLElement | null;
    expect(formWithBg).not.toBeNull();
    // JSDOM 은 #111111 을 rgb(17, 17, 17) 형태로 노출한다.
    expect(formWithBg!.style.backgroundColor).toBe("rgb(17, 17, 17)");

    const blocksWithoutBg: Block[] = [
      {
        id: "form_no_bg",
        type: "form",
        props: {
          kind: "contact",
          submitTarget: "internal",
          fields: [],
          fieldIds: [],
          formWidthMode: "auto",
        },
      } as any,
    ];

    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);

    const formNoBg = queryByTestId("preview-form-controller") as HTMLElement | null;
    expect(formNoBg).not.toBeNull();
    expect(
      formNoBg!.style.backgroundColor === "" || formNoBg!.style.backgroundColor === "transparent",
    ).toBe(true);
  });

  it("section 블록은 backgroundColorCustom 이 설정된 경우에만 섹션 요소에 배경색이 적용되어야 한다", () => {
    const blocksWithBg: 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 { getByTestId, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);

    const sectionWithBg = getByTestId("preview-section") as HTMLElement;
    // JSDOM 은 #123456 을 rgb(18, 52, 86) 형태로 노출한다.
    expect(sectionWithBg.style.backgroundColor).toBe("rgb(18, 52, 86)");

    const blocksWithoutBg: Block[] = [
      {
        id: "sec_1",
        type: "section",
        props: {
          background: "default",
          paddingY: "md",
          columns: [{ id: "sec_1_col_1", span: 12 }],
        },
      } as any,
      {
        id: "sec_1_text",
        type: "text",
        sectionId: "sec_1",
        columnId: "sec_1_col_1",
        props: {
          text: "섹션 안 텍스트",
          align: "left",
          size: "base",
        },
      } as any,
    ];

    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);

    const sectionNoBg = getByTestId("preview-section") as HTMLElement;
    expect(sectionNoBg.style.backgroundColor === "" || sectionNoBg.style.backgroundColor === "transparent").toBe(true);
  });
});