cesnimda
337 lines
20 KiB
TypeScript
337 lines
20 KiB
TypeScript
import AxeBuilder from '@axe-core/playwright';
|
|
import {
|
|
expect, test as base, type APIRequestContext, type BrowserContext,
|
|
type Page, type Request, type TestInfo,
|
|
} from '@playwright/test';
|
|
import { translations } from '../src/i18n/translations';
|
|
|
|
const apiUrl = 'http://localhost:5302/api';
|
|
const password = 'E2ePassword123!';
|
|
type Language = 'en' | 'nb';
|
|
type Theme = 'light' | 'dark';
|
|
type Sample = { language: Language; theme: Theme; width: number; height: number };
|
|
type Owner = { email: string; id: string; headers: Record<string, string> };
|
|
type Session = {
|
|
id: string; deviceLabel: string | null; lastSeenAtUtc: string;
|
|
expiresAtUtc: string; isCurrentSession: boolean;
|
|
};
|
|
|
|
async function login(api: APIRequestContext, email: string) {
|
|
expect((await api.post(`${apiUrl}/auth/login`, { data: { email, password } })).status()).toBe(200);
|
|
const response = await api.get(`${apiUrl}/auth/me`);
|
|
expect(response.status()).toBe(200);
|
|
const me = await response.json();
|
|
const csrf = (await api.storageState()).cookies.find(cookie => cookie.name === 'XSRF-TOKEN');
|
|
expect(csrf).toBeDefined();
|
|
expect(me.sessionContext).toEqual(expect.any(String));
|
|
return { id: me.id as string, headers: {
|
|
'X-CSRF-TOKEN': csrf!.value, 'X-Session-Context': me.sessionContext as string,
|
|
} };
|
|
}
|
|
|
|
async function localOnly(context: BrowserContext) {
|
|
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();
|
|
});
|
|
}
|
|
|
|
// Normal public login and administrator user creation in the runner's disposable local API.
|
|
// No alternative authentication endpoint, role elevation or provider request is introduced.
|
|
const test = base.extend<{ owner: Owner }>({
|
|
owner: async ({ page, context, playwright }, provide) => {
|
|
const admin = await playwright.request.newContext();
|
|
try {
|
|
const adminIdentity = await login(admin, 'e2e@example.test');
|
|
const email = `p7-account-${Date.now()}-${Math.random().toString(36).slice(2)}@example.test`;
|
|
expect((await admin.post(`${apiUrl}/users`, {
|
|
headers: adminIdentity.headers, data: { email, password, roles: [] },
|
|
})).status()).toBe(200);
|
|
const identity = await login(page.request, email);
|
|
await localOnly(context);
|
|
await context.addInitScript(() => {
|
|
if (!localStorage.getItem('uiLanguage')) localStorage.setItem('uiLanguage', 'en');
|
|
if (!localStorage.getItem('jobtracker.themeMode')) localStorage.setItem('jobtracker.themeMode', 'light');
|
|
});
|
|
await provide({ ...identity, email });
|
|
} finally {
|
|
await admin.dispose();
|
|
}
|
|
},
|
|
});
|
|
|
|
async function read<T>(api: APIRequestContext, path: string): Promise<T> {
|
|
const response = await api.get(`${apiUrl}${path}`);
|
|
expect(response.status()).toBe(200);
|
|
return response.json() as Promise<T>;
|
|
}
|
|
|
|
async function enterProfile(page: Page, owner: Owner, sample: Sample) {
|
|
expect((await page.request.put(`${apiUrl}/auth/preferences/language`, {
|
|
headers: owner.headers, data: { language: sample.language === 'nb' ? 'nb-NO' : 'en' },
|
|
})).status()).toBe(204);
|
|
await page.setViewportSize({ width: sample.width, height: sample.height });
|
|
await page.goto('/dashboard');
|
|
await expect(page.getByRole('main')).toBeVisible();
|
|
await page.evaluate(({ language, theme }) => {
|
|
localStorage.setItem('uiLanguage', language);
|
|
localStorage.setItem('jobtracker.themeMode', theme);
|
|
}, sample);
|
|
await page.emulateMedia({ reducedMotion: 'reduce' });
|
|
await page.goto('/profile');
|
|
await expect(page.locator('html')).toHaveAttribute('lang', sample.language === 'nb' ? 'nb-NO' : 'en');
|
|
await expect(page.locator('html')).toHaveAttribute('data-color-scheme', sample.theme);
|
|
await expect(page.getByLabel(translations[sample.language].profileDisplayName, { exact: true })).toBeEnabled();
|
|
}
|
|
|
|
function observeWrites(page: Page) {
|
|
const writes: Array<{ method: string; path: string }> = [];
|
|
const listener = (request: Request) => {
|
|
const url = new URL(request.url());
|
|
if (url.pathname.startsWith('/api/') && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(request.method())) {
|
|
writes.push({ method: request.method(), path: url.pathname });
|
|
}
|
|
};
|
|
page.on('request', listener);
|
|
return { writes, stop: () => page.off('request', listener) };
|
|
}
|
|
|
|
async function collect(page: Page, info: TestInfo, sample: Sample, state: string) {
|
|
await page.evaluate(async () => {
|
|
await document.fonts.ready;
|
|
await new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
|
|
});
|
|
const geometry = await page.evaluate(() => ({
|
|
rootOverflow: Math.max(0, document.documentElement.scrollWidth - document.documentElement.clientWidth),
|
|
width: innerWidth, height: innerHeight,
|
|
focus: document.activeElement?.getAttribute('aria-label') || document.activeElement?.tagName,
|
|
regions: Array.from(document.querySelectorAll('main section[aria-labelledby]')).map(element => {
|
|
const bounds = element.getBoundingClientRect();
|
|
const title = document.getElementById(element.getAttribute('aria-labelledby') || '');
|
|
return { name: title?.textContent, left: bounds.left, right: bounds.right, width: bounds.width };
|
|
}),
|
|
}));
|
|
const axe = await new AxeBuilder({ page }).options({ rules: { 'target-size': { enabled: true } } }).analyze();
|
|
const name = `p7-account-${sample.language}-${sample.theme}-${sample.width}-${state}`;
|
|
await info.attach(`${name}-audit`, { body: JSON.stringify({
|
|
state, sample, url: page.url(), geometry,
|
|
ariaSnapshot: await page.locator('body').ariaSnapshot(),
|
|
axe: { scope: 'All enabled rules, including explicit target-size; violations/incomplete require contextual triage',
|
|
violations: axe.violations, incomplete: axe.incomplete,
|
|
passes: axe.passes.map(rule => ({ id: rule.id, nodes: rule.nodes.length })) },
|
|
limits: ['No human screen reader', 'No physical touch/software keyboard', 'No real provider or production qualification'],
|
|
}), contentType: 'application/json' });
|
|
await info.attach(name, { body: await page.screenshot({ fullPage: true, animations: 'disabled' }), contentType: 'image/png' });
|
|
expect(geometry.rootOverflow, 'ordinary account chrome reflows without document-root horizontal scrolling').toBe(0);
|
|
}
|
|
|
|
const matrix: Sample[] = [
|
|
{ language: 'nb', theme: 'dark', width: 320, height: 844 },
|
|
{ language: 'en', theme: 'light', width: 390, height: 844 },
|
|
{ language: 'nb', theme: 'light', width: 768, height: 1024 },
|
|
{ language: 'en', theme: 'dark', width: 1440, height: 900 },
|
|
];
|
|
|
|
for (const sample of matrix) {
|
|
test(`[P7-01 PRES-E06 E08 E09 C01 C07] ${sample.language}/${sample.theme} ${sample.width}px account identity save reload preserves canonical and sibling CVs`, async ({ page, owner }, info) => {
|
|
test.setTimeout(120_000);
|
|
const t = translations[sample.language];
|
|
const canonical = {
|
|
version: '1', contact: { fullName: 'Åse Canonical', headline: 'Canonical career headline', location: 'Oslo' },
|
|
jobs: [{ title: 'Recorded engineer', company: 'Source-only employer', bullets: ['Recorded work, never an account field'] }],
|
|
skills: ['C#', 'Norsk'],
|
|
};
|
|
expect((await page.request.put(`${apiUrl}/career/profile`, { headers: owner.headers, data: { profile: canonical } })).status()).toBe(200);
|
|
const cvIds: number[] = [];
|
|
for (const name of ['First protected CV', 'Sibling protected CV']) {
|
|
const created = await page.request.post(`${apiUrl}/cv/variants`, { headers: owner.headers,
|
|
data: { name, settings: { themeId: 'minimal', language: 'en', headline: `${name} override` } } });
|
|
expect(created.status()).toBe(200);
|
|
cvIds.push((await created.json()).id);
|
|
}
|
|
const beforeProfile = await read<{ profile: unknown }>(page.request, '/career/profile');
|
|
const beforeVariants = await Promise.all(cvIds.map(id => read(page.request, `/cv/variants/${id}`)));
|
|
const beforeMe = await read<{ userName: string }>(page.request, '/auth/me');
|
|
await enterProfile(page, owner, sample);
|
|
await expect(page.getByRole('heading', { level: 1 })).toHaveCount(1);
|
|
await expect(page.getByText(t.profileCvTextMissing, { exact: true })).toBeVisible();
|
|
await expect(page.getByText(t.profileCvMissing, { exact: true })).toHaveCount(0);
|
|
await expect(page.getByText(/NEXT_PUBLIC_/)).toHaveCount(0);
|
|
for (const title of [t.authStatusTitle, t.twoFactorSectionTitle, t.sessionsSectionTitle]) {
|
|
await expect(page.getByRole('region', { name: title, exact: true })).toBeVisible();
|
|
}
|
|
const status = page.getByRole('region', { name: t.twoFactorSectionTitle, exact: true });
|
|
await expect(status.getByText(t.twoFactorStatusDisabled, { exact: true })).toBeVisible();
|
|
const changed = {
|
|
userName: beforeMe.userName, firstName: 'Åse', lastName: 'Account identity',
|
|
displayName: 'Åse — documented account identity with a deliberately long personal display name',
|
|
};
|
|
await page.getByLabel(t.profileDisplayName, { exact: true }).fill(changed.displayName);
|
|
await page.getByLabel(t.profileFirstName, { exact: true }).fill(changed.firstName);
|
|
await page.getByLabel(t.profileLastName, { exact: true }).fill(changed.lastName);
|
|
const writes = observeWrites(page);
|
|
const saved = page.waitForResponse(response => new URL(response.url()).pathname === '/api/auth/profile' && response.request().method() === 'PUT');
|
|
const save = page.getByRole('button', { name: t.profileSaveChanges, exact: true });
|
|
await save.focus();
|
|
await save.press('Enter');
|
|
const response = await saved;
|
|
expect(response.status()).toBe(204);
|
|
expect(response.request().postDataJSON()).toEqual(changed);
|
|
await expect(page.getByLabel(t.profileDisplayName, { exact: true })).toHaveValue(changed.displayName);
|
|
await expect(save).toBeEnabled();
|
|
expect(await read(page.request, '/auth/me')).toMatchObject(changed);
|
|
await page.reload();
|
|
await expect(page.getByLabel(t.profileDisplayName, { exact: true })).toHaveValue(changed.displayName);
|
|
await expect(page.getByLabel(t.profileFirstName, { exact: true })).toHaveValue(changed.firstName);
|
|
await expect(page.getByLabel(t.profileLastName, { exact: true })).toHaveValue(changed.lastName);
|
|
expect((await read<{ profile: unknown }>(page.request, '/career/profile')).profile).toEqual(beforeProfile.profile);
|
|
expect(await Promise.all(cvIds.map(id => read(page.request, `/cv/variants/${id}`)))).toEqual(beforeVariants);
|
|
expect(writes.writes.filter(write => write.path.startsWith('/api/career/') || write.path.startsWith('/api/cv/'))).toEqual([]);
|
|
expect(writes.writes.filter(write => write.path === '/api/auth/profile')).toEqual([{ method: 'PUT', path: '/api/auth/profile' }]);
|
|
writes.stop();
|
|
await info.attach('identity-only-readback', { body: JSON.stringify({
|
|
submittedFieldNames: Object.keys(changed), identityReadback: true, reloadReadback: true,
|
|
canonicalUnchanged: true, bothCvVariantsUnchanged: true, browserCanonicalOrCvWrites: 0,
|
|
}), contentType: 'application/json' });
|
|
await collect(page, info, sample, 'identity-persisted');
|
|
});
|
|
}
|
|
|
|
test('[P7-01 PRES-E04 E08] failed 2FA status is read-only and deliberate retry restores the actual disabled state', async ({ page, owner }, info) => {
|
|
test.setTimeout(90_000);
|
|
const sample: Sample = { language: 'nb', theme: 'dark', width: 320, height: 844 };
|
|
const t = translations[sample.language];
|
|
let failedReads = 0;
|
|
const fail = async (route: import('@playwright/test').Route) => {
|
|
expect(route.request().method()).toBe('GET');
|
|
failedReads += 1;
|
|
return route.fulfill({ status: 500, contentType: 'application/json', body: '{}' });
|
|
};
|
|
await page.route('**/api/auth/2fa/status', fail);
|
|
const writes = observeWrites(page);
|
|
await enterProfile(page, owner, sample);
|
|
const region = page.getByRole('region', { name: t.twoFactorSectionTitle, exact: true });
|
|
const alert = region.getByRole('alert');
|
|
await expect(alert).toBeVisible();
|
|
expect(failedReads).toBeGreaterThanOrEqual(1);
|
|
await expect(region.getByText(t.twoFactorStatusDisabled, { exact: true })).toHaveCount(0);
|
|
// Hidden or disabled setup controls are both honest unknown-state presentations.
|
|
expect(await region.getByRole('button', { name: t.twoFactorEnableButton, exact: true }).evaluateAll(buttons =>
|
|
buttons.every(button => button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true'))).toBe(true);
|
|
expect(writes.writes.filter(write => write.path.startsWith('/api/auth/2fa/'))).toEqual([]);
|
|
await collect(page, info, sample, 'status-failed-read-only');
|
|
await page.unroute('**/api/auth/2fa/status', fail);
|
|
const loaded = page.waitForResponse(response => new URL(response.url()).pathname === '/api/auth/2fa/status' && response.request().method() === 'GET');
|
|
await alert.getByRole('button', { name: t.retry, exact: true }).press('Enter');
|
|
expect((await loaded).status()).toBe(200);
|
|
await expect(region.getByText(t.twoFactorStatusDisabled, { exact: true })).toBeVisible();
|
|
await expect(region.getByRole('button', { name: t.twoFactorEnableButton, exact: true })).toBeEnabled();
|
|
expect(await read(page.request, '/auth/2fa/status')).toMatchObject({ enabled: false });
|
|
expect(writes.writes.filter(write => write.path.startsWith('/api/auth/2fa/'))).toEqual([]);
|
|
writes.stop();
|
|
await collect(page, info, sample, 'status-read-recovered');
|
|
});
|
|
|
|
test('[P7-01 PRES-E05 E08 E09] native sessions cancel no-write, failed confirmed revoke stays in the dialog, retry revokes others and current logout disposes account', async ({ page, owner, playwright }, info) => {
|
|
test.setTimeout(120_000);
|
|
const sample: Sample = { language: 'en', theme: 'light', width: 390, height: 844 };
|
|
const t = translations[sample.language];
|
|
const other = await playwright.request.newContext({ userAgent:
|
|
'P7 synthetic remote browser - a deliberately long workstation device description for responsive account metadata and named actions' });
|
|
try {
|
|
await login(other, owner.email);
|
|
const before = await read<Session[]>(page.request, '/auth/sessions');
|
|
expect(before).toHaveLength(2);
|
|
const current = before.find(session => session.isCurrentSession)!;
|
|
const remote = before.find(session => !session.isCurrentSession)!;
|
|
expect(current).toBeDefined();
|
|
expect(remote.deviceLabel).toContain('deliberately long workstation');
|
|
await enterProfile(page, owner, sample);
|
|
const region = page.getByRole('region', { name: t.sessionsSectionTitle, exact: true });
|
|
await expect(region.getByText(remote.deviceLabel!, { exact: true })).toBeVisible();
|
|
const trigger = region.getByRole('button', { name: t.sessionsRevokeOthers, exact: true });
|
|
await expect(trigger).toBeVisible();
|
|
const writes = observeWrites(page);
|
|
await trigger.focus();
|
|
await trigger.press('Enter');
|
|
const dialog = page.getByRole('dialog', { name: t.sessionsRevokeOthersConfirmTitle, exact: true });
|
|
await expect(dialog).toBeVisible();
|
|
// MUI initially focuses its trap container; the next Tab must enter the named dialog.
|
|
await expect.poll(() => dialog.evaluate(element =>
|
|
element.closest('.MuiDialog-container')?.contains(document.activeElement))).toBe(true);
|
|
await info.attach('initial-dialog-focus', { body: JSON.stringify(await dialog.evaluate(element => ({
|
|
focusedTag: document.activeElement?.tagName,
|
|
focusedRole: document.activeElement?.getAttribute('role'),
|
|
inTrapContainer: element.closest('.MuiDialog-container')?.contains(document.activeElement),
|
|
inNamedSurface: element.contains(document.activeElement),
|
|
}))), contentType: 'application/json' });
|
|
await page.keyboard.press('Tab');
|
|
await expect.poll(() => dialog.evaluate(element => element.contains(document.activeElement))).toBe(true);
|
|
await expect(dialog.getByRole('button', { name: t.cancel, exact: true })).toBeFocused();
|
|
await page.keyboard.press('Tab');
|
|
await expect(dialog.getByRole('button', { name: t.sessionsRevokeOthers, exact: true })).toBeFocused();
|
|
await page.keyboard.press('Tab');
|
|
await expect(dialog.getByRole('button', { name: t.cancel, exact: true })).toBeFocused();
|
|
await page.keyboard.press('Shift+Tab');
|
|
await expect(dialog.getByRole('button', { name: t.sessionsRevokeOthers, exact: true })).toBeFocused();
|
|
await dialog.getByRole('button', { name: t.cancel, exact: true }).press('Enter');
|
|
await expect(dialog).toBeHidden();
|
|
await expect(trigger).toBeFocused();
|
|
expect(writes.writes.filter(write => write.path.startsWith('/api/auth/sessions'))).toEqual([]);
|
|
expect((await read<Session[]>(page.request, '/auth/sessions')).map(session => session.id).sort()).toEqual(before.map(session => session.id).sort());
|
|
expect((await other.get(`${apiUrl}/auth/me`)).status()).toBe(200);
|
|
let failedAttempts = 0;
|
|
const fail = async (route: import('@playwright/test').Route) => {
|
|
expect(route.request().method()).toBe('POST');
|
|
failedAttempts += 1;
|
|
return route.fulfill({ status: 500, contentType: 'application/json', body: '{}' });
|
|
};
|
|
await page.route('**/api/auth/sessions/revoke-others', fail);
|
|
await trigger.press('Enter');
|
|
const confirm = dialog.getByRole('button', { name: t.sessionsRevokeOthers, exact: true });
|
|
await confirm.press('Enter');
|
|
await expect(dialog.getByRole('alert')).toBeVisible();
|
|
expect(await dialog.getByRole('alert').evaluate(element => Boolean(element.closest('[aria-hidden="true"]')))).toBe(false);
|
|
await expect(dialog).toBeVisible();
|
|
expect(failedAttempts).toBe(1);
|
|
await page.keyboard.press('Tab');
|
|
await expect(dialog.getByRole('button', { name: t.cancel, exact: true })).toBeFocused();
|
|
await page.keyboard.press('Shift+Tab');
|
|
await expect(confirm).toBeFocused();
|
|
expect((await read<Session[]>(page.request, '/auth/sessions')).map(session => session.id).sort()).toEqual(before.map(session => session.id).sort());
|
|
expect((await other.get(`${apiUrl}/auth/me`)).status()).toBe(200);
|
|
await collect(page, info, sample, 'revoke-others-failed-modal');
|
|
await page.unroute('**/api/auth/sessions/revoke-others', fail);
|
|
const revoked = page.waitForResponse(response => new URL(response.url()).pathname === '/api/auth/sessions/revoke-others' && response.request().method() === 'POST');
|
|
await confirm.press('Enter');
|
|
expect((await revoked).status()).toBe(204);
|
|
await expect(dialog).toBeHidden();
|
|
await expect(trigger).toHaveCount(0);
|
|
expect(await read<Session[]>(page.request, '/auth/sessions')).toEqual([expect.objectContaining({ id: current.id, isCurrentSession: true })]);
|
|
expect((await other.get(`${apiUrl}/auth/me`)).status()).toBe(401);
|
|
await collect(page, info, sample, 'only-current-session');
|
|
const currentRevoke = region.getByRole('button', { name: t.sessionsRevoke, exact: true });
|
|
await expect(currentRevoke).toHaveCount(1);
|
|
const disposed = page.waitForResponse(response => new URL(response.url()).pathname === `/api/auth/sessions/${current.id}` && response.request().method() === 'DELETE');
|
|
await currentRevoke.press('Enter');
|
|
expect((await disposed).status()).toBe(204);
|
|
await expect(page).toHaveURL(/\/login\?sessionChanged=1$/);
|
|
await expect(page.getByRole('region', { name: t.sessionsSectionTitle, exact: true })).toHaveCount(0);
|
|
await expect(page.getByText(remote.deviceLabel!, { exact: true })).toHaveCount(0);
|
|
expect((await page.request.get(`${apiUrl}/auth/me`)).status()).toBe(401);
|
|
expect(writes.writes.filter(write => write.path === '/api/auth/sessions/revoke-others')).toHaveLength(2);
|
|
expect(writes.writes.filter(write => write.method === 'DELETE' && write.path.startsWith('/api/auth/sessions/')))
|
|
.toEqual([{ method: 'DELETE', path: `/api/auth/sessions/${current.id}` }]);
|
|
writes.stop();
|
|
await info.attach('native-session-confirmation-readback', { body: JSON.stringify({
|
|
initialSessions: 2, canceledRevokeWrites: 0, failedAttempt: 1, explicitRetry: 1,
|
|
remoteSessionRejectedAfterRetry: true, currentSessionKeptUntilExplicitRevoke: true,
|
|
currentSessionRevokeDisposedPrivateUi: true, noExternalProviderCalls: true,
|
|
}), contentType: 'application/json' });
|
|
} finally {
|
|
await other.dispose();
|
|
}
|
|
});
|