From ce44ba90b5d70e995bbd8c08284db8c332e28345 Mon Sep 17 00:00:00 2001 From: Filipp Riabchun Date: Sun, 24 Nov 2019 02:51:10 +0100 Subject: [PATCH 1/3] jest-puppeteer-axe: add `options` and `config` parameters --- packages/jest-puppeteer-axe/README.md | 2 ++ packages/jest-puppeteer-axe/src/index.js | 26 ++++++++++++++++-------- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md index c28b7ed96f752c..a55b27f798ef5a 100644 --- a/packages/jest-puppeteer-axe/README.md +++ b/packages/jest-puppeteer-axe/README.md @@ -41,6 +41,8 @@ It is also possible to pass optional Axe API options to perform customized check - `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. +- `options` - options to be used by `axe.run`. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md) for information on its structure. +- `config` - axe configuration object. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure) for documentation on the object structure. ```js test( 'checks the test component with Axe excluding some button', async () => { diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js index 7bba05d8965d28..24c0cee3d52a5c 100644 --- a/packages/jest-puppeteer-axe/src/index.js +++ b/packages/jest-puppeteer-axe/src/index.js @@ -53,17 +53,19 @@ function formatViolations( violations ) { * * @see https://github.com/dequelabs/axe-puppeteer * - * @param {puppeteer.Page} page Puppeteer's page instance. - * @param {?Object} params Optional Axe API options. - * @param {?string|Array} params.include CSS selector(s) to add to the list of elements - * to include in analysis. - * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements - * to exclude from analysis. - * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. + * @param {puppeteer.Page} page Puppeteer's page instance. + * @param {?Object} params Optional Axe API options. + * @param {?string|Array} params.include CSS selector(s) to add to the list of elements + * to include in analysis. + * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements + * to exclude from analysis. + * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. + * @param {?Axe.RunOptions} params.options Options to be used by axe.run. + * @param {?Axe.Spec} params.config Axe configuration object. * * @return {Object} A matcher object with two keys `pass` and `message`. */ -async function toPassAxeTests( page, { include, exclude, disabledRules } = {} ) { +async function toPassAxeTests( page, { include, exclude, disabledRules, options, config } = {} ) { const axe = new AxePuppeteer( page ); if ( include ) { @@ -74,10 +76,18 @@ async function toPassAxeTests( page, { include, exclude, disabledRules } = {} ) axe.exclude( exclude ); } + if ( options ) { + axe.options( options ); + } + if ( disabledRules ) { axe.disableRules( disabledRules ); } + if ( config ) { + axe.configure( config ); + } + const { violations } = await axe.analyze(); const pass = violations.length === 0; From 2a706381da3795cf8750236caf521645ab73b20d Mon Sep 17 00:00:00 2001 From: Filipp Riabchun Date: Thu, 28 Nov 2019 01:14:58 +0100 Subject: [PATCH 2/3] Address review feedback --- packages/jest-puppeteer-axe/README.md | 4 +++- packages/jest-puppeteer-axe/src/index.js | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md index a55b27f798ef5a..38543d18eb122f 100644 --- a/packages/jest-puppeteer-axe/README.md +++ b/packages/jest-puppeteer-axe/README.md @@ -41,7 +41,7 @@ It is also possible to pass optional Axe API options to perform customized check - `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. -- `options` - options to be used by `axe.run`. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md) for information on its structure. +- `options` - options to be used by `axe.run`. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter) for information on its structure. - `config` - axe configuration object. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure) for documentation on the object structure. ```js @@ -54,6 +54,8 @@ test( 'checks the test component with Axe excluding some button', async () => { include: '.test-component', exclude: '.some-button', disabledRules: [ 'aria-allowed-role' ], + options: { iframes: false }, + config: { reporter: 'raw' }, } ); } ); ``` diff --git a/packages/jest-puppeteer-axe/src/index.js b/packages/jest-puppeteer-axe/src/index.js index 24c0cee3d52a5c..2ddcabcc7707bc 100644 --- a/packages/jest-puppeteer-axe/src/index.js +++ b/packages/jest-puppeteer-axe/src/index.js @@ -54,14 +54,14 @@ function formatViolations( violations ) { * @see https://github.com/dequelabs/axe-puppeteer * * @param {puppeteer.Page} page Puppeteer's page instance. - * @param {?Object} params Optional Axe API options. + * @param {?Object} params Optional params that allow better control over Axe API. * @param {?string|Array} params.include CSS selector(s) to add to the list of elements * to include in analysis. * @param {?string|Array} params.exclude CSS selector(s) to add to the list of elements * to exclude from analysis. * @param {?Array} params.disabledRules The list of Axe rules to skip from verification. - * @param {?Axe.RunOptions} params.options Options to be used by axe.run. - * @param {?Axe.Spec} params.config Axe configuration object. + * @param {?Axe.RunOptions} params.options A flexible way to configure how Axe run operates, see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter. + * @param {?Axe.Spec} params.config Axe configuration object, see https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure. * * @return {Object} A matcher object with two keys `pass` and `message`. */ From c6c33edac56c6295037f61b4ccfda5b248daeccd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Fri, 29 Nov 2019 10:50:35 +0100 Subject: [PATCH 3/3] Docs: adjust documentation --- packages/jest-puppeteer-axe/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/jest-puppeteer-axe/README.md b/packages/jest-puppeteer-axe/README.md index 38543d18eb122f..54d904cc5a313d 100644 --- a/packages/jest-puppeteer-axe/README.md +++ b/packages/jest-puppeteer-axe/README.md @@ -37,12 +37,12 @@ test( 'checks the test page with Axe', async () => { } ); ``` -It is also possible to pass optional Axe API options to perform customized check: +It is also possible to pass optional params which allow Axe API to perform customized checks: - `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. -- `options` - options to be used by `axe.run`. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter) for information on its structure. -- `config` - axe configuration object. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure) for documentation on the object structure. +- `options` - a flexible way to configure how Axe run operates. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter) for information on the object structure. +- `config` - Axe configuration object. See [axe-core API documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure) for documentation on the object structure. ```js test( 'checks the test component with Axe excluding some button', async () => { @@ -54,8 +54,8 @@ test( 'checks the test component with Axe excluding some button', async () => { include: '.test-component', exclude: '.some-button', disabledRules: [ 'aria-allowed-role' ], - options: { iframes: false }, - config: { reporter: 'raw' }, + options: { iframes: false }, + config: { reporter: 'raw' }, } ); } ); ```