import "@testing-library/jest-dom/vitest";
import { lazy } from "react";
import { act, cleanup, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { LazyContent } from "../src/components/LazyContent";

afterEach(() => {
  cleanup();
  vi.restoreAllMocks();
});

describe("LazyContent", () => {
  it("keeps the surrounding app shell visible while a feature chunk loads", async () => {
    let resolveModule: ((module: { default: () => React.JSX.Element }) => void) | undefined;
    const Feature = lazy(
      () =>
        new Promise<{ default: () => React.JSX.Element }>((resolve) => {
          resolveModule = resolve;
        })
    );

    render(
      <main>
        <h1>Watermaps</h1>
        <LazyContent
          pending={<p role="status">Modul wird geladen …</p>}
          failed={<p role="alert">Modul fehlt.</p>}
        >
          <Feature />
        </LazyContent>
      </main>
    );

    expect(screen.getByRole("heading", { name: "Watermaps" })).toBeVisible();
    expect(screen.getByRole("status")).toHaveTextContent("Modul wird geladen");

    await act(async () => {
      resolveModule?.({ default: () => <section>Funktion bereit</section> });
    });

    expect(await screen.findByText("Funktion bereit")).toBeVisible();
    expect(screen.queryByRole("status")).not.toBeInTheDocument();
  });

  it("contains a failed lazy import inside its local fallback", async () => {
    vi.spyOn(console, "error").mockImplementation(() => undefined);
    const BrokenFeature = lazy(() => Promise.reject(new Error("Chunk fehlt")));

    render(
      <main>
        <h1>Watermaps</h1>
        <LazyContent
          pending={<p role="status">Modul wird geladen …</p>}
          failed={<p role="alert">Modul konnte nicht geladen werden.</p>}
        >
          <BrokenFeature />
        </LazyContent>
      </main>
    );

    expect(await screen.findByRole("alert")).toHaveTextContent("nicht geladen");
    expect(screen.getByRole("heading", { name: "Watermaps" })).toBeVisible();
  });
});