chore: Add visual regression tests for Aik using examples

.eslintrc

@@ -22,7 +22,8 @@
   ],
 
   "globals": {
-    "expect": true
+    "expect": true,
+    "gemini": true
   },
 
   "rules": {
@@ -223,7 +224,7 @@
     "sort-vars": [0],
     "space-before-blocks": [2, "always"],
     "space-before-function-paren": [2, {
-      "anonymous": "always",
+      "anonymous": "never",
       "named": "never"
     }],
     "space-in-parens": [2, "never"],

.gemini.conf.js

@@ -0,0 +1,29 @@
+module.exports = {
+  rootUrl: "http://127.0.0.1:4444",
+  gridUrl: "http://127.0.0.1:5555/wd/hub",
+
+  browsers: {
+    phantomjs: {
+      desiredCapabilities: {
+        browserName: "phantomjs"
+      },
+      screenshotsDir: "./tests/visual-regression/references"
+    }
+  },
+
+  sets: {
+    phantomjs: {
+      files: ["tests/visual-regression/tests"],
+      browsers: ["phantomjs"]
+    }
+  },
+
+  system: {
+    plugins: {
+      "html-reporter": {
+        enabled: true,
+        path: "tests/visual-regression/reports"
+      }
+    }
+  }
+};

.gitignore

@@ -2,9 +2,10 @@
 test/.temp
 test/package.json
 _docs
-tests/*
-!tests/run.sh
-!tests/_package.json
+tests/heavy/*
+!tests/heavy/run.sh
+!tests/heavy/_package.json
+tests/visual-regression/reports
 packages
 lib
 

.travis.yml

@@ -4,6 +4,9 @@ cache:
     - node_modules
 notifications:
   email: false
+env:
+  global:
+    - CXX=g++-4.8
 node_js:
   - "4"
   - "6"
@@ -19,3 +22,10 @@ script:
   - npm run ci:coverage
 after_success:
   - npm run ci:github-release
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - gcc-4.8
+      - g++-4.8

package.json

@@ -42,7 +42,11 @@
     "release:major": "pmm major",
     "release:minor": "pmm minor",
     "release:patch": "pmm patch",
-    "test:heavy": "./tests/run.sh",
+    "pretest:heavy": "./tests/update-examples.sh",
+    "test:heavy": "./tests/heavy/run.sh",
+    "pretest:visual": "./tests/update-examples.sh",
+    "test:visual": "node ./tests/visual-regression/run.js",
+    "test:visual:update": "node ./tests/visual-regression/run.js update",
     "test": "jest",
     "test:coverage": "jest --coverage"
   },
@@ -100,7 +104,7 @@
   "devDependencies": {
     "babel-cli": "6.24.1",
     "babel-eslint": "7.2.3",
-    "babel-jest": "^20.0.3",
+    "babel-jest": "20.0.3",
     "babel-plugin-syntax-flow": "6.18.0",
     "babel-plugin-transform-async-to-generator": "6.24.1",
     "babel-plugin-transform-flow-strip-types": "6.22.0",
@@ -110,11 +114,14 @@
     "cz-conventional-changelog": "2.0.0",
     "eslint-plugin-flowtype": "2.34.0",
     "flow-bin": "0.48.0",
+    "gemini": "5.0.0-alpha.3",
+    "html-reporter": "0.2.0",
     "jest": "20.0.4",
     "lint-staged": "3.4.0",
     "pmm": "1.3.1",
     "pre-commit": "1.2.2",
     "prettier": "1.4.4",
+    "proq": "1.0.0",
     "rimraf": "2.6.1"
   },
   "config": {

tests/heavy/run.sh

@@ -0,0 +1,57 @@
+#!/bin/sh
+
+cd tests/heavy
+
+if [ ! -f "package.json" ]; then
+  cp _package.json package.json
+fi
+
+print_header() {
+  local color_title="\033[0;34m"
+  local color_reset="\033[0m"
+  local color_info="\033[1;33m"
+  echo ""
+  echo "${color_info}$1${color_reset}"
+  echo ""
+}
+
+#
+# DEV SERVER
+#
+
+print_header "Thinkin in React -r"
+AIK_TEST=1 ./../../cli.js examples/thinking-in-react/src/index.js -r
+
+print_header "Thinkin in React -r -n -o"
+AIK_TEST=1 ./../../cli.js examples/thinking-in-react/src/index.js -r -n -o
+
+print_header "Simple Counter in Cycle.js"
+AIK_TEST=1 ./../../cli.js examples/simple-counter-cyclejs/src/index.js
+
+print_header "Simple Counter in Cycle.js -p"
+AIK_TEST=1 ./../../cli.js examples/simple-counter-cyclejs/src/index.js -p 3232
+
+print_header "TodoMVC Vue"
+AIK_TEST=1 ./../../cli.js examples/todomvc-vue/src/index.js
+
+#
+# BUILD
+#
+
+print_header "Thinkin in React --build"
+AIK_TEST=1 ./../../cli.js examples/thinking-in-react/src/index.js --build -r
+
+print_header "Thinkin in React --build custom"
+AIK_TEST=1 ./../../cli.js examples/thinking-in-react/src/index.js --build custom -r
+
+print_header "Simple Counter in Cycle.js --build custom --base \"/test/\""
+AIK_TEST=1 ./../../cli.js examples/simple-counter-cyclejs/src/index.js --build custom2 --base "/test/"
+
+print_header "Simple Counter in Cycle.js --build --base \"/test/\""
+AIK_TEST=1 ./../../cli.js examples/simple-counter-cyclejs/src/index.js --build --base "/test/"
+
+#
+# AFTER RUN
+#
+
+cd ../..

tests/update-examples.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+cd tests/heavy
+
+if [ -d "examples" ]; then
+  cd examples
+  git pull
+  cd -
+else
+  git clone https://github.com/d4rkr00t/aik-examples.git examples
+fi

tests/visual-regression/run.js

@@ -0,0 +1,119 @@
+const { spawn, execSync } = require("child_process");
+const { join } = require("path");
+const chalk = require("chalk");
+const proq = require("proq");
+
+const tests = [
+  {
+    pattern: "Thinking in React",
+    args: ["examples/thinking-in-react/src/index.js", "-r"]
+  },
+  {
+    pattern: "Simple Counter in Cycle.js",
+    args: ["examples/simple-counter-cyclejs/src/index.js"]
+  },
+  {
+    pattern: "TodoMVC Vue",
+    args: ["examples/todomvc-vue/src/index.js"]
+  }
+];
+
+const command = process.argv[2] === "update" ? "update" : "test";
+const suite = command === "update" ? null : process.argv[2];
+
+function isReady(data) {
+  return data && data.match(/Compiled/) && data.match(/Server:/);
+}
+
+function startPhantom(cb) {
+  // eslint-disable-next-line
+  console.log(`${chalk.blue("Starting PhantomJS...")}`);
+  const phantomProcess = spawn("phantomjs", ["--webdriver=5555"], {
+    env: process.env,
+    cwd: process.cwd()
+  });
+  let wasCalled = false;
+
+  phantomProcess.stdout.on("data", () => {
+    if (!wasCalled) {
+      wasCalled = true;
+      cb(phantomProcess);
+    }
+  });
+}
+
+function runGeminiForPattern(pattern) {
+  try {
+    execSync(
+      `./node_modules/.bin/gemini ${command} --grep "${pattern}" --reporter flat`,
+      {
+        env: process.env,
+        cwd: process.cwd(),
+        stdio: "inherit"
+      }
+    );
+  } catch (error) {
+    return pattern;
+  }
+}
+
+function runSingleTest(testConfig, result) {
+  // eslint-disable-next-line
+  console.log(
+    `${chalk.blue("Running visual regression tests for:")} ${chalk.yellow(
+      testConfig.pattern
+    )}`
+  );
+  console.log(); // eslint-disable-line
+
+  return new Promise(resolve => {
+    const aikProcess = spawn("./../../cli.js", testConfig.args, {
+      env: process.env,
+      cwd: join(process.cwd(), "tests", "heavy")
+    });
+
+    aikProcess.stdout.on("data", data => {
+      if (isReady(data.toString())) {
+        result.push(runGeminiForPattern(testConfig.pattern));
+        aikProcess.kill("SIGTERM");
+
+        console.log(); // eslint-disable-line
+
+        resolve(result);
+      }
+    });
+  });
+}
+
+function main() {
+  startPhantom(phatomProcess => {
+    const selectedTests = suite
+      ? tests.filter(t => t.pattern.startsWith(suite))
+      : tests;
+
+    const promiseList = selectedTests.map(test => result =>
+      runSingleTest(test, result)
+    );
+
+    proq(promiseList, []).then(rawResults => {
+      phatomProcess.kill("SIGTERM");
+
+      const results = rawResults.filter(r => !!r);
+
+      console.log(chalk.dim("-----------------------")); // eslint-disable-line
+
+      if (results.length) {
+        console.log(); // eslint-disable-line
+        results.map(result =>
+          // eslint-disable-next-line
+          console.log(`${chalk.red("Error in:")} ${result}`)
+        );
+        process.exit(1);
+      } else {
+        console.log(chalk.green("DONE")); // eslint-disable-line
+      }
+    });
+  });
+}
+
+main();

tests/visual-regression/tests/aik-examples.js

@@ -0,0 +1,12 @@
+function test(suite) {
+  suite.setUrl("/").setCaptureElements("body").capture("plain", actions => {
+    actions
+      .setWindowSize(800, 800)
+      .wait(1000)
+      .waitForElementToShow("body", 5000);
+  });
+}
+
+gemini.suite("Thinking in React", test);
+gemini.suite("Simple Counter in Cycle.js", test);
+gemini.suite("TodoMVC Vue", test);