Update visualRegression task to use Handlebars instead of DoT templates.

- This eliminates the annoying DoT messages from the terminal.
rashidkpc · Jun 21, 2016 · 45437de · 45437de
1 parent c6f5963
commit 45437de
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -161,7 +161,6 @@
     "babel-eslint": "4.1.8",
     "chokidar": "1.4.3",
     "chromedriver": "2.21.2",
-    "dot": "1.0.3",
     "elasticdump": "2.1.1",
     "eslint": "1.10.3",
     "eslint-plugin-mocha": "1.1.0",
@@ -179,6 +178,7 @@
     "grunt-s3": "0.2.0-alpha.3",
     "grunt-simple-mocha": "0.4.0",
     "gruntify-eslint": "1.0.1",
+    "handlebars": "4.0.5",
     "html-entities": "1.1.3",
     "husky": "0.8.1",
     "image-diff": "1.6.0",

diff --git a/...s/templates/visual_regression_gallery.dot → ...ates/visual_regression_gallery.handlebars b/...s/templates/visual_regression_gallery.dot → ...ates/visual_regression_gallery.handlebars
@@ -126,13 +126,14 @@
   </div>
 
   <div class="meta">
-    {{=it.branch}} - {{=it.date}}
+    {{branch}} - {{date}}
   </div>
 
-  {{~it.comparisons :comparison:index}}
-  <div class="comparison{{? comparison.change <= it.hiddenThreshold }} comparison--collapsed{{?}} {{? comparison.change >= it.warningThreshold }} comparison--warning{{?}}">
+  {{#each comparisons as |comparison|}}
+  <div class="comparison{{#lte comparison.change ../hiddenThreshold}} comparison--collapsed{{/lte}} {{#gte comparison.change ../warningThreshold }} comparison--warning{{/gte}}">
+
     <div class="comparison__title">
-      <span class="comparison__percent">({{=comparison.percentage}}%)</span> {{=comparison.name}}
+      <span class="comparison__percent">({{comparison.percentage}}%)</span> {{comparison.name}}
     </div>
 
     <div class="comparison__subTitle">
@@ -155,7 +156,7 @@
       <div class="comparisonScreenshot">
         <img
           class="comparisonScreenshot__image"
-          src="data:image/png;base64,{{=comparison.imageData.diff}}"
+          src="data:image/png;base64,{{comparison.imageData.diff}}"
         />
       </div>
 
@@ -166,20 +167,20 @@
       >
         <img
           class="comparisonScreenshot__image"
-          src="data:image/png;base64,{{=comparison.imageData.session}}"
+          src="data:image/png;base64,{{comparison.imageData.session}}"
         />
       </div>
 
       <!-- Baseline, see what it's supposed to be. -->
       <div class="comparisonScreenshot comparisonScreenshot--baseline">
         <img
           class="comparisonScreenshot__image"
-          src="data:image/png;base64,{{=comparison.imageData.baseline}}"
+          src="data:image/png;base64,{{comparison.imageData.baseline}}"
         />
       </div>
     </div>
   </div>
-  {{~}}
+  {{/each}}
 
 <script>
 

diff --git a/utilities/visual_regression.js b/utilities/visual_regression.js
@@ -3,7 +3,7 @@ import bluebird, {
   fromNode,
   promisify,
 } from 'bluebird';
-import dot from 'dot';
+import Handlebars from 'handlebars';
 import fs from 'fs';
 import path from 'path';
 import imageDiff from 'image-diff';
@@ -15,33 +15,42 @@ const readDirAsync = promisify(fs.readdir);
 const readFileAsync = promisify(fs.readFile);
 const writeFileAsync = promisify(fs.writeFile);
 
-// Preserve whitespace in our HTML output.
-dot.templateSettings.strip = false;
 
-const templates = dot.process({
-  path: path.resolve('./utilities/templates')
+Handlebars.registerHelper('lte', function lessThanEquals(value, threshold, options) {
+  if (value <= threshold) {
+    return options.fn(this);
+  }
+  return options.inverse(this);
 });
 
-function buildGallery(comparisons) {
+Handlebars.registerHelper('gte', function greaterThanEquals(value, threshold, options) {
+  if (value >= threshold) {
+    return options.fn(this);
+  }
+  return options.inverse(this);
+});
+
+async function buildGallery(comparisons) {
   const simpleGit = new SimpleGit();
   const asyncBranch = promisify(simpleGit.branch, simpleGit);
-
-  return asyncBranch().then(data => {
-    const branch = data.current;
-
-    const html = templates.visual_regression_gallery({
-      date: moment().format('MMMM Do YYYY, h:mm:ss a'),
-      branch,
-      hiddenThreshold: 0,
-      warningThreshold: 0.03,
-      comparisons,
-    });
-
-    return writeFileAsync(
-      path.resolve('./test/screenshots/visual_regression_gallery.html'),
-      html
-    );
+  const branch = await asyncBranch();
+
+  const template = Handlebars.compile(await readFileAsync(
+    path.resolve('./utilities/templates/visual_regression_gallery.handlebars')
+  , 'utf8'));
+
+  const html = template({
+    date: moment().format('MMMM Do YYYY, h:mm:ss a'),
+    branch: branch.current,
+    hiddenThreshold: 0,
+    warningThreshold: 0.03,
+    comparisons,
   });
+
+  return writeFileAsync(
+    path.resolve('./test/screenshots/visual_regression_gallery.html'),
+    html
+  );
 }
 
 async function compareScreenshots() {