import { describe, it, expect, afterEach } from "vitest";
import { render, screen, cleanup } from "@testing-library/react";
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
import type { Block } from "@/features/editor/state/editorStore";

// PublicPageRenderer 이미지 블록 TDD
// - src 가 비어 있을 때는 <img> 를 렌더하지 않아 Next.js 경고를 피한다.
// - src 가 비어 있지 않을 때는 정상적으로 <img> 를 렌더한다.

describe("PublicPageRenderer - image block", () => {
  afterEach(() => {
    cleanup();
  });

  it("src 가 비어 있으면 img 요소를 렌더하지 않아야 한다", () => {
    const blocks: Block[] = [
      {
        id: "img_empty",
        type: "image",
        props: {
          src: "",
          alt: "빈 이미지",
          align: "center",
          widthMode: "auto",
          borderRadius: "md",
        },
      } as any,
    ];

    render(<PublicPageRenderer blocks={blocks} />);

    const img = screen.queryByRole("img", { name: "빈 이미지" });
    expect(img).toBeNull();
  });

  it("src 가 비어 있지 않으면 img 요소를 렌더해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "img_non_empty",
        type: "image",
        props: {
          src: "https://example.com/test.png",
          alt: "정상 이미지",
          align: "center",
          widthMode: "auto",
          borderRadius: "md",
        },
      } as any,
    ];

    render(<PublicPageRenderer blocks={blocks} />);

    const img = screen.getByRole("img", { name: "정상 이미지" }) as HTMLImageElement;
    expect(img).toBeTruthy();
    expect(img.src).toContain("https://example.com/test.png");
  });
});