cesnimda
181 lines
18 KiB
TypeScript
181 lines
18 KiB
TypeScript
import { expect, test, type APIRequestContext, type Browser, type Page, type TestInfo } from '@playwright/test';
|
|
import AxeBuilder from '@axe-core/playwright';
|
|
import fs from 'node:fs/promises';
|
|
import path from 'node:path';
|
|
import { translations } from '../src/i18n/translations';
|
|
|
|
const apiUrl = 'http://localhost:5302/api';
|
|
const password = 'E2ePassword123!';
|
|
const output = path.resolve(process.env.CV_SETTINGS_FIDELITY_OUTPUT || '../.artifacts/p5-12/settings-fidelity');
|
|
async function login(api: APIRequestContext, email: string) {
|
|
expect((await api.post(`${apiUrl}/auth/login`, { data: { email, password } })).status()).toBe(200);
|
|
const me = await (await api.get(`${apiUrl}/auth/me`)).json();
|
|
return { 'X-CSRF-TOKEN': (await api.storageState()).cookies.find(cookie => cookie.name === 'XSRF-TOKEN')!.value, 'X-Session-Context': me.sessionContext as string };
|
|
}
|
|
async function capture(page: Page, info: TestInfo, name: string) {
|
|
await page.evaluate(() => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))));
|
|
await page.screenshot({ path: info.outputPath(`${name}.png`), animations: 'disabled' });
|
|
await info.attach(name, { path: info.outputPath(`${name}.png`), contentType: 'image/png' });
|
|
}
|
|
async function scan(page: Page, info: TestInfo, name: string) {
|
|
const result = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']).analyze();
|
|
await info.attach(`${name}-axe`, { body: JSON.stringify({ violations: result.violations, incomplete: result.incomplete }), contentType: 'application/json' });
|
|
expect(result.violations).toEqual([]);
|
|
}
|
|
async function choose(page: Page, label: string, option: string) {
|
|
const control = page.getByRole('combobox', { name: label, exact: true });
|
|
await control.focus(); await page.keyboard.press('Space');
|
|
await page.getByRole('option', { name: option, exact: true }).focus();
|
|
await page.keyboard.press('Enter');
|
|
await expect(page.getByRole('listbox')).toHaveCount(0);
|
|
await expect(control).toBeFocused();
|
|
}
|
|
|
|
async function measure(page: Page, browser: Browser, info: TestInfo, cvUrl: string, language: 'en' | 'nb', fixture: string) {
|
|
const t = translations[language];
|
|
const iframe = page.getByTitle(t.cvEditorPreviewTitle, { exact: true });
|
|
await expect(page.getByRole('region', { name: t.cvEditorLivePreview, exact: true })).toHaveAttribute('aria-busy', 'false');
|
|
await expect.poll(() => iframe.evaluate(element => (element as HTMLIFrameElement).contentDocument?.documentElement.dataset.cvPreviewReady)).toBe('true');
|
|
const measured = await iframe.evaluate(async element => {
|
|
const frame = element as HTMLIFrameElement; const doc = frame.contentDocument!; const win = frame.contentWindow!;
|
|
await doc.fonts.ready;
|
|
await new Promise<void>(resolve => win.requestAnimationFrame(() => win.requestAnimationFrame(() => resolve())));
|
|
const width = Number(doc.documentElement.dataset.cvPreviewWidth); const height = Number(doc.documentElement.dataset.cvPreviewHeight);
|
|
const tokens = []; const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT); let node;
|
|
while ((node = walker.nextNode())) {
|
|
if (['SCRIPT', 'STYLE'].includes(node.parentElement?.tagName || '')) continue;
|
|
for (const match of (node.textContent || '').matchAll(/\b[SEBPR]\d{2}\b/g)) {
|
|
const range = doc.createRange(); range.setStart(node, match.index!); range.setEnd(node, match.index! + match[0].length);
|
|
const rect = range.getClientRects()[0]; const style = win.getComputedStyle(node.parentElement!); const index = Math.floor(rect.x / width);
|
|
tokens.push({ token: match[0], x: rect.x - index * width, y: rect.y + index * height, page: index + 1, fontSize: style.fontSize, fontFamily: style.fontFamily, color: style.color });
|
|
}
|
|
}
|
|
return { width, height, contentHeight: height * Number(doc.documentElement.dataset.cvPreviewPages), effectiveMargin: win.getComputedStyle(doc.documentElement).getPropertyValue('--cv-page-margin'), layoutDurationMs: Number(doc.documentElement.dataset.cvPreviewDurationMs), text: doc.body.innerText, tokens };
|
|
});
|
|
const variant = await (await page.request.get(cvUrl)).json();
|
|
const directory = path.join(output, fixture); await fs.mkdir(directory, { recursive: true });
|
|
const response = page.waitForResponse(r => r.url() === `${cvUrl}/export-pdf` && r.request().method() === 'POST');
|
|
const downloading = page.waitForEvent('download');
|
|
await page.getByRole('button', { name: t.cvEditorDownloadPdf, exact: true }).click();
|
|
const pdf = await response; expect(pdf.status()).toBe(200); expect((await downloading).suggestedFilename()).toMatch(/\.pdf$/i);
|
|
await fs.writeFile(path.join(directory, 'export.pdf'), await pdf.body());
|
|
const rendered = await (await page.request.get(`${cvUrl}/preview`)).json();
|
|
await fs.writeFile(path.join(directory, 'render.html'), rendered.html);
|
|
const pages = await page.locator('[data-cv-page]').count();
|
|
expect(measured.contentHeight / measured.height).toBe(pages);
|
|
expect(measured.text).not.toContain('HIDDEN-MARKER');
|
|
for (let index = 1; index <= pages; index++) {
|
|
const html = await page.getByTitle(t.cvEditorPreviewPage.replace('{page}', String(index)), { exact: true }).getAttribute('srcdoc');
|
|
const capturePage = await browser.newPage({ viewport: { width: Math.ceil(measured.width), height: Math.ceil(measured.height) } });
|
|
try {
|
|
await capturePage.setContent(html!);
|
|
await expect.poll(() => capturePage.evaluate(() => document.documentElement.dataset.cvPreviewReady)).toBe('true');
|
|
await capturePage.screenshot({ path: path.join(directory, `preview-${index}.png`) });
|
|
} finally { await capturePage.close(); }
|
|
}
|
|
await info.attach(fixture, { body: JSON.stringify({ fixture, previewPages: pages, settings: variant.settings, measured }), contentType: 'application/json' });
|
|
return { fixture, previewPages: pages, settings: variant.settings, measured };
|
|
}
|
|
|
|
for (const [mode, language, premium] of [['light', 'en', false], ['dark', 'nb', true], ['light', 'nb', false], ['dark', 'en', true]] as const) {
|
|
test(`[PRES-C06 C08 C09 C10 C12 E08 E09] ${mode}/${language} document controls preserve settings, source, history and native output`, async ({ page, context, playwright, browser }, info) => {
|
|
test.setTimeout(240_000);
|
|
const t = translations[language];
|
|
const admin = await playwright.request.newContext(); const adminHeaders = await login(admin, 'e2e@example.test');
|
|
const email = `p512-${Date.now()}-${mode}-${language}@example.test`;
|
|
expect((await admin.post(`${apiUrl}/users`, { headers: adminHeaders, data: { email, password, roles: premium ? ['Premium'] : [] } })).status()).toBe(200);
|
|
await admin.dispose(); const headers = await login(page.request, email);
|
|
await context.route('**/*', route => { const url = new URL(route.request().url()); return ['localhost', '127.0.0.1'].includes(url.hostname) || ['data:', 'blob:', 'about:'].includes(url.protocol) ? route.continue() : route.abort(); });
|
|
await context.addInitScript(({ mode, language }) => { localStorage.setItem('jobtracker.themeMode', mode); localStorage.setItem('uiLanguage', language); }, { mode, language });
|
|
expect((await page.request.put(`${apiUrl}/auth/preferences/language`, { headers, data: { language: language === 'nb' ? 'nb-NO' : 'en' } })).status()).toBe(204);
|
|
const sentence = language === 'nb' ? 'Dokumenterte pålitelige arbeidsflyter og tilgjengelig navigasjon for norske arbeidssøkere. ' : 'Documented reliable workflows and accessible navigation for people managing their careers. ';
|
|
const profile = { version: '1', contact: { fullName: 'Åse Fixture', headline: 'Verified career information', location: 'Oslo, Norge' }, summary: ['R01 Verified source content — æøå.'],
|
|
jobs: Array.from({ length: 5 }, (_, index) => ({ id: `job-${index}`, title: `E${String(index + 1).padStart(2, '0')} Plattformutvikler og dokumenterte integrasjoner`, company: 'Nordlys Fixture AS', startDate: '2020-01', endDate: '2025-01', bullets: Array.from({ length: 3 }, (_, bullet) => `B${String(index * 3 + bullet + 1).padStart(2, '0')} ${sentence.repeat(5)}`) })),
|
|
education: [{ id: 'edu-1', qualification: 'E08 Computer science', institution: 'Fixture University', startDate: '2016-08', endDate: '2020-06' }], skills: ['React', 'C#', 'Norsk'], interests: ['HIDDEN-MARKER Not included'] };
|
|
expect((await page.request.put(`${apiUrl}/career/profile`, { headers, data: { profile } })).status()).toBe(200);
|
|
const source = await (await page.request.get(`${apiUrl}/career/profile`)).json();
|
|
const created = await page.request.post(`${apiUrl}/cv/variants`, { headers, data: { name: 'Dokumenterte kvalifikasjoner — innstillinger for denne CV-en', settings: {
|
|
themeId: 'minimal', pageMarginMm: 16, baseFontSizePt: 10, bodyFont: 'Arial, Helvetica, sans-serif', accentColor: '#126b55', language: language === 'nb' ? 'nb-NO' : 'en',
|
|
sections: [{ key: 'summary' }, { key: 'experience' }, { key: 'education' }, { key: 'skills' }, { key: 'interests', hidden: true }], overrides: {}, customSections: [],
|
|
} } }); expect(created.status()).toBe(200); const cv = await created.json(); const cvUrl = `${apiUrl}/cv/variants/${cv.id}`;
|
|
const sibling = await (await page.request.post(`${apiUrl}/cv/variants`, { headers, data: { name: 'Untouched sibling', settings: cv.settings } })).json();
|
|
const read = async () => (await page.request.get(cvUrl)).json();
|
|
const saved = async () => { await expect(page.getByText(t.cvEditorSaved, { exact: true })).toBeVisible(); };
|
|
await page.setViewportSize({ width: 1440, height: 900 }); await page.goto(`/career/builder/${cv.id}`);
|
|
await expect(page.getByLabel(t.cvEditorName, { exact: true })).toHaveValue(cv.name);
|
|
const before = await measure(page, browser, info, cvUrl, language, `${mode}-${language}-before`);
|
|
await page.getByRole('tab', { name: t.cvEditorCustomize, exact: true }).click();
|
|
const advanced = page.getByRole('button', { name: t.cvEditorAdvancedSettings, exact: true });
|
|
await expect(advanced).toHaveAttribute('aria-expanded', 'false');
|
|
await expect(page.getByRole('region', { name: t.cvEditorStyle, exact: true })).toBeVisible();
|
|
await expect(page.getByRole('combobox', { name: t.cvEditorHeadingFont, exact: true })).toHaveText(t.cvEditorTemplateDefault);
|
|
await capture(page, info, 'default-controls'); await scan(page, info, 'default-controls');
|
|
await advanced.focus(); await page.keyboard.press('Enter'); await expect(advanced).toHaveAttribute('aria-expanded', 'true');
|
|
expect((await read()).version).toBe(cv.version);
|
|
const margin = page.getByRole('spinbutton', { name: t.cvEditorPageMargins, exact: true });
|
|
await margin.fill('29'); await expect(margin).toHaveAttribute('aria-invalid', 'true'); expect((await read()).settings.pageMarginMm).toBe(16);
|
|
await capture(page, info, 'invalid-margin'); await margin.fill('22'); await saved(); await expect.poll(async () => (await read()).settings.pageMarginMm).toBe(22);
|
|
await choose(page, t.cvEditorPageSize, t.cvEditorUsLetter);
|
|
await choose(page, t.cvEditorBodyFont, 'Georgia (serif)');
|
|
await page.getByRole('spinbutton', { name: t.cvEditorBodySize, exact: true }).fill('11');
|
|
await page.getByRole('spinbutton', { name: t.cvEditorSectionSpacing, exact: true }).fill('8');
|
|
await page.getByRole('spinbutton', { name: t.cvEditorEntrySpacing, exact: true }).fill('5');
|
|
await page.getByRole('spinbutton', { name: t.cvEditorLineHeight, exact: true }).fill('1.5');
|
|
const colour = page.getByLabel(t.cvEditorCustomAccent, { exact: true }); await colour.fill('#9f1239'); await colour.focus(); await page.keyboard.press('Tab');
|
|
await choose(page, t.cvEditorDateFormat, '2020'); await saved();
|
|
await expect.poll(async () => (await read()).settings).toMatchObject({ pageSize: 'letter', pageMarginMm: 22, bodyFont: "Georgia, 'Times New Roman', serif", baseFontSizePt: 11, sectionGapMm: 8, entryGapMm: 5, lineHeight: 1.5, accentColor: '#9f1239', dateFormat: 'year' });
|
|
const after = await measure(page, browser, info, cvUrl, language, `${mode}-${language}-after`);
|
|
expect(before.measured.width * 25.4 / 96).toBeCloseTo(210, 2); expect(after.measured.width * 25.4 / 96).toBeCloseTo(215.9, 2);
|
|
expect(after.measured.height * 25.4 / 96).toBeCloseTo(279.4, 2); expect(after.measured.effectiveMargin.trim()).toBe('22mm');
|
|
expect(after.previewPages).toBeGreaterThan(1); expect(after.measured.tokens.find(token => token.token === 'R01')!.fontFamily).toContain('Georgia');
|
|
expect(after.measured.tokens.find(token => token.token === 'R01')!.fontSize).not.toBe(before.measured.tokens.find(token => token.token === 'R01')!.fontSize);
|
|
await fs.mkdir(output, { recursive: true });
|
|
await fs.writeFile(path.join(output, `${mode}-${language}-measurements.json`), JSON.stringify({ browserVersion: browser.version(), fixtures: [before, after] }, null, 2));
|
|
const changed = await read(); await page.reload(); await page.getByRole('tab', { name: t.cvEditorCustomize, exact: true }).click();
|
|
await expect(margin).toHaveValue('22');
|
|
// Reload starts the asynchronous preview layout again. Use its existing settled
|
|
// state before pointer activation, so layout movement cannot select another field.
|
|
await expect(page.getByRole('region', { name: t.cvEditorLivePreview, exact: true })).toHaveAttribute('aria-busy', 'false');
|
|
await expect.poll(() => page.getByTitle(t.cvEditorPreviewTitle, { exact: true }).evaluate(element =>
|
|
(element as HTMLIFrameElement).contentDocument?.documentElement.dataset.cvPreviewReady)).toBe('true');
|
|
await page.getByRole('button', { name: t.cvEditorUseTemplateSetting.replace('{setting}', t.cvEditorPageMargins), exact: true }).click(); await saved();
|
|
await expect.poll(async () => (await read()).settings.pageMarginMm).toBeNull(); await page.getByRole('button', { name: t.cvEditorUndo, exact: true }).click(); await saved(); await expect(margin).toHaveValue('22');
|
|
await expect.poll(async () => (await read()).settings.pageMarginMm).toBe(22);
|
|
await advanced.click();
|
|
for (const width of [1440, 768, 320]) {
|
|
await page.setViewportSize({ width, height: 900 }); await margin.focus(); await expect(margin).toBeFocused();
|
|
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1)).toBe(true);
|
|
await capture(page, info, `controls-${width}`);
|
|
await advanced.scrollIntoViewIfNeeded(); await expect(advanced).toBeVisible(); await capture(page, info, `advanced-${width}`);
|
|
}
|
|
await scan(page, info, 'phone-advanced');
|
|
await page.setViewportSize({ width: 1440, height: 900 }); await page.getByRole('tab', { name: t.cvEditorTemplate, exact: true }).click();
|
|
await page.getByRole('button', { name: t.cvEditorAllTemplates, exact: true }).click();
|
|
const technical = page.getByRole('button', { name: 'Technical', exact: true }); await expect(technical).toHaveAttribute('aria-disabled', premium ? 'false' : 'true');
|
|
await expect(technical).toHaveAccessibleDescription(new RegExp(premium ? t.cvEditorProUnlocked : t.cvEditorPro));
|
|
if (!premium) { await technical.click({ force: true }); await technical.focus(); await page.keyboard.press('Enter'); expect((await read()).settings.themeId).toBe('minimal'); await expect(page.getByRole('dialog')).toHaveCount(0); }
|
|
await capture(page, info, 'templates'); await scan(page, info, 'templates');
|
|
const target = premium ? technical : page.getByRole('button', { name: 'Code', exact: true });
|
|
await target.focus(); await page.keyboard.press('Enter');
|
|
const dialog = page.getByRole('dialog', { name: t.cvEditorChangeTemplateTitle }); await expect(dialog).toBeVisible(); await capture(page, info, 'reset-confirmation');
|
|
await page.keyboard.press('Escape'); await expect(target).toBeFocused(); expect((await read()).settings.themeId).toBe('minimal');
|
|
await page.keyboard.press('Space'); await dialog.getByRole('button', { name: t.cvEditorApplyTemplate, exact: true }).click(); await saved();
|
|
await expect.poll(async () => (await read()).settings.themeId).toBe(premium ? 'technical' : 'code');
|
|
const selected = await read(); expect(selected.settings.themeId).toBe(premium ? 'technical' : 'code');
|
|
for (const key of ['accentColor', 'bodyFont', 'baseFontSizePt', 'pageMarginMm', 'entryGapMm', 'sectionGapMm', 'lineHeight']) expect(selected.settings[key]).toBeNull();
|
|
expect(selected.settings.sections).toEqual(changed.settings.sections); expect(selected.settings.pageSize).toBe('letter');
|
|
await page.getByRole('tab', { name: t.cvEditorCustomize, exact: true }).click(); await advanced.click();
|
|
if (premium) { await expect(page.getByRole('spinbutton', { name: t.cvEditorSidebarWidth, exact: true })).toBeVisible(); await page.getByRole('spinbutton', { name: t.cvEditorSidebarWidth, exact: true }).fill('68'); await saved(); await expect.poll(async () => (await read()).settings.sidebarWidthMm).toBe(68); }
|
|
await capture(page, info, 'selected-template-defaults');
|
|
expect(await (await page.request.get(`${apiUrl}/career/profile`)).json()).toEqual(source);
|
|
expect(await (await page.request.get(`${apiUrl}/cv/variants/${sibling.id}`)).json()).toEqual(sibling);
|
|
const beforeRestore = await read();
|
|
await page.getByRole('tab', { name: t.cvEditorHistory, exact: true }).click();
|
|
await page.getByRole('tabpanel', { name: t.cvEditorHistory, exact: true }).getByRole('button', { name: t.cvEditorRestoreTitle.replace('{version}', '1'), exact: true }).click();
|
|
await page.getByRole('dialog').getByRole('button', { name: t.cvEditorRestoreVersion, exact: true }).click(); await saved();
|
|
await expect.poll(async () => (await read()).version).toBe(beforeRestore.version + 1);
|
|
expect((await read()).settings).toEqual(cv.settings);
|
|
expect(await (await page.request.get(`${apiUrl}/career/profile`)).json()).toEqual(source);
|
|
});
|
|
}
|