import { test as base, expect, type Page } from "@playwright/test";

import { waitForHydration } from "./navigation";

/**
 * Shared Playwright test wired to auto-wait for client hydration after every
 * full navigation (`page.goto` / `page.reload`). Server-rendered markup and
 * progressive-enhanced <Form>s are interactive immediately, but pure-JS shell
 * controls (sidebar drawer, command palette, dropdowns, locale picker) only
 * respond once React has hydrated. On slower production targets (boiler) a
 * click fired before hydration is silently dropped, which made every JS-driven
 * interaction test flaky/failing. Waiting on the `data-hydrated` marker here
 * keeps each spec free of per-navigation hydration boilerplate.
 */
export const test = base.extend<{ page: Page }>({
  page: async ({ page }, use) => {
    const originalGoto = page.goto.bind(page);
    page.goto = async (url, options) => {
      const response = await originalGoto(url, options);
      await waitForHydration(page);
      return response;
    };

    const originalReload = page.reload.bind(page);
    page.reload = async (options) => {
      const response = await originalReload(options);
      await waitForHydration(page);
      return response;
    };

    await use(page);
  },
});

export { expect };
export type { Page, Locator, Frame } from "@playwright/test";