fix(screenshots): prevent infinite blocking

.circleci/config.yml

@@ -4,6 +4,23 @@
 #
 version: 2.1
 
+commands:
+  install-deps-for-screenshot-taking:
+    description: Install headless Chromium dependencies
+    steps:
+      - run:
+          name: Install Headless Chromium dependencies
+          command: |
+            sudo apt-get install -yq \
+            ca-certificates fonts-liberation gconf-service libappindicator1 \
+            libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 \
+            libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 \
+            libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 \
+            libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 \
+            libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 \
+            libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget \
+            xdg-utils
+
 executors:
   node:
     docker:
@@ -39,7 +56,7 @@ jobs:
       - persist_to_workspace:
           root: .
           paths:
-            - '*'
+            - "*"
 
   build:
     executor: node
@@ -53,7 +70,7 @@ jobs:
       - persist_to_workspace:
           root: .
           paths:
-            - 'bin'
+            - "bin"
 
   lint:
     executor: node
@@ -71,6 +88,8 @@ jobs:
       - attach_workspace:
           at: .
 
+      - install-deps-for-screenshot-taking
+
       - run: npm run test
 
   release:

@types/index.d.ts

@@ -7,3 +7,8 @@ declare module "*.html" {
   const value: string;
   export default value;
 }
+
+declare module "*.txt" {
+  const value: string;
+  export default value;
+}

rollup.config.js

@@ -26,11 +26,11 @@ export default ["generate-examples-index"].map(name => {
     external,
     plugins: [
       nodeResolve({
-        extensions: [".ts", ".js", ".json", ".css", ".html"],
+        extensions: [".css", ".html", ".js", ".json", ".ts", ".txt"],
         preferBuiltins: true
       }),
       string({
-        include: ["**/*.{css,html}"]
+        include: ["**/*.{css,html,txt}"]
       }),
       typescript({
         objectHashIgnoreUnknownHack: true,

src/generate-examples-index/index.ts

@@ -1,6 +1,7 @@
-import Pageres from "pageres";
 import $ from "cheerio";
+import Pageres from "pageres";
 import childProcess from "child_process";
+import commonScreenshotScript from "./screenshot-script.js.txt";
 import crypto from "crypto";
 import fs from "fs";
 import globby from "globby";
@@ -530,6 +531,9 @@ class ContentBuilder {
     );
     const screenshotPage = $.load(example.html);
     screenshotPage("head").prepend(
+      $("<script>")
+        .attr("type", "text/javascript")
+        .text(commonScreenshotScript),
       $("<script>")
         .attr("type", "text/javascript")
         .text(this._screenshotScript)

src/generate-examples-index/screenshot-script.js.txt

@@ -0,0 +1,12 @@
+/* global window: false */
+
+/**
+ * Simulates confirmation usind window.confirm and window.alert otherwise the
+ * screenshot generator would just hang forever.
+ */
+(function() {
+  window.alert = function() {};
+  window.confirm = function() {
+    return true;
+  };
+})();

test/generate-examples-index/basic.test.ts

@@ -3,60 +3,76 @@ import childProcess from "child_process";
 import fs from "fs";
 import path from "path";
 import tmp from "tmp-promise";
+import util from "util";
 import { expect } from "chai";
 
-const exec = childProcess.execSync;
+const exec = util.promisify(childProcess.exec);
 const executable = path.resolve(
   `${exec("npm root")}/../bin/generate-examples-index.js`
 );
 const examplesPath = path.resolve(`${__dirname}/examples`);
 
 const baseURL = "https://visjs.github.io/vis-test";
+const nmExamples = 6;
 const title = "Test Examples";
 
 describe("generate-examples-index", function(): void {
-  const { name: output } = tmp.fileSync({ mode: 0o600, postfix: "html" });
+  const { name: outputDir } = tmp.dirSync({ mode: 0o700 });
+  const outputIndex = path.join(outputDir, "index.html");
+  const outputScreenshots = path.join(outputDir, "thumbnails");
   let $index: CheerioStatic;
 
-  it("built", function(): void {
+  it("is executable built", function(): void {
     expect(
       fs.existsSync(executable),
       "The built executable has to be present for any of the following tests to pass."
     ).to.be.true;
   });
 
-  it("generate index", function(): void {
-    this.timeout(60000);
+  it("generate index", async function(): Promise<void> {
+    this.timeout(10 * 60 * 1000);
 
-    exec(
+    await exec(
       [
         "node",
         executable,
-        "-c test-element",
-        "-i",
-        `-d "${examplesPath}"`,
-        `-o ${output}`,
-        `-t "${title}"`,
-        `-w "${baseURL}"`
+        "--container-id test-element",
+        "--index",
+        "--screenshots",
+        `--examples-directory "${examplesPath}"`,
+        `--output "${outputIndex}"`,
+        `--title "${title}"`,
+        `--web-url "${baseURL}"`
       ].join(" ")
     );
-
-    $index = $.load(fs.readFileSync(output, "utf-8"));
   });
 
   describe("verify index", function(): void {
+    it("valid HTML", function(): void {
+      $index = $.load(fs.readFileSync(outputIndex, "utf-8"));
+    });
+
     it("title", function(): void {
       expect($index("title").text()).to.equal(title);
     });
 
-    it("examples", function(): void {
+    it("links", function(): void {
       expect(
         $index(".example-link").length,
-        "There should be 4 links to examples."
-      ).to.equal(4);
+        `There should be ${nmExamples} links to examples.`
+      ).to.equal(nmExamples);
+    });
+
+    it("screenshots", function(): void {
+      expect(
+        fs.readdirSync(outputScreenshots),
+        `There should be ${nmExamples} screenshots.`
+      ).have.lengthOf(nmExamples);
     });
 
-    for (const i of [0, 1, 2, 3]) {
+    for (const i of new Array(nmExamples)
+      .fill(null)
+      .map((_value, i): number => i)) {
       describe(`example ${i + 1}`, function(): void {
         function getNthExample(n: number): Cheerio {
           return $index(".example-link").eq(n);

test/generate-examples-index/examples/example-alert.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test | Alert</title>
+
+    <script type="text/javascript" src="../dist/test.min.js"></script>
+
+    <script type="text/javascript">
+      alert("This is just a test.");
+    </script>
+  </head>
+
+  <body>
+    <div id="test-element"></div>
+  </body>
+</html>

test/generate-examples-index/examples/example-confirm.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test | Confirm</title>
+
+    <script type="text/javascript" src="../dist/test.min.js"></script>
+
+    <script type="text/javascript">
+      Confirm("This is just a test.");
+    </script>
+  </head>
+
+  <body>
+    <div id="test-element"></div>
+  </body>
+</html>