import { render, screen } from "@testing-library/react";
import { PhoneFrame } from "./PhoneFrame";

describe("PhoneFrame", () => {
  it("shows only the poster when it has no children (the pinned reel does not download the phone video)", () => {
    const { container } = render(
      <PhoneFrame poster="/videos/x/mobile.webp" className="ds-reel-phone" />,
    );

    const phone = container.firstElementChild as HTMLElement;
    const screenEl = phone.querySelector(".ds-phone-screen") as HTMLElement;
    expect(phone).toHaveClass("ds-phone", "ds-reel-phone");
    expect(screenEl.style.backgroundImage).toContain("/videos/x/mobile.webp");
    expect(screenEl).toBeEmptyDOMElement();
  });

  it("renders its children inside the screen", () => {
    render(
      <PhoneFrame>
        <p>demo</p>
      </PhoneFrame>,
    );

    expect(screen.getByText("demo").parentElement).toHaveClass(
      "ds-phone-screen",
    );
  });

  it("has no background without a poster, and passes the style along", () => {
    const { container } = render(<PhoneFrame style={{ width: 120 }} />);

    expect(
      (container.querySelector(".ds-phone-screen") as HTMLElement).style
        .backgroundImage,
    ).toBe("");
    expect((container.firstElementChild as HTMLElement).style.width).toBe(
      "120px",
    );
  });
});