cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

style(ui): open application rows and workspace sections

Browse Source 
65 targeted tests and focused six-state phone pilot pass. Full 216-state visual qualification remains pending; final owner acceptance is separate.
This commit is contained in:
cesnimda
2026-11-04 00:56:57 +01:00
parent af2df36062
commit c9138af01e
10 changed files with 269 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/scripts/verify-a3-applications.mjs
+28 -3
View File
@@ -5,11 +5,13 @@ import assert from 'node:assert/strict';
import fs from 'node:fs';
import path from 'node:path';
const visualMatrix = Boolean(process.env.A3_VISUAL_MATRIX);
const flatWorkspace = Boolean(process.env.A3_FLAT_WORKSPACE);
assert.ok(!flatWorkspace || visualMatrix, 'Flat workspace qualification uses the visual matrix.');
const widths = visualMatrix ? [320, 360, 390, 430, 768, 1024, 1280, 1440, 1920] : [320, 390, 768, 1440];
const configurations = process.env.A3_PILOT ? [[320, 'en', 'light']] : widths.flatMap(width => ['en', 'nb'].flatMap(language => ['light', 'dark'].map(mode => [width, language, mode])));
const out = path.resolve(import.meta.dirname, visualMatrix ? '../../docs/ui-modernisation/visual-correction/evidence/applications' : '../../docs/ui-modernisation/evidence/applications/browser');
const out = path.resolve(import.meta.dirname, flatWorkspace ? '../../docs/ui-modernisation/visual-correction/evidence/applications-flat' : visualMatrix ? '../../docs/ui-modernisation/visual-correction/evidence/applications' : '../../docs/ui-modernisation/evidence/applications/browser');
fs.mkdirSync(out, { recursive: true });
const report = { screens: [], journeys: [], aliases: [], errors: [], unexpectedWrites: [], mockedWrites: [], unavailableReads: [], blockedExternal: [] };
const report = { screens: [], journeys: [], aliases: [], focusChecks: [], errors: [], unexpectedWrites: [], mockedWrites: [], unavailableReads: [], blockedExternal: [] };
const browser = await chromium.launch();
try {
for (const [width, language, mode] of configurations) {
@@ -55,6 +57,24 @@ try {
const search = page.getByRole('textbox', { name: language === 'en' ? 'Search' : 'Søk', exact: true }); await search.waitFor();
await page.locator('[data-job-row-id="42"], [data-job-card-id="42"]').first().waitFor();
await scan('table');
if (flatWorkspace) {
await page.keyboard.press('Tab');
const row = page.locator('[data-job-row-id="42"]').first(); await row.focus(); await expect(row).toBeFocused();
const focus = await row.evaluate(element => {
const style = getComputedStyle(element), rect = element.getBoundingClientRect();
const extension = parseFloat(style.outlineWidth) + parseFloat(style.outlineOffset);
const clippedBy = [];
for (let parent = element.parentElement; parent; parent = parent.parentElement) {
const bounds = parent.getBoundingClientRect(), overflow = getComputedStyle(parent).overflowX;
if (['hidden', 'clip', 'auto', 'scroll'].includes(overflow) && (rect.left - extension < bounds.left || rect.right + extension > bounds.right)) clippedBy.push(parent.tagName);
}
return { outlineStyle: style.outlineStyle, outlineWidth: style.outlineWidth, clippedBy };
});
report.focusChecks.push({ width, language, mode, ...focus });
assert.notEqual(focus.outlineStyle, 'none');
if (width < 768) assert.deepEqual(focus.clippedBy, [], 'mobile row focus ring is clipped');
await scan('table-focused');
}
if (visualMatrix) {
await page.getByRole('button', { name: language === 'en' ? 'Add Job' : 'Legg til jobb', exact: true }).click();
await expect(page.getByRole('dialog')).toBeVisible(); await scan('add-job');
@@ -78,6 +98,11 @@ try {
const main = await page.getByRole('tabpanel').boundingBox(), side = await aside.boundingBox();
assert.ok(width > 1000 ? side.x > main.x + main.width - 2 && Math.abs(side.y - main.y) < 2 : side.y >= main.y + main.height - 2);
await scan('detail');
if (flatWorkspace) {
await page.getByRole('button', { name: language === 'en' ? 'Job details' : 'Stillingsdetaljer', exact: true }).click();
await expect(page.getByText('Recorded source advertisement.', { exact: true })).toBeVisible();
await scan('detail-expanded');
}
await page.getByRole('button', { name: language === 'en' ? 'Back to applications' : 'Tilbake til søknader', exact: true }).click();
await page.waitForURL(/view=board/); assert.equal(new URL(page.url()).searchParams.get('q'), 'nurse');
await page.locator('[data-kanban-card-id="42"] [role="button"]').waitFor();
@@ -93,7 +118,7 @@ try {
}
await context.close();
}
assert.equal(report.screens.length, configurations.length * (visualMatrix ? 4 : 3)); assert.equal(report.journeys.length, configurations.length); assert.equal(report.mockedWrites.length, configurations.length); assert.equal(report.aliases.length, visualMatrix ? 3 : 0);
assert.equal(report.screens.length, configurations.length * (flatWorkspace ? 6 : visualMatrix ? 4 : 3)); assert.equal(report.journeys.length, configurations.length); assert.equal(report.mockedWrites.length, configurations.length); assert.equal(report.aliases.length, visualMatrix ? 3 : 0);
assert.deepEqual(report.errors, []); assert.deepEqual(report.unexpectedWrites, []);
assert.ok(report.blockedExternal.every(origin => origin === 'https://fonts.googleapis.com'));
console.log(`PASS:${report.journeys.length} controlled table/board/detail journeys,${report.screens.length} axe scans/captures;${report.mockedWrites.length} mocked status writes.`);