import { expect, test } from './fixtures';

// Item 5: zooming the board must enlarge the labels too (a magnifying-glass zoom).
// cqw is sized against the zoom-scaled board, so the font grows with the cells.
test('zoom enlarges the board labels with the board', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('button', { name: /guest/i }).click();
  await page.getByRole('button', { name: /Ann/ }).click();

  const letter = page.locator('[data-cell] .letter').first();
  await expect(letter).toBeVisible();
  const base = await letter.evaluate((el) => parseFloat(getComputedStyle(el).fontSize));

  // Double-tap an empty cell to zoom in (two synchronous clicks = a double-tap).
  await page
    .locator('[data-cell]:not(.filled)')
    .nth(20)
    .evaluate((el: HTMLElement) => {
      el.click();
      el.click();
    });
  await page.waitForTimeout(400); // let the width transition settle

  const zoomed = await letter.evaluate((el) => parseFloat(getComputedStyle(el).fontSize));
  expect(zoomed).toBeGreaterThan(base * 1.4);
});