167 lines
13 KiB
JavaScript
167 lines
13 KiB
JavaScript
import { chromium } from 'playwright';
|
|
import AxeBuilder from '@axe-core/playwright';
|
|
import assert from 'node:assert/strict';
|
|
import { execFileSync, spawn } from 'node:child_process';
|
|
import { mkdir, writeFile } from 'node:fs/promises';
|
|
import { randomBytes } from 'node:crypto';
|
|
import net from 'node:net';
|
|
|
|
const php = process.env.PHP_BINARY || 'php';
|
|
const fixture = JSON.parse(execFileSync(php, ['tests/pilot-fixture.php'], { encoding: 'utf8', windowsHide: true }));
|
|
const env = { ...process.env, APP_ENV: 'prod', APP_DEBUG: '0', APP_SECRET: randomBytes(32).toString('hex'), DATABASE_URL: fixture.databaseUrl, MEDIA_DIRECTORY: fixture.mediaDirectory };
|
|
execFileSync(php, ['bin/console', 'cache:clear', '--env=prod', '--no-debug'], { stdio: 'ignore', windowsHide: true, env });
|
|
const probe = net.createServer(); await new Promise(resolve => probe.listen(0, '127.0.0.1', resolve));
|
|
const port = probe.address().port; await new Promise(resolve => probe.close(resolve));
|
|
const origin = `http://127.0.0.1:${port}`;
|
|
const server = spawn(php, ['-d', 'memory_limit=256M', '-S', `127.0.0.1:${port}`, '-t', 'public', 'bin/dev-router.php'], { windowsHide: true, stdio: 'ignore', env: { ...env, SITE_ORIGIN: origin } });
|
|
const report = 'reports/responsive-navigation'; await mkdir(report, { recursive: true });
|
|
let browser, page;
|
|
const checks = [], errors = [];
|
|
|
|
try {
|
|
for (let attempt = 0; attempt < 60; attempt++) {
|
|
try { if ((await fetch(origin)).ok) break; } catch {}
|
|
if (attempt === 59) throw new Error('Pilot test server did not start');
|
|
await new Promise(resolve => setTimeout(resolve, 200));
|
|
}
|
|
browser = await chromium.launch();
|
|
const context = await browser.newContext({ viewport: { width: 1600, height: 1050 } });
|
|
page = await context.newPage(); page.setDefaultTimeout(15000); page.on('pageerror', error => errors.push(error.message));
|
|
await page.goto(origin + '/admin/login');
|
|
await page.getByLabel('Benutzername').fill(fixture.username); await page.getByLabel('Passwort', { exact: true }).fill(fixture.password);
|
|
await page.getByRole('button', { name: 'Anmelden', exact: true }).click(); await page.waitForURL(origin + '/admin');
|
|
const api = `${origin}/admin/api/pages/${fixture.homeId}`;
|
|
const data = await (await context.request.get(api)).json();
|
|
data.document.schemaVersion = 22;
|
|
const visibility = ['all', 'desktop', 'tablet', 'mobile', 'hide-desktop', 'hide-tablet', 'hide-mobile', 'hidden'];
|
|
const text = (id, title, visible = 'all') => ({ id, type: 'text', props: { text: `<p>${title}</p>` }, layout: { visibility: visible } });
|
|
const nav = (id, layout = 'horizontal', collapse) => ({ id, type: 'menu', props: { slot: 'header', layout, ...(collapse ? { collapse } : {}) } });
|
|
data.document.blocks.unshift({ id: 'qa-responsive', type: 'section', children: [
|
|
{ id: 'qa-title', type: 'heading', props: { text: 'Gerätesichtbarkeit und Navigation', level: 2 } },
|
|
nav('qa-menu'), nav('qa-mobile-menu', 'horizontal', 'mobile'), nav('qa-never-menu', 'horizontal', 'never'), nav('qa-vertical', 'vertical'), nav('qa-burger', 'burger'),
|
|
...visibility.map(value => text(`qa-${value}`, value, value)),
|
|
{ id: 'qa-parent', type: 'column', layout: { visibility: 'mobile' }, style: { desktop: { display: 'flex' }, mobile: { display: 'grid' } }, children: [text('qa-child', 'Vererbte Sichtbarkeit')] },
|
|
{ id: 'qa-tabs', type: 'tabs', children: [
|
|
{ id: 'qa-tab-desktop', type: 'tabitem', props: { title: 'Desktop-Tab' }, layout: { visibility: 'desktop' }, children: [text('qa-tab-text-d', 'Desktopinhalt')] },
|
|
{ id: 'qa-tab-mobile', type: 'tabitem', props: { title: 'Mobil-Tab' }, layout: { visibility: 'mobile' }, children: [text('qa-tab-text-m', 'Mobilinhalt')] },
|
|
{ id: 'qa-tab-all', type: 'tabitem', props: { title: 'Immer-Tab' }, children: [text('qa-tab-text-a', 'Gemeinsamer Inhalt')] },
|
|
] },
|
|
{ id: 'qa-slider', type: 'slider', props: { desktopVisible: 1, tabletVisible: 1, mobileVisible: 1, snap: true, dots: true, autoplay: 0 }, children: [text('qa-slide-d', 'Desktopfolie', 'desktop'), text('qa-slide-m', 'Mobilfolie', 'mobile'), text('qa-slide-a', 'Gemeinsame Folie')] },
|
|
] });
|
|
const created = await context.request.post(api + '/draft', { headers: { 'X-CSRF-Token': data.csrfToken }, data: { document: data.document, expectedVersion: data.version } });
|
|
assert.equal(created.status(), 200, await created.text());
|
|
await page.goto(`${origin}/admin/pages/${fixture.homeId}`);
|
|
await page.locator('#structure [data-block-id="qa-all"]').click();
|
|
await page.locator('#block-visibility').selectOption('mobile');
|
|
const previewHidden = async hidden => page.waitForFunction(hidden => {
|
|
const el = document.querySelector('#preview')?.contentDocument?.getElementById('qa-all');
|
|
return el && (el.getClientRects().length === 0) === hidden;
|
|
}, hidden);
|
|
await previewHidden(true);
|
|
await page.locator('#undo').click(); await previewHidden(false);
|
|
await page.locator('#redo').click(); await previewHidden(true);
|
|
await page.locator('#structure [data-block-id="qa-all"]').click();
|
|
await page.locator('#block-visibility').selectOption('all'); await previewHidden(false);
|
|
await page.locator('#block-visibility').focus(); await page.locator('#block-visibility').press('ArrowDown'); await page.locator('#block-visibility').press('Tab');
|
|
assert.equal(await page.locator('#block-visibility').inputValue(), 'desktop');
|
|
await page.locator('#undo').click();
|
|
await page.locator('#structure [data-block-id="qa-menu"]').click();
|
|
assert.equal(await page.locator('#property-collapse').inputValue(), 'tablet');
|
|
await page.locator('#property-collapse').selectOption('never');
|
|
await page.locator('#undo').click(); assert.equal(await page.locator('#property-collapse').inputValue(), 'tablet');
|
|
await page.locator('#redo').click(); assert.equal(await page.locator('#property-collapse').inputValue(), 'never');
|
|
await page.locator('#property-collapse').selectOption('tablet');
|
|
await page.locator('[data-viewport="tablet"]').click();
|
|
const preview = page.frameLocator('#preview');
|
|
await preview.locator('#qa-menu > .menu-burger > summary').click();
|
|
assert.equal(await preview.locator('#qa-menu > .menu-burger').getAttribute('open'), '');
|
|
await page.screenshot({ path: `${report}/editor-tablet.png`, fullPage: true });
|
|
await page.locator('#save').click(); await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
|
|
await page.reload();
|
|
await page.locator('#structure [data-block-id="qa-menu"]').click();
|
|
assert.equal(await page.locator('#property-collapse').inputValue(), 'tablet');
|
|
await page.locator('#structure [data-block-id="qa-mobile"]').click();
|
|
assert.equal(await page.locator('#block-visibility').inputValue(), 'mobile');
|
|
await page.locator('[data-panel="design"]').click(); assert.equal(await page.locator('#block-visibility').inputValue(), 'mobile');
|
|
await page.locator('#publish').click(); await page.locator('#confirm-publish').click(); await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
|
|
const stored = (await (await context.request.get(api)).json()).document;
|
|
assert.equal(stored.schemaVersion, 22);
|
|
assert.deepEqual(stored.blocks[0].children.find(b => b.id === 'qa-parent').style, data.document.blocks[0].children.find(b => b.id === 'qa-parent').style);
|
|
checks.push('Editor: visibility keyboard selection, hidden block selection, reset, undo/redo, hamburger preview, save/reload/publish and preserved layout');
|
|
|
|
const plain = await browser.newContext({ javaScriptEnabled: false, viewport: { width: 1600, height: 1050 } });
|
|
const publicPage = await plain.newPage(); await publicPage.goto(origin);
|
|
const necessary = publicPage.getByRole('button', { name: 'Nur notwendige', exact: true });
|
|
if (await necessary.isVisible()) await necessary.click();
|
|
for (const width of [1600, 1025, 1024, 768, 767, 390]) {
|
|
await publicPage.setViewportSize({ width, height: 1050 });
|
|
const device = width > 1024 ? 'desktop' : width > 767 ? 'tablet' : 'mobile';
|
|
for (const value of visibility) {
|
|
const shown = value === 'all' || value === device || (value.startsWith('hide-') && value !== `hide-${device}`);
|
|
assert.equal(await publicPage.locator(`#qa-${value}`).isVisible(), shown, `${width}: ${value}`);
|
|
}
|
|
assert.equal(await publicPage.locator('#qa-child').isVisible(), device === 'mobile');
|
|
if (device === 'mobile') assert.equal(await publicPage.locator('#qa-parent').evaluate(el => getComputedStyle(el).display), 'grid');
|
|
assert.equal(await publicPage.locator('#qa-menu > .menu-burger > summary').isVisible(), width <= 1024);
|
|
assert.equal(await publicPage.locator('#qa-menu > .menu-list').isVisible(), width > 1024);
|
|
assert.equal(await publicPage.locator('#qa-mobile-menu > .menu-burger > summary').isVisible(), width <= 767);
|
|
assert.equal(await publicPage.locator('#qa-never-menu > .menu-list').isVisible(), true);
|
|
assert.equal(await publicPage.locator('#qa-vertical > .menu-list').isVisible(), true);
|
|
assert.equal(await publicPage.locator('#qa-burger > .menu-burger > summary').isVisible(), true);
|
|
if ([1600, 1024, 390].includes(width)) { await publicPage.evaluate(() => window.scrollTo(0, 0)); await publicPage.screenshot({ path: `${report}/public-${width}.png`, fullPage: true }); }
|
|
}
|
|
const summary = publicPage.locator('#qa-menu > .menu-burger > summary');
|
|
await summary.focus(); await publicPage.keyboard.press('Enter');
|
|
assert.equal(await publicPage.locator('#qa-menu > .menu-burger').getAttribute('open'), '');
|
|
await publicPage.keyboard.press('Tab');
|
|
assert.ok(await publicPage.evaluate(() => document.activeElement.closest('#qa-menu > .menu-burger')));
|
|
const branch = publicPage.locator('#qa-menu .menu-burger .menu-branch > summary').first();
|
|
if (await branch.count()) { await branch.focus(); await publicPage.keyboard.press('Space'); assert.ok(await branch.evaluate(el => el.parentElement.open)); }
|
|
await summary.focus(); await publicPage.keyboard.press('Space');
|
|
assert.equal(await publicPage.locator('#qa-menu > .menu-burger').getAttribute('open'), null);
|
|
await summary.press('Enter');
|
|
const firstLink = publicPage.locator('#qa-menu .menu-burger a:visible').first();
|
|
const href = await firstLink.getAttribute('href'); await firstLink.click(); assert.equal(publicPage.url(), new URL(href, origin).href);
|
|
await plain.close();
|
|
checks.push('Public without JavaScript: six viewport boundaries, every visibility preset, parent visibility, default and manual menu variants, keyboard toggle and real navigation');
|
|
|
|
const tablet = await browser.newContext({ javaScriptEnabled: false, hasTouch: true, isMobile: true, viewport: { width: 1366, height: 1024 } });
|
|
const ipad = await tablet.newPage(); await ipad.goto(origin);
|
|
assert.equal(await ipad.locator('#qa-menu > .menu-burger > summary').isVisible(), true);
|
|
assert.equal(await ipad.locator('#qa-menu > .menu-list').isVisible(), false);
|
|
await ipad.locator('#qa-menu > .menu-burger > summary').tap();
|
|
assert.equal(await ipad.locator('#qa-menu > .menu-burger').getAttribute('open'), '');
|
|
await ipad.locator('#qa-menu').screenshot({ path: `${report}/large-tablet.png` }); await tablet.close();
|
|
checks.push('Large tablet: 1366 px touch viewport uses the hamburger and opens by touch without JavaScript');
|
|
|
|
const enhanced = await browser.newContext({ viewport: { width: 1600, height: 1050 }, bypassCSP: true });
|
|
const dynamic = await enhanced.newPage(); await dynamic.goto(origin);
|
|
await dynamic.locator('#qa-tabs.tabs-ready').waitFor();
|
|
const audit = async () => {
|
|
const result = await new AxeBuilder({ page: dynamic }).include('#qa-menu').include('#qa-tabs').include('#qa-slider + .slider-controls').withTags(['wcag2a', 'wcag2aa', 'wcag21aa']).analyze();
|
|
assert.deepEqual(result.violations.map(item => ({ id: item.id, nodes: item.nodes.map(node => node.target) })), []);
|
|
};
|
|
await audit();
|
|
assert.equal(await dynamic.locator('#qa-tab-desktop').isVisible(), true);
|
|
await dynamic.setViewportSize({ width: 390, height: 850 });
|
|
await dynamic.locator('#qa-tab-mobile').waitFor({ state: 'visible' });
|
|
await dynamic.locator('#qa-menu > .menu-burger > summary').click(); await audit();
|
|
await dynamic.locator('#qa-tab-mobile-tab').focus(); await dynamic.keyboard.press('ArrowRight');
|
|
assert.equal(await dynamic.locator('#qa-tab-all').isVisible(), true);
|
|
await dynamic.keyboard.press('ArrowRight'); assert.equal(await dynamic.locator('#qa-tab-mobile').isVisible(), true);
|
|
const controls = dynamic.locator('#qa-slider + .slider-controls');
|
|
await controls.scrollIntoViewIfNeeded();
|
|
assert.match(await controls.locator('.slider-position').innerText(), /\/ 2$/);
|
|
assert.equal(await controls.getByRole('button', { name: 'Folie 1 anzeigen' }).isVisible(), false);
|
|
await controls.getByRole('button', { name: 'Nächste Folie' }).click();
|
|
await dynamic.waitForFunction(() => document.querySelector('#qa-slider + .slider-controls .slider-position').textContent === '2 / 2');
|
|
await enhanced.close();
|
|
checks.push('Enhanced groups: tabs select a visible panel and skip hidden tabs; slider skips hidden slides and counts visible ones; desktop/mobile WCAG checks of navigation, tabs and slider controls');
|
|
assert.deepEqual(errors, []);
|
|
await writeFile(`${report}/result.json`, JSON.stringify({ checks, passed: true }, null, 2));
|
|
console.log('Responsive navigation checks passed:', checks.length, 'groups.');
|
|
} catch (error) {
|
|
if (page) await page.screenshot({ path: `${report}/failure.png`, fullPage: true }).catch(() => {});
|
|
throw error;
|
|
} finally { await browser?.close(); server.kill(); }
|