From b0050f7571ee1c1e57891002db1a7215fbc5f2e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Vy=C4=8D=C3=ADtal?=
 <tom.vycital@gmail.com>
Date: Sat, 5 Oct 2019 14:54:32 +0200
Subject: [PATCH] fix(screenshots): prevent infinite blocking

Global functions alert and confirm block and never return without user
action which won't happen in headless mode. This fix makes these
functions return immediately.

This also improves tests to catch more issues with screenshots (like
timing out or not generating one per example).
---
 .circleci/config.yml                          | 23 +++++++-
 @types/index.d.ts                             |  5 ++
 rollup.config.js                              |  4 +-
 src/generate-examples-index/index.ts          |  6 ++-
 .../screenshot-script.js                      | 25 ---------
 .../screenshot-script.js.txt                  | 12 +++++
 test/generate-examples-index/basic.test.ts    | 52 ++++++++++++-------
 .../examples/example-alert.html               | 16 ++++++
 .../examples/example-confirm.html             | 16 ++++++
 9 files changed, 111 insertions(+), 48 deletions(-)
 delete mode 100644 src/generate-examples-index/screenshot-script.js
 create mode 100644 src/generate-examples-index/screenshot-script.js.txt
 create mode 100644 test/generate-examples-index/examples/example-alert.html
 create mode 100644 test/generate-examples-index/examples/example-confirm.html

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 150dd5293..d59b8373c 100644
--- a/.circleci/config.yml
+++ b/.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:
diff --git a/@types/index.d.ts b/@types/index.d.ts
index 4112c4167..b3ebf6fc7 100644
--- a/@types/index.d.ts
+++ b/@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;
+}
diff --git a/rollup.config.js b/rollup.config.js
index 89217fdef..cefee1803 100644
--- a/rollup.config.js
+++ b/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,
diff --git a/src/generate-examples-index/index.ts b/src/generate-examples-index/index.ts
index 9963379cd..1fddedb9b 100644
--- a/src/generate-examples-index/index.ts
+++ b/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)
diff --git a/src/generate-examples-index/screenshot-script.js b/src/generate-examples-index/screenshot-script.js
deleted file mode 100644
index b1b6f10e5..000000000
--- a/src/generate-examples-index/screenshot-script.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/* global window: false */
-
-/**
- * Adds layout seed to Network unless supplied explicitly. The intention here
- * is to make the layout stable that is to keep the layout the same on every
- * screenshot.
- */
-(() => {
-  window.vis = {};
-  let Network = undefined;
-
-  Object.defineProperty(window.vis, "Network", {
-    get() {
-      return function StableNetwork(container, data, options, ...args) {
-        options = options || {};
-        options.layout = options.layout || {};
-        options.layout.randomSeed = options.layout.randomSeed || 0;
-        return new Network(container, data, options, ...args);
-      };
-    },
-    set(value) {
-      Network = value;
-    }
-  });
-})();
diff --git a/src/generate-examples-index/screenshot-script.js.txt b/src/generate-examples-index/screenshot-script.js.txt
new file mode 100644
index 000000000..473d269ba
--- /dev/null
+++ b/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;
+  };
+})();
diff --git a/test/generate-examples-index/basic.test.ts b/test/generate-examples-index/basic.test.ts
index c056d39fd..6b9eb6b73 100644
--- a/test/generate-examples-index/basic.test.ts
+++ b/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);
diff --git a/test/generate-examples-index/examples/example-alert.html b/test/generate-examples-index/examples/example-alert.html
new file mode 100644
index 000000000..91b310e66
--- /dev/null
+++ b/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>
diff --git a/test/generate-examples-index/examples/example-confirm.html b/test/generate-examples-index/examples/example-confirm.html
new file mode 100644
index 000000000..e4639974b
--- /dev/null
+++ b/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>