import { act } from "@testing-library/react";
import { hydrateRoot, type Root } from "react-dom/client";
import { renderToString } from "react-dom/server";
import Hero from "./Hero";

afterEach(() => {
  jest.restoreAllMocks();
});

it.each([false, true])(
  "hydrates without attribute mismatches when reduced motion resolves to %s",
  async (reducedMotion) => {
    jest.spyOn(window, "matchMedia").mockImplementation((media) => ({
      media,
      matches: media === "(prefers-reduced-motion: reduce)" && reducedMotion,
      onchange: null,
      addListener: jest.fn(),
      removeListener: jest.fn(),
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    }));
    const container = document.createElement("div");
    container.innerHTML = renderToString(<Hero />);
    document.body.append(container);

    const consoleErrors = jest.spyOn(console, "error").mockImplementation();
    const recoverableErrors: unknown[] = [];
    let root: Root | undefined;
    try {
      await act(async () => {
        root = hydrateRoot(container, <Hero />, {
          onRecoverableError: (error) => recoverableErrors.push(error),
        });
      });
      expect(recoverableErrors).toEqual([]);
      expect(consoleErrors.mock.calls).toEqual([]);
    } finally {
      await act(async () => root?.unmount());
      container.remove();
    }
  },
);