Gaps fill up, fixes, ui restructuring
This commit is contained in:
master
244
src/Web/StellaOps.Web/tests/e2e/ia-v2-a11y-regression.spec.ts
Normal file
244
src/Web/StellaOps.Web/tests/e2e/ia-v2-a11y-regression.spec.ts
Normal file
@@ -0,0 +1,244 @@
|
||||
import { expect, test, type Page } from '@playwright/test';
|
||||
|
||||
import { policyAuthorSession } from '../../src/app/testing';
|
||||
|
||||
const shellSession = {
|
||||
...policyAuthorSession,
|
||||
scopes: [
|
||||
...new Set([
|
||||
...policyAuthorSession.scopes,
|
||||
'ui.read',
|
||||
'admin',
|
||||
'orch:read',
|
||||
'orch:operate',
|
||||
'orch:quota',
|
||||
'findings:read',
|
||||
'vuln:view',
|
||||
'vuln:investigate',
|
||||
'vuln:operate',
|
||||
'vuln:audit',
|
||||
'authority:tenants.read',
|
||||
'advisory:read',
|
||||
'vex:read',
|
||||
'exceptions:read',
|
||||
'exceptions:approve',
|
||||
'aoc:verify',
|
||||
]),
|
||||
],
|
||||
};
|
||||
|
||||
const mockConfig = {
|
||||
authority: {
|
||||
issuer: 'http://127.0.0.1:4400/authority',
|
||||
clientId: 'stella-ops-ui',
|
||||
authorizeEndpoint: 'http://127.0.0.1:4400/authority/connect/authorize',
|
||||
tokenEndpoint: 'http://127.0.0.1:4400/authority/connect/token',
|
||||
logoutEndpoint: 'http://127.0.0.1:4400/authority/connect/logout',
|
||||
redirectUri: 'http://127.0.0.1:4400/auth/callback',
|
||||
postLogoutRedirectUri: 'http://127.0.0.1:4400/',
|
||||
scope:
|
||||
'openid profile email ui.read authority:tenants.read advisory:read vex:read exceptions:read exceptions:approve aoc:verify findings:read orch:read vuln:view vuln:investigate vuln:operate vuln:audit',
|
||||
audience: 'http://127.0.0.1:4400/gateway',
|
||||
dpopAlgorithms: ['ES256'],
|
||||
refreshLeewaySeconds: 60,
|
||||
},
|
||||
apiBaseUrls: {
|
||||
authority: '/authority',
|
||||
scanner: '/scanner',
|
||||
policy: '/policy',
|
||||
concelier: '/concelier',
|
||||
attestor: '/attestor',
|
||||
gateway: '/gateway',
|
||||
},
|
||||
quickstartMode: true,
|
||||
setup: 'complete',
|
||||
};
|
||||
|
||||
const oidcConfig = {
|
||||
issuer: mockConfig.authority.issuer,
|
||||
authorization_endpoint: mockConfig.authority.authorizeEndpoint,
|
||||
token_endpoint: mockConfig.authority.tokenEndpoint,
|
||||
jwks_uri: 'http://127.0.0.1:4400/authority/.well-known/jwks.json',
|
||||
response_types_supported: ['code'],
|
||||
subject_types_supported: ['public'],
|
||||
id_token_signing_alg_values_supported: ['RS256'],
|
||||
};
|
||||
|
||||
async function setupShell(page: Page): Promise<void> {
|
||||
await page.addInitScript((session) => {
|
||||
try {
|
||||
window.sessionStorage.clear();
|
||||
} catch {
|
||||
// ignore storage access errors in restricted contexts
|
||||
}
|
||||
(window as { __stellaopsTestSession?: unknown }).__stellaopsTestSession = session;
|
||||
}, shellSession);
|
||||
|
||||
await page.route('**/platform/envsettings.json', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockConfig),
|
||||
})
|
||||
);
|
||||
await page.route('**/config.json', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(mockConfig),
|
||||
})
|
||||
);
|
||||
await page.route('**/authority/.well-known/openid-configuration', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(oidcConfig),
|
||||
})
|
||||
);
|
||||
await page.route('**/.well-known/openid-configuration', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(oidcConfig),
|
||||
})
|
||||
);
|
||||
await page.route('**/authority/.well-known/jwks.json', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ keys: [] }),
|
||||
})
|
||||
);
|
||||
await page.route('**/authority/connect/**', (route) =>
|
||||
route.fulfill({
|
||||
status: 400,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ error: 'not-used-in-a11y-e2e' }),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
async function go(page: Page, path: string): Promise<void> {
|
||||
await page.goto(path, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForLoadState('networkidle', { timeout: 5000 }).catch(() => null);
|
||||
}
|
||||
|
||||
async function ensureShell(page: Page): Promise<void> {
|
||||
await expect(page.locator('aside.sidebar')).toHaveCount(1, { timeout: 15000 });
|
||||
}
|
||||
|
||||
async function openSidebarGroupRoute(
|
||||
page: Page,
|
||||
groupLabel: string,
|
||||
targetHref: string
|
||||
): Promise<void> {
|
||||
const sidebar = page.locator('aside.sidebar');
|
||||
const targetLink = sidebar.locator(`a[href="${targetHref}"]`).first();
|
||||
const isVisible = await targetLink.isVisible().catch(() => false);
|
||||
|
||||
if (!isVisible) {
|
||||
await sidebar.getByRole('button', { name: groupLabel, exact: true }).click();
|
||||
}
|
||||
|
||||
await expect(targetLink).toBeVisible();
|
||||
await targetLink.click();
|
||||
}
|
||||
|
||||
test.describe.configure({ mode: 'serial' });
|
||||
|
||||
test.describe('IA v2 accessibility and regression', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupShell(page);
|
||||
});
|
||||
|
||||
test('canonical roots expose landmarks and navigation controls', async ({ page }) => {
|
||||
const roots = [
|
||||
'/dashboard',
|
||||
'/release-control',
|
||||
'/security-risk',
|
||||
'/evidence-audit',
|
||||
'/administration',
|
||||
];
|
||||
|
||||
for (const path of roots) {
|
||||
await go(page, path);
|
||||
await ensureShell(page);
|
||||
const landmarkCount = await page.locator('main, [role="main"], nav, [role="navigation"]').count();
|
||||
expect(landmarkCount).toBeGreaterThan(1);
|
||||
await expect(page.locator('aside.sidebar a, aside.sidebar button').first()).toBeVisible();
|
||||
}
|
||||
|
||||
// /platform-ops and /integrations are proxy-captured in dev mode.
|
||||
// Validate both via in-app navigation.
|
||||
await go(page, '/dashboard');
|
||||
await openSidebarGroupRoute(page, 'Platform Ops', '/platform-ops/data-integrity');
|
||||
await expect(page).toHaveURL(/\/platform-ops\/data-integrity$/);
|
||||
|
||||
await go(page, '/dashboard');
|
||||
await openSidebarGroupRoute(page, 'Integrations', '/integrations');
|
||||
await expect(page).toHaveURL(/\/integrations$/);
|
||||
});
|
||||
|
||||
test('keyboard navigation moves focus across shell controls', async ({ page }) => {
|
||||
await go(page, '/dashboard');
|
||||
await ensureShell(page);
|
||||
|
||||
const focusedElements: string[] = [];
|
||||
for (let i = 0; i < 10; i += 1) {
|
||||
await page.keyboard.press('Tab');
|
||||
const focused = await page.evaluate(() => {
|
||||
const element = document.activeElement as HTMLElement | null;
|
||||
if (!element) return 'none';
|
||||
return `${element.tagName.toLowerCase()}::${element.className || element.id || 'no-id'}`;
|
||||
});
|
||||
focusedElements.push(focused);
|
||||
}
|
||||
|
||||
expect(new Set(focusedElements).size).toBeGreaterThan(3);
|
||||
});
|
||||
|
||||
test('deprecated root labels are absent from primary nav', async ({ page }) => {
|
||||
await go(page, '/dashboard');
|
||||
await ensureShell(page);
|
||||
const navText = (await page.locator('aside.sidebar nav').textContent()) ?? '';
|
||||
|
||||
expect(navText).not.toContain('Operations');
|
||||
expect(navText).not.toContain('Policy Studio');
|
||||
expect(navText).not.toContain('\nSecurity\n');
|
||||
expect(navText).not.toContain('\nEvidence\n');
|
||||
});
|
||||
|
||||
test('breadcrumbs render canonical ownership on key shell routes', async ({ page }) => {
|
||||
const checks: Array<{ path: string; expected: string }> = [
|
||||
{ path: '/release-control/setup', expected: 'Setup' },
|
||||
{ path: '/security-risk/advisory-sources', expected: 'Advisory Sources' },
|
||||
{ path: '/evidence-audit/replay', expected: 'Replay / Verify' },
|
||||
{ path: '/platform-ops/data-integrity', expected: 'Data Integrity' },
|
||||
{ path: '/administration/trust-signing', expected: 'Trust & Signing' },
|
||||
];
|
||||
|
||||
for (const check of checks) {
|
||||
if (check.path === '/platform-ops/data-integrity') {
|
||||
await go(page, '/dashboard');
|
||||
await openSidebarGroupRoute(page, 'Platform Ops', '/platform-ops/data-integrity');
|
||||
} else {
|
||||
await go(page, check.path);
|
||||
}
|
||||
await ensureShell(page);
|
||||
const breadcrumb = page.locator('app-breadcrumb nav.breadcrumb');
|
||||
await expect(breadcrumb).toHaveCount(1);
|
||||
await expect(breadcrumb).toContainText(check.expected);
|
||||
}
|
||||
});
|
||||
|
||||
test('mobile viewport keeps shell usable without horizontal overflow', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await go(page, '/dashboard');
|
||||
await expect(page.locator('.topbar__menu-toggle')).toBeVisible();
|
||||
|
||||
const hasHorizontalScroll = await page.evaluate(
|
||||
() => document.documentElement.scrollWidth > document.documentElement.clientWidth
|
||||
);
|
||||
expect(hasHorizontalScroll).toBe(false);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user