import { render } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import { CanvasSceneSlot, CanvasSceneSurface } from "./canvas-scene-surface";

describe("CanvasSceneSurface", () => {
  it("keeps the finite clipped artboard", () => {
    const { container } = render(
      <CanvasSceneSurface
        frame={{
          kind: "finite",
          size: { height: 200, unit: "px", width: 300 },
        }}
      >
        <CanvasSceneSlot
          frame={{
            kind: "finite",
            size: { height: 200, unit: "px", width: 300 },
          }}
        >
          content
        </CanvasSceneSlot>
      </CanvasSceneSurface>,
    );
    const surface = container.querySelector<HTMLElement>(
      "[data-toolcraft-editable-canvas]",
    );

    expect(surface?.style).toMatchObject({ height: "200px", width: "300px" });
    expect(surface?.className).toContain("overflow-hidden");
    expect(container.querySelector("[data-toolcraft-canvas-slot]")?.className)
      .toContain("inset-0");
  });

  it("renders an unclipped origin-only infinite scene and a contents slot", () => {
    const { container } = render(
      <CanvasSceneSurface frame={{ kind: "infinite" }}>
        <CanvasSceneSlot frame={{ kind: "infinite" }}>content</CanvasSceneSlot>
      </CanvasSceneSurface>,
    );
    const surface = container.querySelector<HTMLElement>(
      "[data-toolcraft-infinite-scene]",
    );

    expect(surface?.style.width).toBe("");
    expect(surface?.style.height).toBe("");
    expect(surface?.className).toContain("overflow-visible");
    expect(container.querySelector("[data-toolcraft-canvas-slot]")?.className)
      .toContain("contents");
  });
});