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

import { TextDiffuseReveal } from "./TextDiffuseReveal";

let mockInView = false;
jest.mock("motion/react", () => ({ 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");
  });
});