feat(checkAndReport): Add the checked component name in log title

Author: ktquez

Diff for: docs/guide/api.md

@@ -12,13 +12,15 @@ To execute the `$axe.run` method to check manually your document or any desired
 | ------------- | ------------------------ | ----------------------------------
 | clearConsole  | Boolean                  | The same as `clearConsoleOnUpdate`
 | element       | Document or HTMLElement  | `document`
+| label         | Strong                   | `Run manually`
 
 ```js
 methods: {
   axeRun() {
     this.$axe.run({
       clearConsole: true,
-      element: this.$el     // or document, document.querySelector('.selector'), ...
+      element: this.$el,     // or document, document.querySelector('.selector'), ...
+      label: 'Logo component'
     })
   }
 }

Diff for: src/audit.js

@@ -7,7 +7,7 @@ let lastNotification = ''
 const deferred = {}
 const impacts = [...axeCore.constants.impact].reverse()
 
-export function checkAndReport (options, node) {
+export function checkAndReport (options, node, label) {
   const deferred = createDeferred()
   style = { ...options.style }
 
@@ -20,14 +20,14 @@ export function checkAndReport (options, node) {
       console.clear()
     }
 
-    options.customResultHandler ? options.customResultHandler(error, results) : standardResultHandler(error, results)
+    options.customResultHandler ? options.customResultHandler(error, results) : standardResultHandler(error, results, label)
     deferred.resolve()
     lastNotification = JSON.stringify(results.violations)
   })
   return deferred.promise
 }
 
-const standardResultHandler = function (errorInfo, results) {
+const standardResultHandler = function (errorInfo, results, label) {
   results.violations = results.violations.filter(result => {
     result.nodes = result.nodes.filter(node => {
       const key = node.target.toString() + result.id
@@ -40,7 +40,7 @@ const standardResultHandler = function (errorInfo, results) {
 
   if (results.violations.length) {
     const violations = sortViolations(results.violations)
-    console.group('%cNew axe issues', style.head)
+    console.group(`%cAxe issues ${label ? '- ' + label : ''}`, style.head)
     violations.forEach(result => {
       console.groupCollapsed('%c%s%c %s %s %c%s', style[result.impact || 'minor'], result.impact, style.title, result.help, '\n', style.url, result.helpUrl)
       result.nodes.forEach(node => {

Diff for: src/index.js

@@ -19,9 +19,9 @@ export default function install (Vue, options) {
 
   // vue-axe methods in Vue Instance
   Vue.prototype.$axe = {
-    run ({ clearConsole = options.clearConsoleOnUpdate, element } = {}) {
+    run ({ clearConsole = options.clearConsoleOnUpdate, element, label } = {}) {
       clear(clearConsole, options)
-      draf(() => checkAndReport(options, element))
+      draf(() => checkAndReport(options, element, (label || 'Run manually')))
     },
     plugins: axeCore.plugins
   }
@@ -30,8 +30,9 @@ export default function install (Vue, options) {
   if (!options.auto) return
 
   const checkWithDebounce = debounce(function () {
+    const componentsName = this.$options.name || ''
     resetCache()
-    draf(() => checkAndReport(options, this.$el))
+    draf(() => checkAndReport(options, this.$el, componentsName))
   }, 1000, { maxWait: 5000 })
 
   // Rechecking when updating specific component
@@ -46,5 +47,5 @@ export default function install (Vue, options) {
   })
 
   // First check
-  setTimeout(() => draf(() => checkAndReport(options, document)), options.delay)
+  setTimeout(() => draf(() => checkAndReport(options, document, 'App')), options.delay)
 }