Merge pull request #20 from DesselBane/feat/add-custom-result-handler

feat: add custom result handler

Author: ktquez

README.md

@@ -36,9 +36,28 @@ if (process.env.NODE_ENV !== 'production') {
 |Key|Description|Default|Required|
 |---|---|---|---|
 |`clearConsoleOnUpdate`|Clears the console each time `vue-axe` runs|`true`|`false`|
-|`config`|Provide your Axe-core configuration: [API Name: axe.configure](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure)| |`false`|
+|`customResultHandler`|Handle the results from an `axe.run()`. This may be needed for automated tests.|`undefined`|`false`|
+|`config`|Provide your Axe-core configuration: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure| |`false`|
 |`runOptions`|Provide your Axe-core runtime options: [API Name: axe.run](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#options-parameter)|`{ reporter: 'v2', resultTypes: ['violations'] }`|`false`|
 
+#### Custom Result Handler
+
+The `customResultHandler` config property expects a callback like the `axe.run()` callback ([see documentation](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#parameters-axerun)). It will be triggered after each call to `axe.run()`. 
+
+```javascript
+import Vue from 'vue'
+
+if (process.env.NODE_ENV !== 'production') {
+  const VueAxe = require('vue-axe')
+  Vue.use(VueAxe, {
+    customResultHandler: (error, results) => {
+      results.violations.forEach(violation => console.log(violation))
+    }
+    // ...
+  })
+}
+``` 
+
 ## Install in Nuxt.js
 Create plugin file `plugins/axe.js`
 ```javascript

package-lock.json

@@ -59,6 +59,6 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
-    "axe-core": "^3.4.1"
+    "axe-core": "3.5.3"
   }
 }

package.json

@@ -22,36 +22,41 @@ export function checkAndReport (options, node) {
       console.clear()
     }
 
-    results.violations = results.violations.filter(result => {
-      result.nodes = result.nodes.filter(node => {
-        let key = node.target.toString() + result.id
-        let retVal = (!cache[key])
-        cache[key] = key
-        return retVal
-      })
-      return (!!result.nodes.length)
-    })
+    options.customResultHandler ? options.customResultHandler(error, results) : standardResultHandler(error, results)
 
-    if (results.violations.length) {
-      console.group('%cNew aXe issues', STYLE.head)
-      results.violations.forEach(result => {
-        let styl = IMPACT.hasOwnProperty(result.impact) ? IMPACT[result.impact] : IMPACT.minor
-        console.groupCollapsed('%c%s: %c%s %s', STYLE[styl], result.impact, STYLE.defaultReset, result.help, result.helpUrl)
-        result.nodes.forEach(function (node) {
-          failureSummary(node, 'any')
-          failureSummary(node, 'none')
-        })
-        console.groupEnd()
-      })
-      console.groupEnd()
-    }
     deferred.resolve()
 
     lastNotification = JSON.stringify(results.violations)
   })
   return deferred.promise
 }
 
+const standardResultHandler = function (errorInfo, results) {
+  results.violations = results.violations.filter(result => {
+    result.nodes = result.nodes.filter(node => {
+      let key = node.target.toString() + result.id
+      let retVal = (!cache[key])
+      cache[key] = key
+      return retVal
+    })
+    return (!!result.nodes.length)
+  })
+
+  if (results.violations.length) {
+    console.group('%cNew aXe issues', STYLE.head)
+    results.violations.forEach(result => {
+      let styl = IMPACT.hasOwnProperty(result.impact) ? IMPACT[result.impact] : IMPACT.minor
+      console.groupCollapsed('%c%s: %c%s %s', STYLE[styl], result.impact, STYLE.defaultReset, result.help, result.helpUrl)
+      result.nodes.forEach(function (node) {
+        failureSummary(node, 'any')
+        failureSummary(node, 'none')
+      })
+      console.groupEnd()
+    })
+    console.groupEnd()
+  }
+}
+
 export function resetCache () {
   cache = {}
 }