Ilia Denisov
6268b9d2a2
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 43s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m1s
On iOS (notably the Telegram Mini App) the document elastic-overscrolls on a vertical drag even with overscroll-behavior:none — the whole page stretches and bounces, and it fought the board's swipe-to-open-history. Telegram's own swipe-to-minimise is already disabled at launch; this removes the remaining WebKit document bounce by pinning the document (position:fixed + overflow:hidden) for the game SPA only. Every screen already fits the visual viewport (--vvh) and scrolls its own inner areas, so the document never needed to scroll. Scoped to the app via an `app-shell` class set in main.ts; the standalone landing page (landing.ts) keeps its normal scrolling document. e2e locks the contract on both entries.
36 lines
1.8 KiB
TypeScript
36 lines
1.8 KiB
TypeScript
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 shows the pitch, switches language via the dropdown, and toggles theme', async ({ page }) => {
|
|
await page.goto('/landing.html');
|
|
|
|
// The tagline renders (English in the default test browser).
|
|
await expect(page.getByText(/Play Scrabble/i)).toBeVisible();
|
|
|
|
// The language dropdown switches the copy to Russian.
|
|
await page.getByRole('button', { name: 'Language' }).click();
|
|
await page.getByRole('menuitem', { name: /Русский/ }).click();
|
|
await expect(page.getByText(/Играй в Скрэббл/)).toBeVisible();
|
|
|
|
// 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(/Play Scrabble/i)).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');
|
|
});
|