import { expect, test } from '@playwright/test';

const widths = [320, 390, 768, 1024, 1440];

for (const locale of ['en', 'fr', 'ar'] as const) {
  for (const width of widths) {
    test(`${locale} has no horizontal overflow at ${width}px`, async ({ page }) => {
      await page.setViewportSize({ width, height: 900 });
      await page.goto(`/${locale}`);
      const overflow = await page.evaluate(
        () => document.documentElement.scrollWidth - document.documentElement.clientWidth,
      );
      expect(overflow).toBeLessThanOrEqual(1);
    });
  }
}

test('shell remains operable at a 320 CSS pixel reflow equivalent to 200 percent zoom', async ({
  page,
}) => {
  await page.setViewportSize({ width: 640, height: 800 });
  await page.goto('/fr');
  await expect(page.getByRole('button', { name: 'Ouvrir le menu de navigation' })).toBeVisible();
});