From 5e053fad083fed36b8a0db056afd2880f8d1e2a8 Mon Sep 17 00:00:00 2001
From: Romain Deltour <rdeltour@gmail.com>
Date: Sun, 24 Dec 2017 00:49:50 +0100
Subject: [PATCH] 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               |  1 +
 packages/ace-report/package.json                   |  1 +
 packages/ace-report/src/generate-html-report.js    |  4 ++++
 packages/ace-report/src/report-builders.js         |  4 ++++
 .../src/resources/report-template.handlebars       | 14 ++++++++++++++
 yarn.lock                                          |  2 +-
 6 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/ace-report-axe/src/index.js b/packages/ace-report-axe/src/index.js
index fce6e65a..d1c95ca7 100644
--- a/packages/ace-report-axe/src/index.js
+++ b/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()));
       });
diff --git a/packages/ace-report/package.json b/packages/ace-report/package.json
index f9ce656b..5e1fe386 100644
--- a/packages/ace-report/package.json
+++ b/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"
diff --git a/packages/ace-report/src/generate-html-report.js b/packages/ace-report/src/generate-html-report.js
index bcc33fe2..ebb80924 100644
--- a/packages/ace-report/src/generate-html-report.js
+++ b/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);
     });
   });
diff --git a/packages/ace-report/src/report-builders.js b/packages/ace-report/src/report-builders.js
index 9b60806a..38d0b21f 100644
--- a/packages/ace-report/src/report-builders.js
+++ b/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;
diff --git a/packages/ace-report/src/resources/report-template.handlebars b/packages/ace-report/src/resources/report-template.handlebars
index 0ac5b3fc..6bc247b9 100644
--- a/packages/ace-report/src/resources/report-template.handlebars
+++ b/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"];
diff --git a/yarn.lock b/yarn.lock
index ab5ea3ff..b6865cd7 100644
--- a/yarn.lock
+++ b/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"