diff --git a/README.md b/README.md index 9e02967..ad3051d 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index de5c5d6..abf635f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -573,9 +573,9 @@ "dev": true }, "axe-core": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-3.4.1.tgz", - "integrity": "sha512-+EhIdwR0hF6aeMx46gFDUy6qyCfsL0DmBrV3Z+LxYbsOd8e1zBaPHa3f9Rbjsz2dEwSBkLw6TwML/CAIIAqRpw==" + "version": "3.5.3", + "resolved": "http://nue-repo-01.paesslergmbh.de:8081/repository/paessler-npm/axe-core/-/axe-core-3.5.3.tgz", + "integrity": "sha512-HZpLE7xu05+8AbpqXITGdxp1Xwk8ysAXrg7MiKRY27py3DAyEJpoJQo1727pWF3F+O79V3r+cTWhOzfB49P89w==" }, "babel-code-frame": { "version": "6.26.0", diff --git a/package.json b/package.json index a4faa41..ed40801 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,6 @@ "vue-template-compiler": "^2.6.11" }, "dependencies": { - "axe-core": "^3.4.1" + "axe-core": "3.5.3" } } diff --git a/src/utils.js b/src/utils.js index 84f70f3..c1483e8 100644 --- a/src/utils.js +++ b/src/utils.js @@ -22,29 +22,8 @@ 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) @@ -52,6 +31,32 @@ export function checkAndReport (options, node) { 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 = {} }