scrabble-game/ui/e2e/game.spec.ts

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

// Behaviour/display coverage for the polished game screen, driven entirely by the mock
// transport (no backend). These lock the round-1..4 interactions so future UI edits
// surface as a failing assertion — to be re-agreed or fixed. The pure logic behind them
// (placement, check-word, board labels, result badges) is unit-tested separately.

async function openGame(page: Page): Promise<void> {
  await page.goto('/');
  await page.getByRole('button', { name: /guest/i }).click();
  await page.getByRole('button', { name: /Ann/ }).click(); // the seeded active game vs Ann
  await expect(page.locator('[data-cell]').first()).toBeVisible();
  // Wait for the screen-slide transition to settle so only the game pane remains;
  // until it does, the leaving lobby pane's header (its menu button) is also in the
  // DOM, which would make shared locators like .burger ambiguous.
  await expect(page.locator('.pane')).toHaveCount(1);
}

test('placing a tile and confirming via ✅ commits the move', async ({ page }) => {
  await openGame(page);
  await page.locator('.rack .tile').first().click();
  await page.locator('[data-cell]:not(.filled)').nth(30).click();
  await expect(page.locator('[data-cell].pending')).toHaveCount(1);

  await page.locator('.make').click(); // ✅ commits the move directly (no popover)

  // After the commit the placement is cleared: no pending tile, no ✅ control.
  await expect(page.locator('[data-cell].pending')).toHaveCount(0);
  await expect(page.locator('.make')).toBeHidden();
});

test('a pending tile recalls on double-tap, not on a single tap', async ({ page }) => {
  await openGame(page);
  await page.locator('.rack .tile').first().click();
  await page.locator('[data-cell]:not(.filled)').nth(30).click();
  await expect(page.locator('[data-cell].pending')).toHaveCount(1);

  // A single tap must NOT recall it (changed in Stage 17 — recall was too easy to trigger).
  await page.waitForTimeout(350); // clear the double-tap window from the placing tap
  await page.locator('[data-cell].pending').first().click();
  await expect(page.locator('[data-cell].pending')).toHaveCount(1);

  // A double-tap (two synchronous clicks on the same cell) recalls it to the rack.
  await page.locator('[data-cell].pending').first().evaluate((el: HTMLElement) => {
    el.click();
    el.click();
  });
  await expect(page.locator('[data-cell].pending')).toHaveCount(0);
});

test('shuffle reorders the rack but keeps the same tiles', async ({ page }) => {
  await openGame(page);
  const before = await page.locator('.rack .tile').allTextContents();
  expect(before.length).toBeGreaterThan(1);

  await page.locator('button:has-text("🔀")').click(); // the shuffle tab (no pending tiles)
  await page.waitForTimeout(650); // let the hop animation settle

  // Same multiset of tiles after the shuffle — no tile is dropped or duplicated.
  const after = await page.locator('.rack .tile').allTextContents();
  expect([...after].sort()).toEqual([...before].sort());
});

test('history slides the board down and closes on a board tap', async ({ page }) => {
  await openGame(page);
  await page.locator('.burger').click();
  await page.locator('.dropdown button').nth(0).click(); // History
  await expect(page.locator('.history')).toBeVisible();
  await expect(page.locator('.boardwrap.slid')).toBeVisible();

  await page.locator('.boardwrap').click(); // tapping the board closes it
  await expect(page.locator('.history')).toBeHidden();
});

test('Draw opens the exchange dialog and confirms a selection', async ({ page }) => {
  await openGame(page);
  await page.locator('button:has-text("🔄")').click(); // Draw tab
  await expect(page.locator('.exch')).toBeVisible();

  await page.locator('.etile').first().click();
  await expect(page.locator('.etile.sel')).toHaveCount(1);
  await page.locator('button.confirm').click();
  await expect(page.locator('.exch')).toBeHidden();
});

test('check-word sanitises input and shows a verdict', async ({ page }) => {
  await openGame(page);
  await page.locator('.burger').click();
  await page.locator('.dropdown button').nth(2).click(); // Check word

  const input = page.locator('.check input');
  await input.fill('qz9!a'); // digits/punctuation dropped, letters upper-cased
  await expect(input).toHaveValue('QZA');

  await page.locator('.check button').click(); // Check (enabled: length 3)
  await expect(page.locator('.ok, .bad')).toBeVisible();
});

test('dropping the game ends it and shows the result', async ({ page }) => {
  await openGame(page);
  await page.locator('.burger').click();
  await page.getByRole('button', { name: 'Drop game' }).click(); // robust against menu growth
  await page.locator('button.danger').click(); // confirm in the modal
  await expect(page.locator('.status .over')).toBeVisible();
});

test('the board-label mode in Settings changes the on-board labels', async ({ page }) => {
  await openGame(page);
  // beginner (default) renders split "3× / word" labels.
  await expect(page.locator('.bsplit').first()).toBeVisible();
  await expect(page.locator('.b1')).toHaveCount(0);

  // Switch to "classic" in Settings (in-SPA hash nav keeps the guest session).
  await page.evaluate(() => (location.hash = '/settings'));
  await page.locator('.seg').nth(2).locator('.opt').nth(1).click(); // board labels -> classic
  await page.evaluate(() => (location.hash = '/game/g1'));

  // classic renders single "3W"/"2L" labels and no split labels.
  await expect(page.locator('.b1').first()).toBeVisible();
  await expect(page.locator('.bsplit')).toHaveCount(0);
});