diff --git a/packages/react/cypress/integration/index-test.js b/packages/react/cypress/integration/index-test.js index 8ea4aa19..5250624a 100644 --- a/packages/react/cypress/integration/index-test.js +++ b/packages/react/cypress/integration/index-test.js @@ -27,7 +27,7 @@ describe('React-axe', function () { cy.spy(win.console, 'groupCollapsed'); cy.spy(win.console, 'groupEnd'); - axe(React, ReactDOM, 0).then(function () { + axe(React, ReactDOM, 0, {}).then(function () { expect(win.console.group).to.be.calledWith( '%cNew axe issues', 'color:#d93251;font-weight:normal;' @@ -52,7 +52,7 @@ describe('React-axe', function () { serviceChooser = node[0]; }); - axe(React, ReactDOM, 0).then(function () { + axe(React, ReactDOM, 0, {}).then(function () { expect(filterLogs(groupCollapsed.args, colorMessage)).to.equal( colorMessage ); diff --git a/packages/react/index.ts b/packages/react/index.ts index 660d1970..ffadef45 100644 --- a/packages/react/index.ts +++ b/packages/react/index.ts @@ -50,7 +50,7 @@ const cache: { [key: string]: string } = {}; // @see https://davidwalsh.name/javascript-debounce-function function debounce(func: Function, wait: number, immediate?: boolean): Function { let _timeout; - return function(...args): void { + return function (...args): void { const later = (): void => { _timeout = null; if (!immediate) func.apply(this, args); @@ -203,7 +203,7 @@ function checkAndReport(node: Node, timeout: number): Promise { n = document; } } - axeCore.run(n, { reporter: 'v2' }, function( + axeCore.run(n, { reporter: 'v2' }, function ( error: Error, results: axeCore.AxeResults ) { @@ -328,19 +328,26 @@ function addComponent(component: any): void { } } +/** + * To support paramater of type runOnly + */ +interface ReactSpec extends axeCore.Spec { + runOnly?: string[]; +} + /** * Run axe against all changes made in a React app. * @parma {React} _React React instance * @param {ReactDOM} _ReactDOM ReactDOM instance * @param {Number} _timeout debounce timeout in milliseconds - * @parma {Spec} conf axe.configure Spec object + * @parma {Spec} conf React axe.configure Spec object * @param {ElementContext} _context axe ElementContent object */ function reactAxe( _React: typeof React, _ReactDOM: typeof ReactDOM, _timeout: number, - conf?: axeCore.Spec, + conf?: ReactSpec, _context?: axeCore.ElementContext ): Promise { React = _React; @@ -348,6 +355,14 @@ function reactAxe( timeout = _timeout; context = _context; + const runOnly = conf['runOnly']; + if (runOnly) { + conf['rules'] = axeCore + .getRules(runOnly) + .map(rule => ({ ...rule, id: rule.ruleId, enabled: true })); + conf['disableOtherRules'] = true; + } + if (conf) { axeCore.configure(conf); } @@ -355,7 +370,7 @@ function reactAxe( if (!_createElement) { _createElement = React.createElement; - React.createElement = function(...args): React.Component { + React.createElement = function (...args): React.Component { const reactEl = _createElement.apply(this, args); if (reactEl._owner && reactEl._owner._instance) { diff --git a/packages/react/test/index.ts b/packages/react/test/index.ts index cf4be264..cda5b7a9 100644 --- a/packages/react/test/index.ts +++ b/packages/react/test/index.ts @@ -24,6 +24,11 @@ reactAxe(React, ReactDOM, 1000, { const context = document.createElement('div'); +// readOnly feature +reactAxe(React, ReactDOM, 1000, { + runOnly: ['wcag2aa', 'wcag2a'] +}); + // axe-core context: Node reactAxe(React, ReactDOM, 1000, {}, context);