Testing: Add partial support for Axe verification in e2e tests

WordPress · Apr 17, 2019 · 52a4193 · 52a4193
1 parent e209cfb
commit 52a4193
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/e2e-tests/CHANGELOG.md b/packages/e2e-tests/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### New features
+
+- Added Axe (the Accessibility Engine) API integration with e2e tests suite.
+
 ## 1.0.0 (2019-03-06)
 
 -   Initial release.
diff --git a/packages/e2e-tests/config/setup-test-framework.js b/packages/e2e-tests/config/setup-test-framework.js
@@ -8,13 +8,13 @@ import { get } from 'lodash';
  */
 import '@wordpress/jest-console';
 import {
+	activatePlugin,
 	clearLocalStorage,
 	enablePageDialogAccept,
 	setBrowserViewport,
-	visitAdminPage,
-	activatePlugin,
 	switchUserToAdmin,
 	switchUserToTest,
+	visitAdminPage,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -162,6 +162,26 @@ beforeAll( async () => {
 } );
 
 afterEach( async () => {
+	if ( await page.$( '.block-editor' ) ) {
+		await expect( page ).toPassAxeTests( {
+			disabledRules: [
+				'aria-allowed-role',
+				'aria-valid-attr-value',
+				'color-contrast',
+				'dlitem',
+				'duplicate-id',
+				'label',
+				'link-name',
+				'listitem',
+				'region',
+			],
+			exclude: [
+				'.edit-post-layout__metaboxes',
+				'.mce-open',
+			],
+		} );
+	}
+
 	await setupBrowser();
 } );
 

diff --git a/packages/e2e-tests/jest.config.js b/packages/e2e-tests/jest.config.js
@@ -5,6 +5,7 @@ module.exports = {
 	],
 	setupFilesAfterEnv: [
 		'<rootDir>/config/setup-test-framework.js',
+		'@wordpress/jest-puppeteer-axe',
 		'expect-puppeteer',
 	],
 	transformIgnorePatterns: [

diff --git a/packages/e2e-tests/package.json b/packages/e2e-tests/package.json
@@ -24,6 +24,7 @@
 	"dependencies": {
 		"@wordpress/e2e-test-utils": "file:../e2e-test-utils",
 		"@wordpress/jest-console": "file:../jest-console",
+		"@wordpress/jest-puppeteer-axe": "file:../jest-puppeteer-axe",
 		"@wordpress/scripts": "file:../scripts",
 		"expect-puppeteer": "^4.0.0",
 		"lodash": "^4.17.11"

diff --git a/packages/e2e-tests/plugins/format-api/index.js b/packages/e2e-tests/plugins/format-api/index.js
@@ -18,7 +18,7 @@
 									props.value, {
 										type: 'my-plugin/link',
 										attributes: {
-											url: '#test',
+											url: 'https://example.com',
 										}
 									}
 								)

diff --git a/packages/e2e-tests/specs/plugins/__snapshots__/format-api.test.js.snap b/packages/e2e-tests/specs/plugins/__snapshots__/format-api.test.js.snap
@@ -2,6 +2,6 @@
 
 exports[`Using Format API Clicking the control wraps the selected text properly with HTML code 1`] = `
 "<!-- wp:paragraph -->
-<p>First <a href=\\"#test\\" class=\\"my-plugin-link\\">paragraph</a></p>
+<p>First <a href=\\"https://example.com\\" class=\\"my-plugin-link\\">paragraph</a></p>
 <!-- /wp:paragraph -->"
 `;
diff --git a/packages/jest-puppeteer-axe/CHANGELOG.md b/packages/jest-puppeteer-axe/CHANGELOG.md
@@ -1,3 +1,9 @@
+## Unreleased
+
+### New features
+
+- Added optional `disabledRules` option to use with `toPassAxeTests` matcher.
+
 ## 1.0.0 (2019-03-06)
 
 - Initial release.
diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md
@@ -38,8 +38,9 @@ test( 'checks the test page with Axe', async () => {
 ```
 
 It is also possible to pass optional Axe API options to perform customized check:
-- `include` - CSS selector to to add the list of elements to include in analysis.
-- `exclude` - CSS selector to to add the list of elements to exclude from analysis.
+- `include` - CSS selector(s) to to add the list of elements to include in analysis.
+- `exclude` - CSS selector(s) to to add the list of elements to exclude from analysis.
+- `disabledRules` - the list of [Axe rules](https://github.com/dequelabs/axe-core/blob/master/doc/rule-descriptions.md) to skip from verification.
 
 ```js
 test( 'checks the test component with Axe excluding some button', async () => {
@@ -50,6 +51,7 @@ test( 'checks the test component with Axe excluding some button', async () => {
 	await expect( page ).toPassAxeTests( {
 		include: '.test-component',
 		exclude: '.some-button',
+		disabledRules: [ 'aria-allowed-role' ],
 	} );
 } );
 ```

diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js
@@ -52,16 +52,17 @@ function formatViolations( violations ) {
  *
  * @see https://github.com/dequelabs/axe-puppeteer
  *
- * @param {Page}    page             Puppeteer's page instance.
- * @param {?Object} params           Optional Axe API options.
- * @param {?string} params.include   CSS selector to add to the list of elements
- *                                   to include in analysis.
- * @param {?string} params.exclude   CSS selector to add to the list of elements
- *                                   to exclude from analysis.
+ * @param {Page}          page                 Puppeteer's page instance.
+ * @param {?Object}       params               Optional Axe API options.
+ * @param {?string|Array} params.include       CSS selector to add to the list of elements
+ *                                             to include in analysis.
+ * @param {?string|Array} params.exclude       CSS selector to add to the list of elements
+ *                                             to exclude from analysis.
+ * @param {?Array}        params.disabledRules The list of Axe rules to skip from verification.
  *
  * @return {Object} A matcher object with two keys `pass` and `message`.
  */
-async function toPassAxeTests( page, { include, exclude } = {} ) {
+async function toPassAxeTests( page, { include, exclude, disabledRules } = {} ) {
 	const axe = new AxePuppeteer( page );
 
 	if ( include ) {
@@ -72,6 +73,10 @@ async function toPassAxeTests( page, { include, exclude } = {} ) {
 		axe.exclude( exclude );
 	}
 
+	if ( disabledRules ) {
+		axe.disableRules( disabledRules );
+	}
+
 	const { violations } = await axe.analyze();
 
 	const pass = violations.length === 0;