Tidy deploy code

Make generate.js a module that is called by deploy.js.

Add a list of browsers tested to generated index.html.

Author: gitgrimbo

src/results-page/deploy.js

@@ -1,6 +1,14 @@
 /* eslint-env node, shelljs */
+const fs = require("fs");
 const path = require("path");
 require("shelljs/global");
+const generate = require("./generate");
+
+function generateIndexHtml() {
+  const resultsPath = "./results/";
+  const filename = path.resolve(__dirname, "index.html");
+  return generate(filename, resultsPath);
+}
 
 const ghTemp = "./temp/gh-pages";
 const repo = require("../../package.json").repository.url;
@@ -13,15 +21,18 @@ if (!which("git")) {
 }
 
 rm("-rf", ghTemp);
-mkdir("-p", ghTemp);
 
+// git clone will also create the ghTemp folder
 exec("git clone " + repo + " --branch gh-pages --single-branch " + ghTemp);
 
-exec("node src/results-page/generate.js", { silent: true })
-  .to(path.resolve(ghTemp, "index.html"));
+generateIndexHtml()
+  .then(html => {
+    fs.writeFileSync(path.resolve(ghTemp, "index.html"), html);
 
-cd(ghTemp);
+    cd(ghTemp);
 
-exec("git add .");
-exec("git commit --amend --no-edit");
-exec("git push -f origin gh-pages");
+    exec("git add .");
+    exec("git commit --amend --no-edit");
+    exec("git push -f origin gh-pages");
+  })
+  .catch(err => console.error(err));

src/results-page/generate.js

@@ -7,10 +7,7 @@ const cacheQuery = require("../shared/cache-query");
 const decompress = require("../shared/entries-utils").decompress;
 const makeTableData = require("../cli/show-captures/show-captures").makeTableData;
 
-const resultsPath = "./results/";
-const filename = path.resolve(__dirname, "index.html");
-
-function loadResults() {
+function loadResults(resultsPath) {
   return fsp.readdir(resultsPath)
     .then(files => {
       // full paths
@@ -25,19 +22,27 @@ function resultsToTemplateData(results) {
     r.isCached = null;
     if (r.entries) {
       r.entries = decompress(r.entries);
-      r.entries.forEach(e => e.isCached = cacheQuery.isEntryCached(e));
+      r.entries.forEach(e => {
+        e.isCached = cacheQuery.isEntryCached(e);
+      });
       r.isCached = cacheQuery.areEntriesCached(r.entries);
     }
     const ua = useragent.parse(r.userAgent);
-    r.name = ua.browser + " " + ua.version + " " + ua.os + " / " + r.tag;
+    r.browser = ua.browser + " " + ua.version + " " + ua.os;
+    r.name = r.browser + " / " + r.tag;
     return r;
   });
 }
 
-function generate(templateStr, results) {
+function generateFromTemplateAndResults(templateStr, results) {
   let tableData = null;
   results = resultsToTemplateData(results);
 
+  const browsersTested = Object.keys(results.reduce((ob, r) => {
+    ob[r.browser] = 1;
+    return ob;
+  }, {}));
+
   const configurations = [
     {
       title: "Default options",
@@ -78,7 +83,9 @@ function generate(templateStr, results) {
     results.forEach(r => {
       r.isCached = null;
       if (r.entries) {
-        r.entries.forEach(e => e.isCached = cacheQuery.isEntryCached(e, opts));
+        r.entries.forEach(e => {
+          e.isCached = cacheQuery.isEntryCached(e, opts);
+        });
         r.isCached = cacheQuery.areEntriesCached(r.entries, opts);
       }
       return r;
@@ -87,6 +94,7 @@ function generate(templateStr, results) {
   }
 
   const data = {
+    browsersTested,
     configurations,
     funcs: {
       getResults,
@@ -105,12 +113,16 @@ function generate(templateStr, results) {
     compileDebug: true
   };
   const html = ejs.render(String(templateStr), data, renderOpts);
-  console.log(html);
+  return html;
 }
 
-Promise.all([fsp.readFile(filename), loadResults()])
-  .then(things => {
-    const templateStr = things[0];
-    const results = things[1];
-    generate(templateStr, results);
-  });
+function generate(filename, resultsPath) {
+  return Promise.all([fsp.readFile(filename), loadResults(resultsPath)])
+    .then(things => {
+      const templateStr = things[0];
+      const results = things[1];
+      return generateFromTemplateAndResults(templateStr, results);
+    });
+}
+
+module.exports = generate;

src/results-page/index.html

@@ -49,6 +49,13 @@
 <p>If a single resource is considered to be cached/uncached, then its row will be green/red.
 If a cached/uncached determination cannot be accurately made, the row is uncoloured.
 
+<p>Browsers tested:
+<ul>
+<% browsersTested.forEach(browser => { %>
+<li><%= browser %>
+<% }); %>
+</ul>
+
 <hr>
 
 <% configurations.forEach((configuration, configurationIndex) => { %>
@@ -67,9 +74,9 @@ <h1><%= configuration.title %></h1>
 
 </div>
 
-<% funcs.getResults(configurationIndex).forEach(result => { %>
+<% funcs.getResults(configurationIndex).forEach((result, resultIdx) => { %>
 
-<h2><%= result.name %></h2>
+<h2><a name="result-<%= configurationIndex %>-<%= resultIdx %>"></a><%= result.name %></h2>
 
 Full User Agent: <code><%= result.userAgent %></code>
 <br>