feat(react): Add configuration option to optional disable cache (dedu…

…plication) (#309)

* reset cache whenever invoking reactAxe

* Added ability to disable the cache

* Did that in a better way

* Added document of disableDeduplicate in the README, also changed option name.

* Cleaned up some unintended formatting changes and mistakes from using yarn

Co-authored-by: Ryan O'Connor <ryan.oconnor@fullscript.com>

packages/cli/src/lib/webdriver.test.ts

@@ -70,8 +70,11 @@ describe('startDriver', () => {
     await startDriver(config);
 
     const options = config?.builder?.getChromeOptions();
-    assert.isArray(options?.get("goog:chromeOptions").args);
-    assert.deepEqual(options?.get("goog:chromeOptions").args, ['headless', '--no-sandbox']);
+    assert.isArray(options?.get('goog:chromeOptions').args);
+    assert.deepEqual(options?.get('goog:chromeOptions').args, [
+      'headless',
+      '--no-sandbox'
+    ]);
   });
 
   it('passes multiple arguments argument to chromeOptions', async () => {
@@ -80,8 +83,12 @@ describe('startDriver', () => {
     await startDriver(config);
 
     const options = config?.builder?.getChromeOptions();
-    assert.isArray(options?.get("goog:chromeOptions").args);
-    assert.deepEqual(options?.get("goog:chromeOptions").args, ['headless', 'no-sandbox', "disable-dev-shm-usage"]);
+    assert.isArray(options?.get('goog:chromeOptions').args);
+    assert.deepEqual(options?.get('goog:chromeOptions').args, [
+      'headless',
+      'no-sandbox',
+      'disable-dev-shm-usage'
+    ]);
   });
 
   it('sets the --timeout flag', async () => {

packages/cli/src/lib/webdriver.ts

@@ -17,14 +17,12 @@ const startDriver = async (
 
     let options = new chrome.Options().headless();
     if (config.chromeOptions?.length) {
-      options = config.chromeOptions.reduce(function(options, arg) {
+      options = config.chromeOptions.reduce(function (options, arg) {
         return options.addArguments(arg);
-      }, options );
+      }, options);
     }
 
-    builder = new Builder()
-      .forBrowser('chrome')
-      .setChromeOptions(options);
+    builder = new Builder().forBrowser('chrome').setChromeOptions(options);
   } else {
     builder = new Builder().forBrowser(config.browser);
   }

packages/react/README.md

@@ -34,7 +34,7 @@ Once initialized, the module will output accessibility defect information to the
 
 ## Deduplicating
 
-@axe-core/react will deduplicate violations using the rule that raised the violation and the CSS selector and the failureSummary of the specific node. This will ensure that each unique issue will only be printed to the console once.
+@axe-core/react will deduplicate violations using the rule that raised the violation and the CSS selector and the failureSummary of the specific node. This will ensure that each unique issue will only be printed to the console once. This can be disabled by setting `disableDeduplicate: true` in the configuration object as shown in the example [here](#configuration).
 
 ## Debouncing
 
@@ -55,7 +55,8 @@ const config = {
       id: 'skip-link',
       enabled: true
     }
-  ]
+  ],
+  disableDeduplicate: true
 };
 
 axe(React, ReactDOM, 1000, config);

packages/react/index.ts

@@ -39,6 +39,7 @@ const defaultReset = `font-color:${theme.text};font-weight:normal;`;
 let idleId: number | undefined;
 let timeout: number;
 let context: axeCore.ElementContext | undefined;
+let conf: ReactSpec;
 let _createElement: typeof React.createElement;
 const components: { [id: number]: React.Component } = {};
 const nodes: Node[] = [document.documentElement];
@@ -187,6 +188,8 @@ function failureSummary(
  * @return {Promise}
  */
 function checkAndReport(node: Node, timeout: number): Promise<void> {
+  const disableDeduplicate = conf['disableDeduplicate'];
+
   if (idleId) {
     cancelIdleCallback(idleId);
     idleId = undefined;
@@ -218,7 +221,7 @@ function checkAndReport(node: Node, timeout: number): Promise<void> {
               const key: string = node.target.toString() + result.id;
               const retVal = !cache[key];
               cache[key] = key;
-              return retVal;
+              return disableDeduplicate || retVal;
             });
             return !!result.nodes.length;
           });
@@ -343,6 +346,7 @@ function logToConsole(results: axeCore.AxeResults): void {
  */
 interface ReactSpec extends axeCore.Spec {
   runOnly?: string[];
+  disableDeduplicate?: boolean;
 }
 
 /**
@@ -358,14 +362,15 @@ function reactAxe(
   _React: typeof React,
   _ReactDOM: typeof ReactDOM,
   _timeout: number,
-  conf = {} as ReactSpec,
+  _conf = {} as ReactSpec,
   _context?: axeCore.ElementContext,
   _logger?: (results: axeCore.AxeResults) => void
 ): Promise<void> {
   React = _React;
   ReactDOM = _ReactDOM;
   timeout = _timeout;
   context = _context;
+  conf = _conf;
   logger = _logger || logToConsole;
 
   const runOnly = conf['runOnly'];