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

jest.mock("next/dynamic", () => {
  const labels = [
    "About",
    "Skills",
    "Experience",
    "WorkModalities",
    "Contact",
    "LighthouseMetrics",
    "Footer",
    "ScrollVelocityText",
    "SectionDivider",
  ];
  let index = 0;

  return () => {
    const label = labels[index++] ?? "DynamicSection";
    return function DynamicMock() {
      return <section data-testid={`home-section-${label}`}>{label}</section>;
    };
  };
});

jest.mock("../Hero", () => () => <section data-testid="home-section-Hero" />);
jest.mock("../Projects", () => () => (
  <section data-testid="home-section-Projects" />
));
jest.mock("../story/NotebookStory", () => () => (
  <section data-testid="home-section-NotebookStory" />
));

describe("CinematicHome", () => {
  it("renders each primary section directly in the published order", () => {
    const { container } = render(
      <CinematicHome experiences={[]} projects={[]} skillCategories={[]} />,
    );
    const main = container.querySelector("main");
    const sectionNames = [
      "Hero",
      "NotebookStory",
      "About",
      "Skills",
      "Experience",
      "Projects",
      "LighthouseMetrics",
      "WorkModalities",
      "Contact",
    ];
    const sectionIds = sectionNames.map((name) => `home-section-${name}`);
    const directSections = Array.from(main?.children ?? []).filter((element) =>
      sectionIds.includes(element.getAttribute("data-testid") ?? ""),
    );

    expect(screen.getAllByTestId("home-section-NotebookStory")).toHaveLength(1);
    expect(
      directSections.map((section) => section.getAttribute("data-testid")),
    ).toEqual(sectionIds);
  });
});