|
| 1 | +/// <reference types="cypress" /> |
| 2 | +/// <reference types="cypress-axe" /> |
| 3 | + |
| 4 | +import baseline from '../.a11y-baseline.json'; |
| 5 | + |
| 6 | +type ViolationSummary = { |
| 7 | + id: string; |
| 8 | + impact: string | null; |
| 9 | + nodeCount: number; |
| 10 | +}; |
| 11 | + |
| 12 | +type Baseline = Record<string, ViolationSummary[]>; |
| 13 | + |
| 14 | +const UPDATE_BASELINE = Boolean(Cypress.env('A11Y_UPDATE_BASELINE')); |
| 15 | + |
| 16 | +const RULESET = { |
| 17 | + runOnly: { |
| 18 | + type: 'tag' as const, |
| 19 | + values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'], |
| 20 | + }, |
| 21 | +}; |
| 22 | + |
| 23 | +const accumulated: Baseline = {}; |
| 24 | + |
| 25 | +function toSummary(v: { |
| 26 | + id: string; |
| 27 | + impact?: string | null; |
| 28 | + nodes: unknown[]; |
| 29 | +}): ViolationSummary { |
| 30 | + return { id: v.id, impact: v.impact ?? null, nodeCount: v.nodes.length }; |
| 31 | +} |
| 32 | + |
| 33 | +function checkOrCapture(checkpoint: string) { |
| 34 | + cy.checkA11y( |
| 35 | + undefined, |
| 36 | + RULESET, |
| 37 | + violations => { |
| 38 | + if (UPDATE_BASELINE) { |
| 39 | + accumulated[checkpoint] = violations.map(toSummary); |
| 40 | + // Task runs in Node; path is relative to the package root. |
| 41 | + // cypress.config.ts wires up the writeBaseline task. |
| 42 | + cy.task('writeBaseline', { |
| 43 | + filePath: 'cypress/.a11y-baseline.json', |
| 44 | + data: { ...(baseline as Baseline), ...accumulated }, |
| 45 | + }); |
| 46 | + } else { |
| 47 | + const baselineEntries: ViolationSummary[] = |
| 48 | + (baseline as Baseline)[checkpoint] ?? []; |
| 49 | + // Compare by violation id only — node counts drift between local |
| 50 | + // (Electron on macOS) and CI (headless Chromium on Linux) for the |
| 51 | + // same underlying issues, so they're not a reliable key. |
| 52 | + const baselineKeys = new Set(baselineEntries.map(v => v.id)); |
| 53 | + const newViolations = violations.filter(v => !baselineKeys.has(v.id)); |
| 54 | + if (newViolations.length > 0) { |
| 55 | + const summary = newViolations |
| 56 | + .map(v => `${v.id} (${v.impact}): ${v.help}`) |
| 57 | + .join('\n'); |
| 58 | + throw new Error( |
| 59 | + `New a11y violations at "${checkpoint}":\n${summary}`, |
| 60 | + ); |
| 61 | + } |
| 62 | + } |
| 63 | + }, |
| 64 | + // Don't let cypress-axe auto-throw — the callback above is the only |
| 65 | + // source of failures (compare-against-baseline in normal mode; capture |
| 66 | + // and write in update mode). |
| 67 | + true, |
| 68 | + ); |
| 69 | +} |
| 70 | + |
| 71 | +describe('a11y baseline', () => { |
| 72 | + beforeEach(() => { |
| 73 | + cy.visit('/'); |
| 74 | + cy.injectAxe(); |
| 75 | + }); |
| 76 | + |
| 77 | + it('initial render has no new violations', () => { |
| 78 | + checkOrCapture('initial'); |
| 79 | + }); |
| 80 | + |
| 81 | + it('after running a query has no new violations', () => { |
| 82 | + cy.clickExecuteQuery(); |
| 83 | + // Wait for the response panel to populate before scanning |
| 84 | + cy.get('section.result-window').should('not.have.text', ''); |
| 85 | + cy.injectAxe(); |
| 86 | + checkOrCapture('post-run'); |
| 87 | + }); |
| 88 | + |
| 89 | + it('with docs panel open has no new violations', () => { |
| 90 | + // First sidebar button is the docs explorer toggle (confirmed in docs.cy.ts) |
| 91 | + cy.get('.graphiql-sidebar button').eq(0).click(); |
| 92 | + cy.get('.graphiql-doc-explorer').should('be.visible'); |
| 93 | + cy.injectAxe(); |
| 94 | + checkOrCapture('docs-open'); |
| 95 | + }); |
| 96 | + |
| 97 | + it('with history panel open has no new violations', () => { |
| 98 | + // history.cy.ts uses this exact selector |
| 99 | + cy.get('button[aria-label="Show History"]').click(); |
| 100 | + cy.get('.graphiql-history').should('be.visible'); |
| 101 | + cy.injectAxe(); |
| 102 | + checkOrCapture('history-open'); |
| 103 | + }); |
| 104 | +}); |
0 commit comments