dx: comment on PRs when fixtures have been added/changed (#192)

The goal here is to provide some sort of relatively easy preview for the
PR reviewer to see if the fixture looks good, if the parsing is working,
and to make suggestions easily.

.circleci/config.yml

@@ -9,6 +9,11 @@ jobs:
       - run: "yarn lint:ci"
       - run: "yarn build"
       - run: "yarn test:node -- --maxWorkers=4"
+      - run: "./scripts/pr-parser-preview.sh"
+
+      - store_artifacts:
+          path: /tmp/artifacts
+
   test-web:
     docker:
       - image: circleci/node:6.14-stretch

.gitignore

@@ -9,3 +9,4 @@ coverage
 dist/mercury_test.js
 dist/mercury_test.js.map
 dist/mercury_test.web.js
+tmp/artifacts

package.json

@@ -45,6 +45,7 @@
     "brfs-babel": "^1.0.0",
     "browserify": "^13.1.1",
     "changelog-maker": "^2.3.0",
+    "circle-github-bot": "^2.0.1",
     "eslint": "^3.8.1",
     "eslint-config-airbnb": "^12.0.0",
     "eslint-import-resolver-babel-module": "^2.0.1",

scripts/comment-on-pr.js

@@ -0,0 +1,28 @@
+/* eslint-disable */
+const bot = require('circle-github-bot').create();
+const Mercury = require('../dist/mercury.js');
+const fs = require("fs");
+
+const run = async () => {
+  const screenshot = process.argv[2];
+
+  const fixture = screenshot.split('tmp/artifacts/')[1].slice(0, -4);
+
+  const html = fs.readFileSync(`${fixture}`);
+  const json = await Mercury.parse('http://example.com', html, { fallback: false });
+
+  const jsonPath = `${screenshot}-parsed.json`;
+  const fixtureArtifactPath = "tmp/artifacts/" + fixture;
+
+  fs.writeFileSync(jsonPath, JSON.stringify(json));
+  fs.writeFileSync(fixtureArtifactPath, html);
+
+  bot.comment(`
+  <h3>${bot.env.commitMessage}</h3>
+  Page: <strong>${bot.artifactLink(ffixtureArtifactPath, 'Page')}</strong>
+  Screenshot: <strong>${bot.artifactLink(screenshot, 'Screenshot')}</strong>
+  JSON: <strong>${bot.artifactLink(jsonPath, 'JSON')}</strong>
+  `);
+}
+
+run();

scripts/generate-fixture-preview.js

@@ -0,0 +1,41 @@
+/* eslint-disable */
+const page = require('webpage').create();
+const system = require('system');
+const args = system.args;
+
+const fixtures = args.slice(1)[0].slice(0, -1).split(',');
+const totalRenders = fixtures.length;
+
+var renderCount = 0;
+function pageRenderComplete() {
+  renderCount++;
+  if (renderCount === totalRenders) {
+    phantom.exit();
+  } else {
+    capturePage();
+  }
+}
+
+function capturePage() {
+  const fixturePath = fixtures[renderCount]
+  page.viewportSize = { width: 1366, height: 768 };
+
+  page.open(fixturePath, function() {
+    // set default background to white (otherwise can sometimes get transparent bg in png
+    const script = "function() { \
+      var style = document.createElement('style'); \
+      var text = document.createTextNode('body { background: #fff }'); \
+      style.setAttribute('type', 'text/css'); \
+      style.appendChild(text); \
+      document.head.insertBefore(style, document.head.firstChild); \
+    }";
+
+    page.evaluateJavaScript(script);
+
+    var filename = new Date();
+    page.render('tmp/artifacts/' + fixturePath + '.png');
+    pageRenderComplete();
+  });
+}
+
+capturePage();

scripts/pr-parser-preview.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+
+changes=( `git diff master --name-only` )
+
+for fixture in "${changes[@]}"
+do
+	# If one of the changed files is a fixture, hold onto it
+  if [[ $fixture == "fixtures/"* ]]; then
+    fixtures=$fixture,$fixtures
+  fi
+done
+
+if [[ $fixtures ]]; then
+  # Take a screenshot of the fixture
+  yarn phantomjs scripts/generate-fixture-preview.js $fixtures
+
+  screenshots=( `find tmp/artifacts -type f | grep ".html.png"` )
+
+  for screenshot in "${screenshots[@]}"
+  do
+    # Create a comment with a link to the screenshot
+    # and json output for the fixture
+    node scripts/comment-on-pr.js $screenshot
+  done
+else
+  echo "No fixtures added in this PR, so no preview needed"
+fi

yarn.lock

@@ -1270,6 +1270,10 @@ cipher-base@^1.0.0, cipher-base@^1.0.1:
   dependencies:
     inherits "^2.0.1"
 
+circle-github-bot@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/circle-github-bot/-/circle-github-bot-2.0.1.tgz#feefa4c7f788ce842307e00d290d264728689f69"
+
 circular-json@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"