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

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

// Stage 8 social / account / history surfaces against the mock transport (no backend).
// The mock profile is a durable account, so friends, invitations, stats and the GCG
// export are reachable from the seeded fixture.

async function loginLobby(page: Page): Promise<void> {
  await page.goto('/');
  await page.getByRole('button', { name: /guest/i }).click();
  await expect(page.getByText('Active games')).toBeVisible();
}

async function openFriends(page: Page): Promise<void> {
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: /Friends/ }).click();
}

test('friends: issue a code, accept an incoming request, redeem a code', async ({ page }) => {
  await loginLobby(page);
  await openFriends(page);

  // Issue a one-time code — it is shown to share, with a copy control.
  await page.getByRole('button', { name: /Show my code/i }).click();
  await expect(page.getByTestId('friend-code')).toContainText('246813');
  await expect(page.getByRole('button', { name: 'Copy' })).toBeVisible();

  // The seeded incoming request (Rick) can be accepted; the requests section clears.
  await expect(page.getByText('Friend requests')).toBeVisible();
  await page.getByRole('button', { name: /^Accept$/ }).click();
  await expect(page.getByText('Friend requests')).toBeHidden();

  // Redeeming a code adds a new friend to the list.
  await page.locator('.codein').fill('111111');
  await page.getByRole('button', { name: /^Add$/ }).click();
  await expect(page.locator('.who', { hasText: 'Friend 111111' })).toBeVisible();
});

test('invitations: the lobby shows an invitation and accepting clears it', async ({ page }) => {
  await loginLobby(page);
  await expect(page.getByText('Invitations')).toBeVisible();
  await expect(page.getByText(/From Kaya/)).toBeVisible();
  await page.getByRole('button', { name: /^Accept$/ }).click();
  await expect(page.getByText(/From Kaya/)).toBeHidden();
});

test('stats screen shows the metrics', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /Stats/ }).click();
  await expect(page.getByText('Win rate')).toBeVisible();
  await expect(page.getByText('Best move')).toBeVisible();
});

test('profile edit saves a new display name', async ({ page }) => {
  await loginLobby(page);
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: /Profile/ }).click();
  await page.getByRole('button', { name: /Edit profile/ }).click();
  await page.locator('.edit input').first().fill('Kaya Test');
  await page.getByRole('button', { name: /^Save$/ }).click();
  await expect(page.locator('.name')).toHaveText('Kaya Test');
});

test('GCG export appears only for a finished game', async ({ page }) => {
  await loginLobby(page);
  // The finished game vs Kaya exposes the export; the menu carries the item.
  await page.getByRole('button', { name: /Kaya/ }).click();
  await page.locator('.burger').first().click();
  await expect(page.getByRole('button', { name: /Export GCG/ })).toBeVisible();
});

test('GCG export is hidden for an active game', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /Ann/ }).click();
  await page.locator('.burger').first().click();
  await expect(page.getByRole('button', { name: /Export GCG/ })).toHaveCount(0);
});

test('finished game draws an inert footer and trims the live-only menu', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /Kaya/ }).click(); // finished game vs Kaya
  await expect(page.locator('[data-cell]').first()).toBeVisible();
  // The footer (tab bar) is drawn but its controls are disabled in a finished game.
  await expect(page.locator('.tab').first()).toBeDisabled();
  // The menu drops Check word and Drop game once the game is over.
  await page.locator('.burger').first().click();
  await expect(page.getByRole('button', { name: 'Check word' })).toHaveCount(0);
  await expect(page.getByRole('button', { name: 'Drop game' })).toHaveCount(0);
});

test('lobby hamburger shows the pending notification count', async ({ page }) => {
  await loginLobby(page);
  // One incoming friend request (Rick) + one invitation (Kaya) = 2.
  await expect(page.getByTestId('menu-badge')).toHaveText('2');
});

test('play with friends: a game type is required to send an invitation', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /New/ }).click(); // lobby tab bar
  await page.getByRole('button', { name: 'Play with friends' }).click();

  const send = page.getByRole('button', { name: 'Send invitation' });
  await expect(send).toBeDisabled();

  await page.getByRole('checkbox').first().check(); // pick a friend
  await expect(send).toBeDisabled(); // still no game type

  await page.locator('.field select').first().selectOption('english');
  await expect(send).toBeEnabled();

  await send.click(); // the mock creates it and returns to the lobby
  await expect(page.getByText('Active games')).toBeVisible();
});

test('game: add-to-friends flips to a disabled "request sent"', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /Ann/ }).click(); // active game vs Ann
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: /Add to friends: Ann/ }).click();
  // Reopening the menu shows the item as a disabled "request sent".
  await page.locator('.burger').first().click();
  const sent = page.getByRole('button', { name: 'Request sent' });
  await expect(sent).toBeVisible();
  await expect(sent).toBeDisabled();
});

test('profile edit disables Save and flags an invalid display name', async ({ page }) => {
  await loginLobby(page);
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: /Profile/ }).click();
  await page.getByRole('button', { name: /Edit profile/ }).click();

  const name = page.locator('.edit input').first();
  const save = page.getByRole('button', { name: /^Save$/ });
  await name.fill('Bad__Name'); // adjacent specials — invalid
  await expect(save).toBeDisabled();
  await expect(name).toHaveClass(/invalid/);

  await name.fill('Good Name');
  await expect(save).toBeEnabled();
});

test('chat send and nudge are icon buttons', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /Ann/ }).click();
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: 'Chat' }).click();
  // Icon-only controls expose their action through the aria-label.
  await expect(page.getByRole('button', { name: 'Send' })).toBeVisible();
  await expect(page.getByRole('button', { name: 'Nudge' })).toBeVisible();
});