tests: switch from PhatomJS to headless Chromium

Author: ChALkeR

gulpfile.js

@@ -193,13 +193,4 @@ gulp.task("test-watch", ["watch-dev"], done => {
   }, done).start();
 });
 
-gulp.task("test-debug", ["watch-dev"], done => {
-  new karma.Server({
-    configFile: path.join(__dirname, "karma.conf.js"),
-    browsers: ["PhantomJSCustom", "Chrome"],
-    reporters: ["progress"],
-    debug: true
-  }, done).start();
-});
-
 gulp.task("default", ["watch"]);

karma.conf.js

@@ -1,3 +1,7 @@
+process.env.CHROMIUM_BIN = require("puppeteer").executablePath();
+
+require("./tests/chromium.callback.js");
+
 module.exports = function(config) {
   config.set({
     basePath: "",
@@ -17,7 +21,7 @@ module.exports = function(config) {
       { pattern: "tests/*/**/*.qml", included: false },
       { pattern: "tests/*/**/*.png", included: false }
     ],
-    browsers: ["PhantomJSCustom"],
+    browsers: ["ChromiumHeadlessCustom"],
     reporters: ["spec", "coverage"],
     coverageReporter: {
       type: "lcov",
@@ -26,11 +30,13 @@ module.exports = function(config) {
     browserDisconnectTolerance: 5,    // required for phantomjs in windows
     browserNoActivityTimeout: 100000, // required for phantomjs in windows
     customLaunchers: {
-      PhantomJSCustom: {
-        base: "PhantomJS",
-        options: {
-          onCallback: require("./tests/phantom.callback.js")
-        }
+      ChromiumHeadlessCustom: {
+        base: process.env.NOT_HEADLESS ? "Chromium" : "ChromiumHeadless",
+        flags: [
+          "--no-sandbox", // FIXME
+          "--force-device-scale-factor=1",
+          "--remote-debugging-port=9222"
+        ]
       }
     }
   });

package.json

@@ -9,6 +9,7 @@
     "babel-plugin-istanbul": "^3.1.2",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-preset-es2015": "^6.6.0",
+    "bhttp": "^1.2.4",
     "eslint": "^3.3.1",
     "eslint-plugin-babel": "^3.3.0",
     "gulp": "^3.6.2",
@@ -24,12 +25,14 @@
     "jasmine-core": "^2.4.1",
     "jsdom": "^9.3.0",
     "karma": "^1.2.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.0.2",
-    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-spec-reporter": "~0.0.26",
+    "mkdirp": "^0.5.1",
     "nyc": "^10.0.0",
-    "phantomjs-prebuilt": "^2.1.4",
+    "puppeteer": "^1.0.0",
     "qmlweb-parser": "^0.3.2",
     "remark-cli": "^2.0.0",
     "remark-lint": "^5.0.0",

tests/Render/runner.js

@@ -1,16 +1,12 @@
 (function() {
-  if (!window.top.callPhantom) {
-    console.log("Render tests require PhantomJS");
+  if (!window.top.callPhantom && !window.top.chromeScreenshot) {
+    console.log("Render tests require Puppeteer or PhantomJS");
     return;
   }
 
   jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
 
   function screenshot(div, options) {
-    if (!window.top.callPhantom) {
-      return undefined;
-    }
-
     var rect0 = div.getBoundingClientRect();
     var rect1 = window.parent.document.getElementById("context")
                                       .getBoundingClientRect();
@@ -21,13 +17,26 @@
       left: rect0.left + rect1.left
     };
 
-    var base64 = window.top.callPhantom("render", {
-      offset: offset,
-      fileName: options && options.fileName || undefined
-    });
-    var image = document.createElement("img");
-    image.src = "data:image/png;base64," + base64;
-    return image;
+    var image;
+    if (window.top.callPhantom) {
+      var base64 = window.top.callPhantom("render", {
+        offset: offset,
+        fileName: options && options.fileName || undefined
+      });
+      image = document.createElement("img");
+      image.src = "data:image/png;base64," + base64;
+      return image;
+    } else if (window.top.chromeScreenshot) {
+      image = document.createElement("img");
+      window.top.chromeScreenshot({
+        offset: offset,
+        fileName: options && options.fileName || undefined
+      }).then(function(data) {
+        image.src = "data:image/png;base64," + data;
+      });
+      return image;
+    }
+    throw new Error("Screenshots are not supported on this platform");
   }
 
   function image2canvas(img) {

tests/chromium.callback.js

@@ -0,0 +1,101 @@
+"use strict";
+
+/* eslint-env es6 */
+
+const http = require("http");
+const url = require("url");
+const querystring = require("querystring");
+const crypto = require("crypto");
+const path = require("path");
+const puppeteer = require("puppeteer");
+const bhttp = require("bhttp");
+const mkdirp = require("mkdirp");
+
+const secret = crypto.randomBytes(64).toString("base64");
+const port = 9100;
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+function mkdirpAsync(dir) {
+  return new Promise(resolve => mkdirp(dir, resolve));
+}
+
+async function attempt() {
+  await sleep(100);
+  try {
+    const res = await bhttp.get("http://localhost:9222/json");
+    for (const item of res.body) {
+      if (item.title === "Karma") return item;
+    }
+  } catch (e) {
+    // Do nothing on a purpose
+  }
+  return null;
+}
+
+async function main() {
+  let info;
+  while (!info) {
+    info = await attempt();
+  }
+  const browser = await puppeteer.connect({
+    browserWSEndpoint: info.webSocketDebuggerUrl
+  });
+  const pages = await browser.pages();
+  const page = pages[0];
+  page.evaluate(`
+    window.top.chromeScreenshot = async function(options = {}) {
+      const response = await fetch(
+        "http://localhost:${port}/screenshot" +
+        "?rand=" + Math.random().toString(36) +
+        "&options=" + encodeURIComponent(JSON.stringify(options)) +
+        "&secret=${encodeURIComponent(secret)}"
+      );
+      const base64 = await response.text();
+      return base64;
+    };
+  `);
+  http.createServer((req, res) => {
+    (async () => {
+      const parsed = url.parse(req.url);
+      if (parsed.pathname !== "/screenshot") throw new Error(404);
+      const query = querystring.parse(parsed.query);
+      if (query.secret !== secret) throw new Error(403);
+      const options = query.options ? JSON.parse(query.options) : {};
+      const fileName = options.fileName || "";
+      if (fileName && !/^[A-Za-z0-9_/]{1,50}\.png$/.test(fileName)) {
+        throw new Error(422);
+      }
+      const offset = options.offset || null;
+      const args = { omitBackground: true };
+      if (options.fileName && process.env.QMLWEB_SAVE_RENDER) {
+        const filepath = `tmp/Render/${options.fileName}`;
+        await mkdirpAsync(path.dirname(filepath));
+        args.path = filepath;
+      }
+      if (offset) {
+        args.clip = {
+          x: parseInt(offset.left, 10),
+          y: parseInt(offset.top, 10),
+          width: parseInt(offset.width, 10),
+          height: parseInt(offset.height, 10)
+        };
+      }
+      return page.screenshot(args);
+    })().then(data => {
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "OPTIONS, GET");
+      res.setHeader("Content-Type", "text/plain");
+      res.end(data.toString("base64"));
+    }).catch(e => {
+      const code = /^[0-9]{3}$/.test(e.message) ? parseInt(e.message, 10) : 500;
+      res.writeHead(code, { "Content-Type": "text/plain" });
+      res.end(`Error ${code}`);
+    });
+  }).listen(port);
+}
+
+main().catch(console.error);
+