import { act, render } from "@testing-library/react";
import FilmGrain from "./FilmGrain";

describe("static cinematic effects", () => {
  it("renders grain without a canvas", () => {
    const grain = render(<FilmGrain />);
    expect(grain.container.firstElementChild).toHaveAttribute(
      "aria-hidden",
      "true",
    );
    expect(grain.container.querySelector("canvas")).not.toBeInTheDocument();
  });
});

describe("film grain over the project screens", () => {
  let screenTop = 5000;

  function addScreen(className: string) {
    const element = document.createElement("div");
    element.className = className;
    element.getBoundingClientRect = () =>
      ({ top: screenTop, bottom: screenTop + 600, height: 600 }) as DOMRect;
    document.body.append(element);
    return element;
  }

  function scroll(to: number) {
    screenTop = to;
    act(() => {
      window.dispatchEvent(new Event("scroll"));
      jest.advanceTimersByTime(40);
    });
  }

  beforeEach(() => {
    jest.useFakeTimers();
    screenTop = 5000;
    Object.defineProperty(window, "innerHeight", {
      configurable: true,
      value: 800,
    });
  });

  afterEach(() => {
    jest.useRealTimers();
    document.body.innerHTML = "";
  });

  it("steps aside while a project screen is in view and comes back when it leaves", () => {
    addScreen("ds-reel");
    const { container } = render(<FilmGrain />);
    const grain = container.firstElementChild as HTMLElement;
    expect(grain).not.toHaveAttribute("data-over-projects");

    scroll(300); // a vitrine entrou na janela
    expect(grain).toHaveAttribute("data-over-projects");

    scroll(-900); // passou: a cena acabou 300 px acima do topo
    expect(grain).not.toHaveAttribute("data-over-projects");
  });

  it("also covers the browser and phone frames", () => {
    addScreen("ds-bframe");
    const { container } = render(<FilmGrain />);
    scroll(100);
    expect(container.firstElementChild).toHaveAttribute("data-over-projects");
  });

  it("stays on when there is no project screen on the page", () => {
    const { container } = render(<FilmGrain />);
    scroll(100);
    expect(container.firstElementChild).not.toHaveAttribute(
      "data-over-projects",
    );
  });
});