chore: checkpoint premium 3d stages 0 and 1
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Даня Архипов
202
e2e/mobile-fallback.spec.ts
Normal file
202
e2e/mobile-fallback.spec.ts
Normal file
@@ -0,0 +1,202 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Stage 0 — mobile fallback & WebGL context resilience.
|
||||
*
|
||||
* Covers:
|
||||
* - 390×844 viewport: honest SVG fallback (no false "WebGL not available");
|
||||
* - UI never controls an invisible canvas on the fallback path;
|
||||
* - WebGL truly unavailable → same honest fallback;
|
||||
* - forced context loss → SVG fallback; context restore → one safe 3D retry;
|
||||
* - prototype mode query params work and keep Auto Cam toggle truthful.
|
||||
*/
|
||||
|
||||
const MOBILE_UA =
|
||||
'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36';
|
||||
|
||||
function collectErrors(page: import('@playwright/test').Page) {
|
||||
const pageErrors: string[] = [];
|
||||
const consoleErrors: string[] = [];
|
||||
page.on('pageerror', (err) => pageErrors.push(err.message));
|
||||
page.on('console', (msg) => {
|
||||
if (msg.type() === 'error') consoleErrors.push(msg.text());
|
||||
});
|
||||
return { pageErrors, consoleErrors };
|
||||
}
|
||||
|
||||
test.describe('mobile fallback (390x844)', () => {
|
||||
test.use({
|
||||
viewport: { width: 390, height: 844 },
|
||||
deviceScaleFactor: 3,
|
||||
userAgent: MOBILE_UA,
|
||||
isMobile: true,
|
||||
hasTouch: true,
|
||||
});
|
||||
|
||||
test('shows honest SVG fallback, no false WebGL error, UI stays functional', async ({ page }) => {
|
||||
const { pageErrors, consoleErrors } = collectErrors(page);
|
||||
|
||||
await page.goto('/');
|
||||
|
||||
// SVG fallback visible — never a blank black area
|
||||
const fallback = page.getByTestId('main-svg-fallback');
|
||||
await expect(fallback).toBeVisible({ timeout: 30_000 });
|
||||
await expect(fallback.locator('svg.sorter-svg')).toBeVisible();
|
||||
|
||||
// Honest lightweight-mode badge, in Russian, no false claims
|
||||
const badge = page.getByTestId('fallback-reason');
|
||||
await expect(badge).toBeVisible();
|
||||
await expect(badge).toContainText('Облегчённый режим');
|
||||
|
||||
// The old misleading message must be gone (both languages)
|
||||
await expect(page.locator('text=WebGL not available')).toHaveCount(0);
|
||||
await expect(page.locator('text=Please use a modern browser')).toHaveCount(0);
|
||||
|
||||
// No invisible canvas is being "controlled" — there is no canvas at all
|
||||
await expect(page.locator('canvas')).toHaveCount(0);
|
||||
|
||||
// Auto-camera toggle must not claim hidden 3D works
|
||||
await expect(page.locator('.auto-camera-toggle')).toHaveCount(0);
|
||||
|
||||
// Play/pause drive the visible SVG scene (same playback state)
|
||||
await page.getByTestId('demo-play').click();
|
||||
await expect(page.getByTestId('demo-pause')).toBeVisible({ timeout: 10_000 });
|
||||
await expect(page.getByTestId('demo-status')).not.toHaveText('FINISHED');
|
||||
await page.getByTestId('demo-pause').click();
|
||||
await expect(page.getByTestId('demo-play')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Details link present and working
|
||||
await page.getByTestId('fallback-details-link').click();
|
||||
await expect(page).toHaveURL(/\/details/);
|
||||
|
||||
// Stage 0 artifact
|
||||
await page.goto('/');
|
||||
await expect(fallback).toBeVisible({ timeout: 30_000 });
|
||||
await page.screenshot({ path: 'docs/stage0_premium_3d/screenshots/04-mobile-svg-fallback.png' });
|
||||
|
||||
expect(
|
||||
pageErrors,
|
||||
`pageerrors: ${pageErrors.join('; ')}`,
|
||||
).toEqual([]);
|
||||
expect(
|
||||
consoleErrors,
|
||||
`console errors: ${consoleErrors.join('; ')}`,
|
||||
).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('webgl unavailable', () => {
|
||||
test('desktop without WebGL gets the same honest fallback', async ({ page }) => {
|
||||
const { pageErrors } = collectErrors(page);
|
||||
await page.addInitScript(() => {
|
||||
const orig = HTMLCanvasElement.prototype.getContext;
|
||||
HTMLCanvasElement.prototype.getContext = function (this: HTMLCanvasElement, type: string, ...rest: unknown[]) {
|
||||
if (type.includes('webgl')) return null;
|
||||
return orig.call(this, type, ...rest) as RenderingContext | null;
|
||||
} as typeof HTMLCanvasElement.prototype.getContext;
|
||||
});
|
||||
|
||||
await page.goto('/');
|
||||
const fallback = page.getByTestId('main-svg-fallback');
|
||||
await expect(fallback).toBeVisible({ timeout: 30_000 });
|
||||
await expect(fallback.locator('svg.sorter-svg')).toBeVisible();
|
||||
await expect(page.getByTestId('fallback-reason')).toContainText('3D недоступно');
|
||||
await expect(page.locator('canvas')).toHaveCount(0);
|
||||
expect(pageErrors, `pageerrors: ${pageErrors.join('; ')}`).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('webgl context loss and recovery', () => {
|
||||
test('context loss shows fallback; restore performs one safe retry', async ({ page }) => {
|
||||
const { pageErrors } = collectErrors(page);
|
||||
await page.goto('/?perf=1');
|
||||
const canvas = page.locator('canvas');
|
||||
await expect(canvas).toBeVisible({ timeout: 60_000 });
|
||||
// Renderer fully initialized (perf collector live) before forcing loss
|
||||
await page.waitForFunction(() => typeof (window as never as { __PERF_SNAPSHOT__?: unknown }).__PERF_SNAPSHOT__ === 'object', null, { timeout: 15_000 });
|
||||
|
||||
// Force a real GPU context loss through the extension on the same context.
|
||||
// NB: after loseContext() getExtension() returns null on the lost context,
|
||||
// so the extension handle is captured up front and reused for restore.
|
||||
await page.evaluate(() => {
|
||||
const c = document.querySelector('canvas');
|
||||
if (!c) throw new Error('no canvas');
|
||||
const gl = (c.getContext('webgl2') ?? c.getContext('webgl')) as WebGLRenderingContext | null;
|
||||
if (!gl) throw new Error('no webgl context');
|
||||
const ext = gl.getExtension('WEBGL_lose_context');
|
||||
if (!ext) throw new Error('WEBGL_lose_context unavailable');
|
||||
(window as unknown as { __loseExt: WEBGL_lose_context }).__loseExt = ext;
|
||||
ext.loseContext();
|
||||
});
|
||||
|
||||
// Fallback appears with the context-loss badge
|
||||
const fallback = page.getByTestId('main-svg-fallback');
|
||||
await expect(fallback).toBeVisible({ timeout: 15_000 });
|
||||
await expect(page.getByTestId('fallback-reason')).toContainText('3D-сцена прервана');
|
||||
await page.screenshot({ path: 'docs/stage0_premium_3d/screenshots/07-context-loss-fallback.png' });
|
||||
|
||||
// Canvas stays mounted (hidden) so a real restore can arrive.
|
||||
await expect(page.locator('canvas')).toHaveCount(1);
|
||||
|
||||
// Restore the context — the app performs its single safe retry and 3D returns.
|
||||
await page.evaluate(() => {
|
||||
const ext = (window as unknown as { __loseExt?: WEBGL_lose_context }).__loseExt;
|
||||
if (!ext) throw new Error('extension handle missing');
|
||||
ext.restoreContext();
|
||||
});
|
||||
|
||||
await expect(canvas.first()).toBeVisible({ timeout: 15_000 });
|
||||
await expect(fallback).toBeHidden();
|
||||
|
||||
// A second loss after the consumed retry must park the fallback forever
|
||||
// (canvas unmounted, no error loop).
|
||||
await page.evaluate(() => {
|
||||
const c = document.querySelector('canvas');
|
||||
if (!c) return;
|
||||
const gl = (c.getContext('webgl2') ?? c.getContext('webgl')) as WebGLRenderingContext | null;
|
||||
gl?.getExtension('WEBGL_lose_context')?.loseContext();
|
||||
});
|
||||
await expect(fallback).toBeVisible({ timeout: 15_000 });
|
||||
await expect(page.locator('canvas')).toHaveCount(0);
|
||||
|
||||
// No uncaught errors may escape the boundary
|
||||
expect(pageErrors, `pageerrors: ${pageErrors.join('; ')}`).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('stage0 prototype mode', () => {
|
||||
test('query params enable cinematic scene; auto cam toggle is truthful', async ({ page }) => {
|
||||
const { pageErrors, consoleErrors } = collectErrors(page);
|
||||
await page.goto('/?stage0=1&shadows=1&camera=1&post=0&perf=1');
|
||||
|
||||
const canvas = page.locator('canvas');
|
||||
await expect(canvas).toBeVisible({ timeout: 60_000 });
|
||||
|
||||
// Perf collector active in prototype mode with perf=1
|
||||
await page.waitForFunction(() => typeof (window as never as { __PERF_SNAPSHOT__?: unknown }).__PERF_SNAPSHOT__ === 'object', null, { timeout: 15_000 });
|
||||
|
||||
// Auto Cam toggle starts ON and reflects real state after click
|
||||
const toggle = page.locator('.auto-camera-toggle');
|
||||
await expect(toggle).toBeVisible();
|
||||
await expect(toggle).toContainText('Auto Cam: ON');
|
||||
await toggle.click();
|
||||
await expect(toggle).toContainText('Auto Cam: OFF');
|
||||
await toggle.click();
|
||||
await expect(toggle).toContainText('Auto Cam: ON');
|
||||
|
||||
await page.getByTestId('demo-play').click();
|
||||
await page.waitForTimeout(4000);
|
||||
expect(pageErrors, `pageerrors: ${pageErrors.join('; ')}`).toEqual([]);
|
||||
expect(consoleErrors, `console errors: ${consoleErrors.join('; ')}`).toEqual([]);
|
||||
});
|
||||
|
||||
test('manual shot override keeps scene alive while paused', async ({ page }) => {
|
||||
const { pageErrors } = collectErrors(page);
|
||||
await page.goto('/?stage0=1&shadows=1&camera=1&shot=inspection&perf=1');
|
||||
const canvas = page.locator('canvas');
|
||||
await expect(canvas).toBeVisible({ timeout: 60_000 });
|
||||
// Paused playback + manual shot: camera controller must not crash
|
||||
await page.waitForTimeout(3000);
|
||||
expect(pageErrors, `pageerrors: ${pageErrors.join('; ')}`).toEqual([]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user