65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
|
import { test, expect } from '@playwright/test';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* `f` is only worth having if it reaches the real Fullscreen API — a CSS
|
||
|
|
* overlay already covered the viewport before this, and the whole point is the
|
||
|
|
* browser chrome that CSS cannot touch. So these assert on
|
||
|
|
* `document.fullscreenElement`, not on a class name.
|
||
|
|
*/
|
||
|
|
test.describe('Lightbox fullscreen', () => {
|
||
|
|
const GRID_URL = '/deutschland/kloster-chorin';
|
||
|
|
|
||
|
|
/** Open the first photo and wait for the viewer. */
|
||
|
|
async function openLightbox(page: import('@playwright/test').Page) {
|
||
|
|
await page.goto(GRID_URL);
|
||
|
|
const item = page.locator('.photo-grid .photo-grid__item').first();
|
||
|
|
await item.scrollIntoViewIfNeeded();
|
||
|
|
await item.click();
|
||
|
|
await expect(page.getByRole('dialog')).toBeVisible();
|
||
|
|
}
|
||
|
|
|
||
|
|
const fullscreenTag = (page: import('@playwright/test').Page) =>
|
||
|
|
page.evaluate(() => document.fullscreenElement?.tagName ?? null);
|
||
|
|
|
||
|
|
test('f enters fullscreen and f leaves it again', async ({ page }) => {
|
||
|
|
await openLightbox(page);
|
||
|
|
expect(await fullscreenTag(page)).toBeNull();
|
||
|
|
|
||
|
|
await page.keyboard.press('f');
|
||
|
|
await expect.poll(() => fullscreenTag(page)).toBe('DIV');
|
||
|
|
|
||
|
|
await page.keyboard.press('f');
|
||
|
|
await expect.poll(() => fullscreenTag(page)).toBeNull();
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Esc leaves fullscreen before it closes the viewer', async ({ page }) => {
|
||
|
|
await openLightbox(page);
|
||
|
|
await page.keyboard.press('f');
|
||
|
|
await expect.poll(() => fullscreenTag(page)).toBe('DIV');
|
||
|
|
|
||
|
|
await page.keyboard.press('Escape');
|
||
|
|
await expect.poll(() => fullscreenTag(page)).toBeNull();
|
||
|
|
// One layer at a time: the viewer is still open.
|
||
|
|
await expect(page.getByRole('dialog')).toBeVisible();
|
||
|
|
|
||
|
|
await page.keyboard.press('Escape');
|
||
|
|
await expect(page.getByRole('dialog')).toHaveCount(0);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('closing the viewer does not strand the page in fullscreen', async ({ page }) => {
|
||
|
|
await openLightbox(page);
|
||
|
|
await page.keyboard.press('f');
|
||
|
|
await expect.poll(() => fullscreenTag(page)).toBe('DIV');
|
||
|
|
|
||
|
|
await page.getByRole('button', { name: /close/i }).click();
|
||
|
|
await expect(page.getByRole('dialog')).toHaveCount(0);
|
||
|
|
await expect.poll(() => fullscreenTag(page)).toBeNull();
|
||
|
|
});
|
||
|
|
|
||
|
|
test('the shortcut panel advertises the key', async ({ page }) => {
|
||
|
|
await openLightbox(page);
|
||
|
|
await page.keyboard.press('?');
|
||
|
|
await expect(page.getByText(/fullscreen|vollbild/i).first()).toBeVisible();
|
||
|
|
});
|
||
|
|
});
|