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

import { TextDiffuseReveal } from "./TextDiffuseReveal";

let mockInView = false;
jest.mock("@/app/hooks/useInView", () => ({ useInView: () => mockInView }));

describe("TextDiffuseReveal", () => {
  beforeEach(() => {
    mockInView = false;
  });

  it("keeps the whole sentence readable once for assistive technology", () => {
    const { container } = render(
      <TextDiffuseReveal text="Software feito a partir do seu negócio" />,
    );

    expect(
      screen.getByText("Software feito a partir do seu negócio"),
    ).toHaveClass("sr-only");
    const words = container.querySelectorAll(".text-reveal-word");
    expect(words).toHaveLength(7);
    expect(words[0].closest("[aria-hidden='true']")).not.toBeNull();
  });

  it("marks the title as shown only after it enters the viewport", () => {
    const { container, rerender } = render(
      <TextDiffuseReveal text="Reveal me" />,
    );
    expect(container.querySelector(".text-reveal")).not.toHaveAttribute(
      "data-shown",
    );

    mockInView = true;
    rerender(<TextDiffuseReveal text="Reveal me" />);
    expect(container.querySelector(".text-reveal")).toHaveAttribute(
      "data-shown",
    );
  });
});