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

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

// 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('Your turn')).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.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: hiding a finished game removes it (kebab → ❌), keeping the others', async ({ page }) => {
  await loginLobby(page);

  // Both seeded finished games are listed; the active row carries the inert chevron, not a kebab.
  await expect(page.locator('.rowwrap', { hasText: 'Kaya' })).toBeVisible();
  await expect(page.locator('.rowwrap', { hasText: 'Rick' })).toBeVisible();
  const annRow = page.locator('.rowwrap', { hasText: 'Ann' });
  await expect(annRow.locator('.kebab')).toHaveCount(0);
  await expect(annRow.locator('.chev')).toBeVisible();

  // The kebab reveals the delete action in place (no dropdown menu); tapping ❌ hides the game.
  const kayaRow = page.locator('.rowwrap', { hasText: 'Kaya' });
  await kayaRow.locator('.kebab').click();
  await expect(kayaRow).toHaveClass(/revealed/);
  await kayaRow.locator('.del').click();

  // The hidden game is gone from the list; the other finished game remains.
  await expect(page.locator('.rowwrap', { hasText: 'Kaya' })).toHaveCount(0);
  await expect(page.locator('.rowwrap', { hasText: 'Rick' })).toBeVisible();
});

test('lobby: the active-row chevron opens the game (not a no-op)', async ({ page }) => {
  await loginLobby(page);
  // The inert-looking '>' on an active row is a tap target that opens the game, like the row.
  await page.locator('.rowwrap', { hasText: 'Ann' }).locator('.chev').click();
  await expect(page.locator('[data-cell]').first()).toBeVisible();
});

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('scrabble_en');
  await expect(send).toBeEnabled();

  await send.click(); // the mock creates it and returns to the lobby
  await expect(page.getByText('Your turn')).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('game: an opponent who is already a friend shows a disabled "in friends"', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /Kaya/ }).click(); // the finished game vs Kaya, a seeded friend
  await page.locator('.burger').first().click();
  // The in-game friend item is derived from the server's friend list (Stage 17): a friend reads
  // a disabled "✓ in friends", not the addable "Add to friends".
  const inFriends = page.getByRole('button', { name: /in friends/i });
  await expect(inFriends).toBeVisible();
  await expect(inFriends).toBeDisabled();
  await expect(page.getByRole('button', { name: /Add to friends: Kaya/ })).toHaveCount(0);
});

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();

  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('link account: a taken email opens the irreversible merge confirmation', async ({ page }) => {
  await loginLobby(page);
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: /Profile/ }).click();

  // The linking section is shown to everyone (guests upgrade by linking).
  await expect(page.getByRole('heading', { name: 'Link an account' })).toBeVisible();
  // An address containing "merge" stands in (in the mock) for one already owned by
  // another account, so the confirm step reveals a required merge.
  await page.locator('.emailbox input[type="email"]').fill('merge@example.com');
  await page.getByRole('button', { name: 'Send code' }).click();
  await page.locator('.emailbox .codein').fill('123456');
  await page.getByRole('button', { name: 'OK' }).click();

  // The reveal happens only after the code, and names the other account.
  await expect(page.getByText('Merge accounts?')).toBeVisible();
  await expect(page.getByText(/Ann/)).toBeVisible();
  await page.getByRole('button', { name: 'Merge' }).click();
  await expect(page.getByText('Merge accounts?')).toBeHidden();
});

test('link account: the Telegram web sign-in control is offered in a browser', async ({ page }) => {
  await loginLobby(page);
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: /Profile/ }).click();
  await expect(page.getByRole('button', { name: 'Link Telegram' })).toBeVisible();
});

test('chat: the message field shows on your turn, the nudge replaces it otherwise', async ({ page }) => {
  await loginLobby(page);
  await page.getByRole('button', { name: /Ann/ }).click(); // g1: your turn
  await page.locator('.burger').first().click();
  await page.getByRole('button', { name: 'Chat' }).click();
  // On your turn the message field + Send are shown and the nudge is hidden (Stage 17);
  // chat and nudge are mutually exclusive by turn. 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' })).toHaveCount(0);
});