diff --git a/package-lock.json b/package-lock.json index 5eaa041c4cf00..01f7c51cc9da5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2799,6 +2799,7 @@ "dev": true, "requires": { "@wordpress/jest-console": "file:packages/jest-console", + "@wordpress/jest-puppeteer-axe": "file:packages/jest-puppeteer-axe", "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/url": "file:packages/url", "expect-puppeteer": "^3.2.0", diff --git a/package.json b/package.json index 56a54b1637805..d09b554fe5adb 100644 --- a/package.json +++ b/package.json @@ -177,7 +177,7 @@ "publish:prod": "npm run build:packages && lerna publish", "test": "npm run lint && npm run test-unit", "pretest-e2e": "concurrently \"./bin/reset-e2e-tests.sh\" \"npm run build\"", - "test-e2e": "wp-scripts test-e2e --setupTestFrameworkScriptFile=./packages/tests-e2e/support/setup-test-framework.js --testPathPattern=/packages/tests-e2e/specs/", + "test-e2e": "wp-scripts test-e2e --setupTestFrameworkScriptFile=./packages/tests-e2e/support/setup-test-framework.js --testPathPattern=/packages/tests-e2e/specs", "test-e2e:watch": "npm run test-e2e -- --watch", "test-php": "npm run lint-php && npm run test-unit-php", "test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.json", diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js index e69de29bb2d1d..1d99017e40137 100644 --- a/packages/jest-puppeteer-axe/src/index.js +++ b/packages/jest-puppeteer-axe/src/index.js @@ -0,0 +1,79 @@ +/** + * External dependencies + */ +import AxePuppeteer from 'axe-puppeteer'; + +function formatViolations( violations ) { + return violations.map( ( { help, id, nodes } ) => { + let output = `Rule: ${ id } (${ help })\n` + + 'Affected Nodes:\n'; + + nodes.forEach( ( node ) => { + if ( node.any.length ) { + output += ` ${ node.target }\n`; + output += ' Fix ANY of the following:\n'; + node.any.forEach( ( item ) => { + output += ` - ${ item.message }\n`; + } ); + } + + if ( node.all.length ) { + output += ` ${ node.target }\n`; + output += ' Fix ALL of the following:\n'; + node.all.forEach( ( item ) => { + output += ` - ${ item.message }.\n`; + } ); + } + + if ( node.none.length ) { + output += ` ${ node.target }\n`; + output += ' Fix ALL of the following:\n'; + node.none.forEach( ( item ) => { + output += ` - ${ item.message }.\n`; + } ); + } + } ); + return output; + } ).join( '\n' ); +} + +async function toBeAccessible( page, { include, exclude } = {} ) { + const axe = new AxePuppeteer( page ); + + if ( include ) { + axe.include( include ); + } + + if ( exclude ) { + axe.exclude( exclude ); + } + + const { violations } = await axe.analyze(); + + const pass = violations.length === 0; + const message = pass ? + () => { + return this.utils.matcherHint( '.not.toBeAccessible' ) + + '\n\n' + + 'Expected page to contain accessibility check violations.\n' + + 'No violations found.'; + } : + () => { + return this.utils.matcherHint( '.toBeAccessible' ) + + '\n\n' + + 'Expected page to be accessible.\n' + + 'Violations found:\n' + + this.utils.RECEIVED_COLOR( + formatViolations( violations ) + ); + }; + + return { + message, + pass, + }; +} + +expect.extend( { + toBeAccessible, +} ); diff --git a/packages/tests-e2e/package.json b/packages/tests-e2e/package.json index 6a46840360e67..be57783ad92d9 100644 --- a/packages/tests-e2e/package.json +++ b/packages/tests-e2e/package.json @@ -20,6 +20,7 @@ }, "dependencies": { "@wordpress/jest-console": "file:../jest-console", + "@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe", "@wordpress/keycodes": "file:../keycodes", "@wordpress/url": "file:../url", "expect-puppeteer": "^3.2.0", diff --git a/packages/tests-e2e/specs/a11y.test.js b/packages/tests-e2e/specs/a11y.test.js index 93745d38116c2..ef05b536d1781 100644 --- a/packages/tests-e2e/specs/a11y.test.js +++ b/packages/tests-e2e/specs/a11y.test.js @@ -17,6 +17,13 @@ describe( 'a11y', () => { await createNewPost(); } ); + afterEach( async () => { + await expect( page ).toBeAccessible( { + include: '.block-editor', + exclude: '#metaboxes, #post-title-0, .editor-default-block-appender__content', + } ); + } ); + it( 'tabs header bar', async () => { await pressKeyWithModifier( 'ctrl', '~' ); diff --git a/packages/tests-e2e/support/setup-test-framework.js b/packages/tests-e2e/support/setup-test-framework.js index ce775d4da2513..cc8168644dad2 100644 --- a/packages/tests-e2e/support/setup-test-framework.js +++ b/packages/tests-e2e/support/setup-test-framework.js @@ -8,6 +8,7 @@ import { get } from 'lodash'; * WordPress dependencies */ import '@wordpress/jest-console'; +import '@wordpress/jest-puppeteer-axe'; /** * Internal dependencies