99 lines
3.7 KiB
JavaScript
99 lines
3.7 KiB
JavaScript
/**
|
|
* Smoke test for the iOS/PWA fullscreen-button fix (Task #52).
|
|
*
|
|
* Bug: on an iPhone running the installed PWA in portrait (standalone
|
|
* display-mode), tapping the fullscreen button did nothing. Root cause: iOS
|
|
* Safari does not implement the standard Fullscreen API
|
|
* (Element.requestFullscreen) for arbitrary elements — even in a standalone
|
|
* PWA — so `stage.requestFullscreen?.()` silently no-ops. WebKit instead
|
|
* exposes a video-only, non-standard fallback,
|
|
* HTMLVideoElement.webkitEnterFullscreen/webkitExitFullscreen, which does
|
|
* work in standalone mode.
|
|
*
|
|
* Playwright/Chromium implements the standard Fullscreen API, so to exercise
|
|
* the WebKit fallback branch we delete `requestFullscreen` from the stage
|
|
* element (simulating iOS Safari) and stub `webkitEnterFullscreen` /
|
|
* `webkitExitFullscreen` on the <video> element, then confirm the fallback
|
|
* is invoked instead of the button doing nothing.
|
|
*/
|
|
const { test, expect } = require('@playwright/test');
|
|
|
|
test.describe('Fullscreen button — iOS WebKit fallback', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('.app', { state: 'attached' });
|
|
});
|
|
|
|
test('falls back to webkitEnterFullscreen when requestFullscreen is unavailable (iOS Safari/PWA)', async ({ page }) => {
|
|
const result = await page.evaluate(() => {
|
|
const video = document.getElementById('video');
|
|
const stage = video.parentElement;
|
|
|
|
// Simulate iOS Safari: no standard Fullscreen API on the stage element.
|
|
delete stage.requestFullscreen;
|
|
|
|
let entered = false;
|
|
video.webkitEnterFullscreen = () => { entered = true; };
|
|
|
|
// Make sure we're not in audio-only mode so the fallback proceeds.
|
|
Player.mode = 'progressive';
|
|
|
|
document.getElementById('fsBtn').click();
|
|
|
|
return { entered };
|
|
});
|
|
expect(result.entered).toBe(true);
|
|
});
|
|
|
|
test('exits via webkitExitFullscreen when webkitDisplayingFullscreen is true', async ({ page }) => {
|
|
const result = await page.evaluate(() => {
|
|
const video = document.getElementById('video');
|
|
const stage = video.parentElement;
|
|
|
|
delete stage.requestFullscreen;
|
|
// No document.exitFullscreen available either, mirroring iOS.
|
|
Object.defineProperty(document, 'exitFullscreen', { value: undefined, configurable: true });
|
|
Object.defineProperty(video, 'webkitDisplayingFullscreen', { value: true, configurable: true });
|
|
|
|
let exited = false;
|
|
video.webkitExitFullscreen = () => { exited = true; };
|
|
|
|
document.getElementById('fsBtn').click();
|
|
|
|
return { exited };
|
|
});
|
|
expect(result.exited).toBe(true);
|
|
});
|
|
|
|
test('shows a toast instead of a silent no-op in audio-only mode', async ({ page }) => {
|
|
const toastText = await page.evaluate(() => {
|
|
const video = document.getElementById('video');
|
|
const stage = video.parentElement;
|
|
|
|
delete stage.requestFullscreen;
|
|
video.webkitEnterFullscreen = () => {};
|
|
Player.mode = 'audio';
|
|
|
|
document.getElementById('fsBtn').click();
|
|
|
|
const el = document.querySelector('.toast-container .toast, .toast');
|
|
return el ? el.textContent : null;
|
|
});
|
|
expect(toastText).toContain('audio-only');
|
|
});
|
|
|
|
test('no JS errors are thrown when the fullscreen button is clicked', async ({ page }) => {
|
|
const errors = [];
|
|
page.on('pageerror', (e) => errors.push(e.message));
|
|
|
|
// The fsBtn is only visible once a video is loaded (.player-pane loses
|
|
// its .empty state) — dispatch the click via JS as the other tests in
|
|
// this file do, rather than requiring a real video load in this smoke
|
|
// test.
|
|
await page.evaluate(() => document.getElementById('fsBtn').click());
|
|
await page.waitForTimeout(100);
|
|
|
|
expect(errors).toEqual([]);
|
|
});
|
|
});
|