// @vitest-environment jsdom
//
// lazyWithPreload: once preloaded, a page renders synchronously — no Suspense fallback, which on a module
// switch is a "Loading…" flash in place of the page. And a page that mounted through the lazy path is
// not remounted (its state kept) once the module is loaded.
import { describe, it, expect, afterEach } from "vitest";
import { Suspense, useState, type ComponentType } from "react";
import { render, screen, act, fireEvent, cleanup } from "@testing-library/react";
import { lazyWithPreload } from "./lazyWithPreload";

function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>count {n}</button>;
}
const module = (): Promise<{ default: ComponentType<object> }> =>
  Promise.resolve({ default: Counter });
const inSuspense = (C: ComponentType) => (
  <Suspense fallback={<span>fallback</span>}>
    <C />
  </Suspense>
);

afterEach(cleanup);

describe("lazyWithPreload", () => {
  it("renders a preloaded page on its first render, without the fallback", async () => {
    const Page = lazyWithPreload(module);
    await Page.preload();
    render(inSuspense(Page));
    // Synchronously after render — no act/await, so a suspension would still be showing its fallback.
    expect(screen.queryByText("fallback")).toBeNull();
    expect(screen.getByText("count 0")).toBeTruthy();
  });

  it("without a preload it suspends once, then renders", async () => {
    const Page = lazyWithPreload(module);
    render(inSuspense(Page));
    expect(screen.getByText("fallback")).toBeTruthy();
    expect(await screen.findByText("count 0")).toBeTruthy();
  });

  it("a page mounted through the lazy path keeps its state across later renders", async () => {
    // Mounted into a boundary that is ALREADY showing content — how a module switch mounts a page.
    const Page = lazyWithPreload(module);
    const shell = (show: boolean, tick: number) => (
      <Suspense fallback={<span>fallback</span>}>
        <i>shell {tick}</i>
        {show && <Page />}
      </Suspense>
    );
    const { rerender } = render(shell(false, 0));
    rerender(shell(true, 0));
    fireEvent.click(await screen.findByText("count 0")); // the module has loaded by now
    rerender(shell(true, 1)); // a later render of the same mount
    expect(screen.getByText("count 1")).toBeTruthy(); // not remounted as the loaded component
  });

  it("retries a preload that failed", async () => {
    let calls = 0;
    const Page = lazyWithPreload(() =>
      ++calls === 1
        ? Promise.reject<{ default: ComponentType<object> }>(new Error("offline"))
        : module(),
    );
    await expect(Page.preload()).rejects.toThrow("offline");
    await act(() => Page.preload());
    expect(calls).toBe(2);
  });
});