Ilia Denisov
29f655aacd
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 39s
CI / gate (pull_request) Successful in 0s
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / deploy (pull_request) Successful in 55s
The +20px gap was too far; use +10px (padding-top safe-top+16). The gap is fixed px, so the clearance from Telegram's native nav stays constant when the user scales the font up — the title grows downward and the bar with it, no overflow. Locked by a new e2e test that asserts the title top is unchanged across font sizes and never overflows the bar.
77 lines
3.1 KiB
TypeScript
77 lines
3.1 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('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\//);
|
|
});
|