feat(report): show source code snippets for violations (#134)

- add a new `html` property to the `earl:result` object
- render the snippet in the "Location" column (only if
  a snippet is available)

Fixes #82

packages/ace-report-axe/src/index.js

@@ -96,6 +96,7 @@ function  axe2ace(spineItem, axeResults) {
             new builders.ResultBuilder('fail')
               .withDescription(node.failureSummary)
               .withPointer(node.target, node.targetCFI)
+              .withHTML(node.html)
               .build())
           .build()));
       });

packages/ace-report/package.json

@@ -17,6 +17,7 @@
   "license": "MIT",
   "main": "lib/index.js",
   "dependencies": {
+    "escape-html": "^1.0.3",
     "fs-extra": "^4.0.2",
     "handlebars": "^4.0.11",
     "winston": "^2.4.0"

packages/ace-report/src/generate-html-report.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const escape = require('escape-html');
 const handlebars = require('handlebars');
 const fs = require('fs');
 const path = require('path');
@@ -150,6 +151,9 @@ function createFlatListOfViolations(violations) {
       if (item["earl:result"]["earl:pointer"]) {
         obj.location += "#epubcfi(" + item["earl:result"]["earl:pointer"]["cfi"] + ")";
       }
+      if (item["earl:result"]["html"]) {
+        obj.html = escape(item["earl:result"]["html"]);
+      }
       flatData.push(obj);
     });
   });

packages/ace-report/src/report-builders.js

@@ -167,6 +167,10 @@ class ResultBuilder {
     this._json['dct:description'] = description;
     return this;
   }
+  withHTML(html) {
+    this._json['html'] = html;
+    return this;
+  }
   withPointer(css, cfi) {
     this._json['earl:pointer'] = { cfi, css };
     return this;

packages/ace-report/src/resources/report-template.handlebars

@@ -26,6 +26,16 @@
       font-size:.8em;font-family:monospace;overflow-wrap:break-word
     }
 
+    .snippet {
+      font-size:.8em;
+    }
+    .snippet code {
+      display: block;
+      font-size:1em;
+      font-family:monospace;overflow-wrap:break-word;
+      margin-top: 1em;
+    }
+
     .tab-pane{
       margin-top: 1.5em;
       margin-left: 1em;
@@ -459,6 +469,10 @@
       var tdImpact = $("<td><span class='" + violation["impact"] + "'>" + violation["impact"] + "</span></td>");
       var tdRuleset = $("<td><span class='ruleset'>" + rulesetTagLabels[violation["applicableRulesetTag"]] + "</span></td>");
       var tdLocation = $("<td><em>\"" + violation["fileTitle"] + "\"</em><br/><br/><code class='location'>" + violation["location"] + "</code></td>");
+      if (violation.html) {
+        var tdSnippet = $("<br/><br/><div class='snippet'>Snippet:<code>"+ violation.html.trim() + "</code></div>");
+        tdLocation.append(tdSnippet);
+      }
       var tdRule = $("<td>" + violation["rule"] + "<br/><br/><span class='engine'>" + violation["engine"] + "</span></td>");
 
       var desc = violation["desc"];

yarn.lock

@@ -1792,7 +1792,7 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"