feat(e2e-tests): optionally take snapshots

packages/core/package.json

@@ -25,6 +25,7 @@
     "build": "stencil build",
     "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server\"",
     "e2e": "node ./scripts/e2e-test-runner.js",
+    "snapshot": "node ./scripts/e2e-test-runner.js --snapshot",
     "test": "jest --no-cache",
     "test.watch": "jest --watch --no-cache",
     "clean": "rm -rf dist",

packages/core/scripts/Snapshot.js

@@ -0,0 +1,73 @@
+'use strict';
+
+const fs = require('fs'); // temp hack for now...
+const http = require('http');
+
+class Snapshot {
+  constructor(options) {
+    this.appId = (options && options.appId) || 'test_app';
+    this.domain = (options && options.domain) || 'localhost:8080';
+    this.groupId = (options && options.groupId) || 'test_group';
+    this.sleepTime = (options && options.sleepBetweenSpecs) || 500;
+    this.platformId =
+      options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.platform_id;
+    this.platformIndex =
+      options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.platform_index;
+    this.platformCount =
+      options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.platform_count;
+    this.width =
+      (options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.width) || -1;
+    this.height =
+      (options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.height) || -1;
+  }
+
+  async takeScreenshot(driver, options) {
+    this._resizeWindow(driver);
+    await this._allowForAnnimation();
+    const data = await this._takeScreenshot(driver, options && options.name);
+    return this._postScreenshot(data);
+  }
+
+  _allowForAnnimation() {
+    return new Promise((resolve, reject) => {
+      setTimeout(function() {
+        resolve();
+      }, this.sleepTime);
+    });
+  }
+
+  _postScreenshot(data) {
+    return new Promise((resolve, reject) => {
+      let base64Data = data.png_base64.replace(/^data:image\/png;base64,/, '');
+      fs.writeFile(`${data.description}.png`, base64Data, 'base64', function(err) {
+        if (err) {
+          console.log(err);
+          reject(err);
+        } else {
+          resolve();
+        }
+      });
+    });
+  }
+
+  _resizeWindow(driver) {
+    return driver
+      .manage()
+      .window()
+      .setSize(this.width, this.height);
+  }
+
+  async _takeScreenshot(driver, name) {
+    const png = await driver.takeScreenshot();
+    const url = await driver.getCurrentUrl();
+
+    // TODO: There are more things to add, not sure how yet for some
+    return Promise.resolve({
+      description: name,
+      url: url,
+      png_base64: png
+    });
+  }
+}
+
+module.exports = Snapshot;

packages/core/scripts/e2e-test-runner.js

@@ -24,14 +24,23 @@ function getTestFiles() {
   });
 }
 
+function processCommandLine() {
+  process.argv.forEach(arg => {
+    if (arg === '--snapshot') {
+      process.env.takeScreenshots = true;
+    }
+  });
+}
+
 (async () => {
   const mocha = new Mocha({
     timeout: 5000,
     slow: 2000
   });
 
+  processCommandLine();
+
   const devServer = await startDevServer();
-  // process.env.takeScreenshots = true;
 
   const files = await getTestFiles();
   files.forEach(f => mocha.addFile(f));

packages/core/scripts/register-e2e-test.js

@@ -2,31 +2,33 @@
 
 const fs = require('fs');
 const webdriver = require('selenium-webdriver');
+const Snapshot = require('./Snapshot');
 
-function takeScreenshot(driver, name) {
-  return driver.takeScreenshot().then(function(data) {
-    var base64Data = data.replace(/^data:image\/png;base64,/, '');
-    fs.writeFile(`${name}.png`, base64Data, 'base64', function(err) {
-      if (err) console.log(err);
+let snapshotTool;
+function getSnapshotTool() {
+  if (!snapshotTool) {
+    snapshotTool = new Snapshot({
+      platformDefaults: {
+        params: {
+          height: 800,
+          width: 400
+        }
+      }
     });
-  });
-}
-
-function allowForAnnimation() {
-  return new Promise((resolve, reject) => {
-    setTimeout(function() {
-      resolve();
-    }, 300);
-  });
+  }
+  return snapshotTool;
 }
 
 function registerE2ETest(desc, tst) {
-  it(desc, async () => {
+  // NOTE: Do not use an arrow function here because: https://mochajs.org/#arrow-functions
+  it(desc, async function() {
     const driver = new webdriver.Builder().forBrowser('chrome').build();
     await tst(driver);
     if (process.env.takeScreenshots) {
-      await allowForAnnimation();
-      takeScreenshot(driver, desc);
+      const snapshot = getSnapshotTool();
+      await snapshot.takeScreenshot(driver, {
+        name: this.test.fullTitle()
+      });
     }
     return driver.quit();
   });