Ilia Denisov
c32a15730a
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 45s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 57s
The first attempt (the App.svelte `started` gate) targeted the first pane mount,
but the slide is a second render. On a Telegram cold launch the URL fragment is
Telegram's #tgWebAppData=... launch params, which the router parsed as notfound;
bootstrap's navigate('/') then corrected it to the lobby asynchronously, re-keying
the route pane (notfound -> lobby) and sliding the lobby in as if returning from a
screen. A reload was static because the hash was already #/.
Treat a Telegram launch fragment as the lobby root in the router, so the route is
correct from the first pane (no re-key, no slide). Extract the pure hash->Route
parsing into routeparse.ts so it unit-tests without a DOM, and revert the gate
(the first pane never slid — local transitions skip the initial mount, as clean
browser launches showed).
Tests: routeparse unit tests (incl. the tgWebApp fragment); an e2e that launches
with the fragment in the URL and asserts the lobby plus the normalised #/ hash.
94 lines
3.9 KiB
TypeScript
94 lines
3.9 KiB
TypeScript
import { expect, test } from './fixtures';
|
|
|
|
// The shared fixture already neutralises the real telegram-web-app.js, so these
|
|
// specs control window.Telegram deterministically (injected below) with no network.
|
|
|
|
// A minimal valid-looking Telegram WebApp stub: non-empty initData triggers the Mini
|
|
// App launch path (the mock gateway accepts any initData and returns a durable
|
|
// session); themeParams override the design tokens.
|
|
function webAppStub(startParam = '') {
|
|
return {
|
|
Telegram: {
|
|
WebApp: {
|
|
initData: 'query_id=test&user=%7B%22id%22%3A1%7D&auth_date=1&hash=deadbeef',
|
|
initDataUnsafe: startParam ? { start_param: startParam } : {},
|
|
themeParams: { bg_color: '#101418', text_color: '#ffffff' },
|
|
ready() {},
|
|
expand() {},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
test('Telegram launch auto-authenticates into the lobby and applies the theme', async ({ page }) => {
|
|
await page.addInitScript((stub) => {
|
|
Object.assign(window, stub);
|
|
}, webAppStub());
|
|
await page.goto('/');
|
|
|
|
// No guest-login click: the Mini App authenticates from initData and lands on the lobby.
|
|
await expect(page.getByText('Your turn')).toBeVisible();
|
|
|
|
// The Telegram themeParams override the background token at runtime.
|
|
await expect
|
|
.poll(() => page.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue('--bg').trim()))
|
|
.toBe('#101418');
|
|
});
|
|
|
|
test('a Telegram launch fragment in the URL still lands on the lobby and normalises the hash', async ({
|
|
page,
|
|
}) => {
|
|
await page.addInitScript((stub) => {
|
|
Object.assign(window, stub);
|
|
}, webAppStub());
|
|
// Telegram appends its launch params to the URL fragment on a cold launch; the router must
|
|
// not treat that as a route (it parsed as notfound, which re-keyed the pane and slid the
|
|
// lobby in as if returning from another screen).
|
|
await page.goto(
|
|
'/#tgWebAppData=query_id%3Dtest%26user%3D%257B%2522id%2522%253A1%257D&tgWebAppVersion=7.0&tgWebAppPlatform=ios',
|
|
);
|
|
await expect(page.getByText('Your turn')).toBeVisible();
|
|
// The lobby is the root: bootstrap normalised the launch-param fragment to '#/'.
|
|
await expect.poll(() => new URL(page.url()).hash).toBe('#/');
|
|
});
|
|
|
|
test('tg-fullscreen header keeps a constant native-nav gap as the font scales', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.getByRole('button', { name: /guest/i }).click();
|
|
await expect(page.getByText('Your turn')).toBeVisible(); // the lobby header is present + settled
|
|
|
|
// Emulate Telegram fullscreen: the class + safe-area vars our header positions against.
|
|
await page.evaluate(() => {
|
|
const h = document.documentElement;
|
|
h.classList.add('tg-fullscreen');
|
|
h.style.setProperty('--tg-safe-top', '47px');
|
|
h.style.setProperty('--tg-content-top', '50px');
|
|
});
|
|
const probe = () =>
|
|
page.evaluate(() => {
|
|
const bar = document.querySelector('.bar')!.getBoundingClientRect();
|
|
const h1 = document.querySelector('.bar h1')!.getBoundingClientRect();
|
|
return { h1Top: Math.round(h1.top), overflows: h1.bottom > bar.bottom + 0.5 };
|
|
});
|
|
|
|
const normal = await probe();
|
|
// Scale the root font up (an OS / Telegram "larger text" setting scales rem-based text).
|
|
await page.evaluate(() => (document.documentElement.style.fontSize = '28px'));
|
|
const large = await probe();
|
|
|
|
// The gap to Telegram's native controls is a fixed px, so the title's top does not move…
|
|
expect(large.h1Top).toBe(normal.h1Top);
|
|
// …the title grows downward inside the bar (which grows with it), never overflowing it.
|
|
expect(normal.overflows).toBe(false);
|
|
expect(large.overflows).toBe(false);
|
|
});
|
|
|
|
test('outside Telegram, the /telegram/ entry redirects to the site root', async ({ page }) => {
|
|
await page.goto('/telegram/');
|
|
|
|
// The guard sends a non-Telegram visitor back to the root, where the normal
|
|
// (guest / email) login is shown.
|
|
await expect(page.getByRole('button', { name: /guest/i })).toBeVisible();
|
|
await expect(page).not.toHaveURL(/\/telegram\//);
|
|
});
|