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

feat(ui): modernise application tracking and right context

Browse Source
This commit is contained in:
cesnimda
2026-11-03 10:04:00 +01:00
parent dc93b589c9
commit 98e9502af5
65 changed files with 1543 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/scripts/verify-a3-applications.mjs
+84
View File
@@ -0,0 +1,84 @@
// Actual exported React UI; all API responses and status writes are synthetic.
import { chromium } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
import assert from 'node:assert/strict';
import fs from 'node:fs';
import path from 'node:path';
const out = path.resolve(import.meta.dirname, '../../docs/ui-modernisation/evidence/applications/browser');
fs.mkdirSync(out, { recursive: true });
const report = { screens: [], journeys: [], errors: [], unexpectedWrites: [], mockedWrites: [], unavailableReads: [], blockedExternal: [] };
const browser = await chromium.launch();
try {
for (const width of [320, 390, 768, 1440]) for (const language of ['en', 'nb']) for (const mode of ['light', 'dark']) {
const context = await browser.newContext({ viewport: { width, height: 1000 }, reducedMotion: 'reduce' });
const page = await context.newPage(); page.on('pageerror', error => report.errors.push(error.message));
await page.addInitScript(({ language, mode }) => { localStorage.setItem('uiLanguage', language); localStorage.setItem('jobtracker.themeMode', mode); }, { language, mode });
const jobs = ['Community nurse', 'Primary teacher', 'Electrical engineer'].map((jobTitle, index) => ({ id: 42 + index, version: 7, jobTitle, company: { id: 1, name: 'Fjord Care' }, companyId: 1, status: 'Saved', location: 'Oslo', countryCode: 'NO', source: 'nav', salary: null, dateApplied: null, savedAt: '2026-10-01T09:00:00Z', deadline: '2026-11-12', followUpAt: null, tags: 'Care coordination', description: 'Recorded source advertisement.', isDeleted: false, needsFollowUp: false, workflowSignal: null }));
await page.route('**/*', route => {
const req = route.request(), url = new URL(req.url());
if (!['localhost', '127.0.0.1'].includes(url.hostname)) { report.blockedExternal.push(url.origin); return route.abort(); }
if (!url.pathname.startsWith('/api/')) return route.continue();
const answer = data => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(data) });
if (req.method() === 'PATCH' && url.pathname === '/api/jobapplications/42/status') {
const { status } = req.postDataJSON(); assert.equal(status, 'Waiting'); jobs[0].status = status;
report.mockedWrites.push({ width, language, mode, status }); return answer({});
}
if (req.method() !== 'GET') { report.unexpectedWrites.push(url.pathname); return route.abort(); }
const matching = jobs.filter(job => !url.searchParams.get('q') || job.jobTitle.toLowerCase().includes(url.searchParams.get('q').toLowerCase()));
const fixtures = {
'/api/auth/config': { requireAuth: true },
'/api/auth/me': { id: 'a3-applications-owner', sessionContext: 'a3-applications-session', firstName: 'Alex', displayName: 'Alex Sample', roles: [], uiLanguage: language === 'nb' ? 'nb-NO' : 'en' },
'/api/companies': [jobs[0].company],
'/api/jobapplications': { items: matching, total: matching.length, page: 1, pageSize: 15 },
'/api/jobapplications/board': matching,
'/api/jobapplications/reminders': [],
'/api/notifications/unread-count': { count: 0 },
'/api/jobapplications/42/workspace': { ...jobs[0], revision: 7, company: jobs[0].company.name, stageGroup: 'Applied', stageOrder: 1, jobUrl: null, translatedDescription: null, descriptionLanguage: 'en', tags: ['Care coordination'], notes: 'Ask about shift patterns.', applicationAnswerDraft: '', recruiterMessageDraft: '', hasJobDescription: true, cv: { variantId: null, variantName: null, themeId: null, hasTailoredCvText: false, updatedAtUtc: null }, hasCoverLetter: false, documentCount: 0, hasPortfolio: false, aiInteractionCount: 0, lastAiAtUtc: null, recentActivity: [], nextStep: null, checklistProgress: { total: 0, completed: 0, dismissed: 0, percent: 0 } },
'/api/jobapplications/42/status-suggestion': null,
};
if (Object.hasOwn(fixtures, url.pathname)) return answer(fixtures[url.pathname]);
report.unavailableReads.push(url.pathname);
return route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
});
const scan = async state => {
assert.equal(await page.evaluate(() => document.documentElement.scrollWidth > innerWidth + 1), false);
const result = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa']).analyze();
report.screens.push({ width, language, mode, state, violations: result.violations }); assert.deepEqual(result.violations, []);
await page.evaluate(() => window.scrollTo(0, 0));
await page.screenshot({ path: path.join(out, `${state}-${language}-${mode}-${width}.png`), fullPage: true });
};
await page.goto('http://localhost:4338/jobs');
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');
await search.fill('nurse'); await page.waitForURL(/q=nurse/);
await page.getByRole('link', { name: language === 'en' ? 'Board' : 'Tavle', exact: true }).click();
const card = page.locator('[data-kanban-card-id="42"]'); await card.waitFor();
await page.getByRole('button', { name: `${language === 'en' ? 'Quick status' : 'Hurtigstatus'}: Community nurse`, exact: true }).click();
await page.getByRole('menuitem', { name: language === 'en' ? 'Set Waiting' : 'Sett Venter', exact: true }).click();
await page.waitForFunction(() => document.querySelector('[data-kanban-card-id="42"]')?.innerText.includes(document.documentElement.lang === 'nb-NO' ? 'Venter' : 'Waiting'));
await scan('board');
await card.locator('[role="button"]').press('Enter'); await page.waitForURL(/\/jobs\/42/);
const contextName = language === 'en' ? 'Application context' : 'Søknadskontekst';
const aside = page.getByRole('complementary', { name: contextName }); await aside.waitFor();
await page.getByRole('button', { name: language === 'en' ? 'Jump to application context' : 'Gå til søknadskontekst', exact: true }).click();
assert.equal(await aside.getByRole('heading', { name: contextName }).evaluate(node => node === document.activeElement), true);
await aside.getByRole('button', { name: language === 'en' ? 'Return to current task' : 'Tilbake til gjeldende oppgave', exact: true }).click();
assert.equal(await page.getByRole('tabpanel').evaluate(node => node === document.activeElement), true);
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');
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();
report.journeys.push({ width, language, mode, searchBoardPreciseStatusDetailContextReturn: 'PASS' });
await context.close();
}
assert.equal(report.screens.length, 48); assert.equal(report.journeys.length, 16); assert.equal(report.mockedWrites.length, 16);
assert.deepEqual(report.errors, []); assert.deepEqual(report.unexpectedWrites, []);
assert.ok(report.blockedExternal.every(origin => origin === 'https://fonts.googleapis.com'));
console.log('PASS: 16 controlled table/board/detail journeys,48 axe scans/captures;16 mocked status writes.');
} finally {
fs.writeFileSync(path.join(out, 'BROWSER.json'), JSON.stringify({ ...report, limits: ['controlled fixtures, not real backend integration', 'secondary service reads may return honest unavailable states', 'no native device, provider, model, security or release qualification'] }, null, 2));
await browser.close();
}