feat(react): add support for runOnly. (#101)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Michael <45568605+michael-siek@users.noreply.github.com> Co-authored-by: Jey <jey.nandakumar@gmail.com>
dequelabs · Nov 17, 2020 · cfadde3 · cfadde3
1 parent fe0942e
commit cfadde3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git 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
@@ -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<void> {
             n = document;
           }
         }
-        axeCore.run(n, { reporter: 'v2' }, function(
+        axeCore.run(n, { reporter: 'v2' }, function (
           error: Error,
           results: axeCore.AxeResults
         ) {
@@ -328,34 +328,49 @@ 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<void> {
   React = _React;
   ReactDOM = _ReactDOM;
   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);
   }
 
   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
@@ -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);