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

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

// The landing page is a separate Vite entry (landing.html), served at "/" in production while
// the game SPA lives at /app/ and /telegram/. In dev it is reachable at /landing.html.
test('landing defaults to Russian, switches language via the dropdown, and toggles theme', async ({ page }) => {
  await page.goto('/landing.html');

  // Russian by default regardless of the browser language (the test browser is en-US):
  // crawlers render with arbitrary navigator.language, so the landing never auto-detects.
  await expect(page.getByText(/Играй в «Эрудита»/)).toBeVisible();
  await expect(page).toHaveTitle(/Эрудит \(Скрэббл\)/);
  expect(await page.evaluate(() => document.documentElement.lang)).toBe('ru');

  // The static SEO head is present (the page is client-rendered; this layer is what
  // non-rendering crawlers and link-preview bots see).
  expect(await page.locator('meta[name="description"]').getAttribute('content')).toContain('Эрудит');
  expect(await page.locator('meta[property="og:image"]').getAttribute('content')).toBe(
    'https://erudit-game.ru/og-image.png',
  );
  const jsonLd = await page.locator('script[type="application/ld+json"]').textContent();
  expect(JSON.parse(jsonLd!)['@type']).toBe('WebApplication');

  // The language dropdown switches the copy to English, and the document language follows.
  await page.getByRole('button', { name: 'Language' }).click();
  await page.getByRole('menuitem', { name: /English/ }).click();
  await expect(page.getByText(/Play Scrabble/i)).toBeVisible();
  expect(await page.evaluate(() => document.documentElement.lang)).toBe('en');

  // The theme toggle flips the document theme (ephemeral, light<->dark).
  const before = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
  await page.getByRole('button', { name: 'Theme' }).click();
  const after = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
  expect(after).not.toBe(before);
});

// The document-pin that stops the SPA from rubber-banding is scoped to the game app (main.ts
// adds .app-shell); the landing is a normal scrolling document and must keep scrolling.
test('the landing is a normal scrolling document (the SPA document-pin does not apply)', async ({ page }) => {
  await page.goto('/landing.html');
  await expect(page.getByText(/Играй в «Эрудита»/)).toBeVisible();

  const state = await page.evaluate(() => ({
    shell: document.documentElement.classList.contains('app-shell'),
    bodyPosition: getComputedStyle(document.body).position,
  }));
  expect(state.shell).toBe(false);
  expect(state.bodyPosition).not.toBe('fixed');
});

// The web-version entry (/app/) is always present, alongside the build-var-gated Telegram/VK ones
// (absent here, since e2e sets no VITE_* vars), each with a caption.
test('the landing shows a web-version entry linking /app/, with a caption', async ({ page }) => {
  await page.goto('/landing.html');
  await expect(page.getByText(/Играй в «Эрудита»/)).toBeVisible(); // Russian by default

  const web = page.getByRole('link', { name: 'Играть в браузере' });
  await expect(web).toBeVisible();
  expect(await web.getAttribute('href')).toContain('/app/');
  await expect(page.getByText('Веб-версия')).toBeVisible();
});