import { test, expect } from '@playwright/test';
const id = '10000000-0000-4000-8000-000000000001';
test('visited cooking page remains interactive offline and uncached routes show an honest fallback', async ({
  page,
  context,
}) => {
  await page.goto(`/rezepte/${id}/kochen?faktor=2`);
  await page.evaluate(() => navigator.serviceWorker.ready);
  await expect
    .poll(() =>
      page.evaluate(async () => {
        const cache = await caches.open('hamham-public-v1');
        return !!(await cache.match(location.href));
      }),
    )
    .toBe(true);
  await page.getByRole('button', { name: 'Nächster Schritt' }).click();
  await page.getByRole('button', { name: 'Pinienkerne rösten starten' }).click();
  // Wait until the cached HTML's script assets have been stored as well.
  await expect
    .poll(() =>
      page.evaluate(async () => {
        const cache = await caches.open('hamham-public-v1');
        const scripts = Array.from(document.scripts)
          .map((s) => s.src)
          .filter(Boolean);
        return (await Promise.all(scripts.map((s) => cache.match(s)))).every(Boolean);
      }),
    )
    .toBe(true);
  await page.reload();
  await context.setOffline(true);
  await page.reload();
  await expect(page.getByRole('heading', { name: 'Das Pesto zum Leuchten bringen' })).toBeVisible();
  await expect(page.getByRole('button', { name: 'Pinienkerne rösten pausieren' })).toBeVisible();
  await page.getByRole('button', { name: 'Nächster Schritt' }).click();
  await expect(page.getByRole('heading', { name: 'Pasta trifft Pesto' })).toBeVisible();
  await page.goto('/rezepte/10000000-0000-4000-8000-999999999999');
  await expect(page.getByRole('heading', { name: 'Ein Moment ohne Netz.' })).toBeVisible();
  await context.setOffline(false);
});