E2e tests now run against local dev server (#155)

* added local devServer. tests now defaults to use localhost:8000 and loads ajs from test-e2e/static/analytics.js
* extracted test / devServer configuration to config.js; devServer downloads analytics.js automatically
* gitignore static/analytics.js
* included test-e2e for prettier; added install for make test-e2e target
* updated make clean target

Author: King Long Tse

.gitignore

@@ -8,3 +8,5 @@ build/
 
 test-e2e/output
 test-e2e/staging
+test-e2e/static/analytics.js
+

Makefile

@@ -53,6 +53,7 @@ build: clean install
 # Remove temporary files and build artifacts.
 clean:
 	rm -rf *.log coverage build
+	rm -f ./test-e2e/static/analytics.js
 .PHONY: clean
 
 # Remove temporary files, build artifacts, and vendor dependencies.
@@ -80,12 +81,24 @@ test-browser: build
 test: lint test-browser
 .PHONY: test
 
+# Commands to start/stop devServer for e2e tests
+start_dev_server = (yarn ts-node ./test-e2e/devServer.ts)
+stop_dev_server = (pkill SIGTERM ajs-test-e2e-dev-server)
+
+start-dev-server:
+	$(call start_dev_server)
+
+stop-dev-server:
+	$(call stop_dev_server) || true
+
 # Run e2e tests
-test-e2e: 
+test-e2e: install stop-dev-server
+	yarn ts-node ./test-e2e/devServer.ts &
 	rm -rf ./test-e2e/output
 	rm -rf ./test-e2e/staging
 	mkdir ./test-e2e/staging
-	npx codeceptjs run --steps
+	yarn wait-on http://localhost:8000 && npx codeceptjs run --steps
+	$(call stop_dev_server)
 .PHONY: test-e2e
 
 .DEFAULT_GOAL = test

package.json

@@ -13,7 +13,7 @@
   "scripts": {
     "test": "make test",
     "lint": "eslint \"./{lib,test}/**/*.js\"",
-    "format": "prettier-eslint --write --list-different \"./{lib,test}/**/*.{js,json,md}\"",
+    "format": "prettier-eslint --write --list-different \"./{lib,test,test-e2e}/**/*.{ts,js,json,md}\"",
     "precommit": "lint-staged",
     "np": "np --no-publish",
     "cz": "git-cz"
@@ -65,7 +65,9 @@
     "@codeceptjs/mock-request": "^0.3.0",
     "@segment/analytics.js-integration": "^3.2.1",
     "@segment/eslint-config": "^4.0.0",
+    "@types/express": "^4.17.6",
     "@types/node": "^14.0.6",
+    "@types/node-fetch": "^2.5.7",
     "browserify": "13.0.0",
     "browserify-istanbul": "^2.0.0",
     "codeceptjs": "^2.6.5",
@@ -78,6 +80,7 @@
     "eslint-plugin-mocha": "^5.0.0",
     "eslint-plugin-react": "^7.9.1",
     "eslint-plugin-require-path-exists": "^1.1.8",
+    "express": "^4.17.1",
     "husky": "^0.14.3",
     "istanbul": "^0.4.3",
     "jquery": "^3.2.1",
@@ -93,6 +96,7 @@
     "karma-summary-reporter": "^1.5.0",
     "lint-staged": "^7.2.0",
     "mocha": "^2.2.5",
+    "node-fetch": "^2.6.0",
     "np": "^3.0.4",
     "phantomjs-prebuilt": "^2.1.7",
     "prettier-eslint-cli": "^4.7.1",
@@ -102,6 +106,7 @@
     "snyk": "^1.83.0",
     "ts-node": "^8.10.2",
     "typescript": "^3.9.3",
+    "wait-on": "^5.0.1",
     "watchify": "^3.7.0"
   },
   "lint-staged": {

test-e2e/ajs.test.ts

@@ -1,14 +1,10 @@
 Feature('AJS Bundle');
-
 const assert = require('assert');
-const testSite = 'https://www.library-test-site.com';
-const testWriteKey = 'TEWEu8XrcMVejk8GOulbEx7rHGyuuijV';
 
 Scenario(
   'User id is stored in cookies and local storage',
   async (I, testID) => {
-    I.amOnPage(testSite);
-    I.loadAJS(testWriteKey);
+    I.loadAJS({ local: true });
 
     I.startRecording(testID);
     I.click('#page-home');

test-e2e/config.js

@@ -0,0 +1,33 @@
+// These config are used by tests and devServer.
+
+// Port that local dev server binds to
+const devServerPort = 8000;
+
+// Settings used by the tests when running with test option {local: false}
+const remote = {
+  // Test website loaded by the tests
+  testSite: 'https://www.library-test-site.com',
+  // Test write key used when loading analytics.js
+  testWriteKey: 'WJq9vAlUO5l2255jMg7eEthbkDtq1svu',
+  // The test website has a "cdnHost" field that tells it where
+  // to load analytics.js from.
+  cdn: 'cdn.segment.com'
+};
+
+// Settings used by the tests when running with test option {local: true}
+const local = {
+  testSite: `http://localhost:${devServerPort}`,
+  testWriteKey: 'WJq9vAlUO5l2255jMg7eEthbkDtq1svu',
+  cdn: `localhost:${devServerPort}`,
+  // Local dev server will download analytics.js from
+  // ${cdn}/analytics.js/v1/${testWriteKey}/analytics.js
+  // and places it in the test-e2e/static directory
+  originCDN: 'cdn.segment.com',
+  // Port that local dev server binds to
+  devServerPort
+};
+
+module.exports = {
+  local,
+  remote
+};

test-e2e/devServer.ts

@@ -0,0 +1,52 @@
+process.title = 'ajs-test-e2e-dev-server'; // set a process title so that we can call pkill to stop the server using the title
+
+import * as express from 'express';
+import * as path from 'path';
+import * as config from './config';
+import fetch from 'node-fetch';
+import * as fs from 'fs';
+
+// handle SIGTERM so that the process returns exit code zero
+process.on('SIGTERM', () => {
+  console.info('SIGTERM received. Exiting.');
+  process.exit();
+});
+
+const app = express();
+const port = config.local.devServerPort;
+
+// download analytics.js to ./static directory if it is not already there
+(async () => {
+  const ajsPath = path.join(__dirname, 'static', 'analytics.js');
+  if (fs.existsSync(ajsPath)) {
+    console.log(`Found analytics.js locally at ${ajsPath}`);
+    return;
+  }
+  console.log(`analytics.js not found. Downloading ajs to ${ajsPath}`);
+  const resp = await fetch(
+    `https://${config.local.originCDN}/analytics.js/v1/${
+      config.local.testWriteKey
+    }/analytics.js`
+  );
+  if (!resp.ok) {
+    console.log(
+      `Failed downloading analytics.js: ${resp.status} ${resp.statusText}`
+    );
+    process.exit(1);
+  }
+  fs.writeFileSync(ajsPath, await resp.text());
+  if (fs.existsSync(ajsPath)) {
+    console.log(`Downloaded analytics.js to ${ajsPath}`);
+  }
+})();
+
+// the tests loads tests from localhost:8000/analytics.js/v1/<write-key>/analytics.js
+app.use(
+  '/analytics.js/v1/:writeKey/',
+  express.static(path.join(__dirname, 'static'))
+);
+app.use('/', express.static(path.join(__dirname, 'static')));
+
+app.listen(port, () =>
+  console.log(`test-e2e dev server listening at http://localhost:${port}`)
+);

test-e2e/static/index.html

@@ -0,0 +1,164 @@
+<html>
+  <head>
+    <title>AJS tester</title>
+  </head>
+  <body>
+    <form method="GET">
+      <input type="text" name="writeKey" placeholder="Write key" />
+      <input type="text" name="cdnHost" placeholder="cdn.segment.com" />
+      <button>Load</button>
+    </form>
+    <p id='status-msg'></p>
+
+    <button id='track-product-viewed' onclick="analytics.track('Product Viewed')">
+      Track: Product Viewed
+    </button>
+    <button id='track-checkout-started' onclick="analytics.track('Checkout Started')">
+      Track: Checkout Started
+    </button>
+    <button id='track-coupon-denied' onclick="analytics.track('Coupon Denied')">
+      Track: Coupon Denied
+    </button>
+    <br />
+    <button id='page-home' onclick="analytics.page('Home')">Page: Home</button>
+    <button id='page-about' onclick="analytics.page('About')">Page: About</button>
+    <button id='page-contact' onclick="analytics.page('Contact')">Page: Contact</button>
+    <br />
+    <button id='identify-fathy' onclick="analytics.identify('fathy')">Identify: fathy</button>
+    <button id='identify-spongebob' onclick="analytics.identify('spongebob')">
+      Identify: spongebob
+    </button>
+    <button
+      id='group'
+      onclick="analytics.group(
+        'group name',
+        {
+          'address': {
+            'city': 'Vancouver',
+            'country': 'Canada',
+            'postalCode': 'V6b3E2',
+            'state': 'BC',
+            'street': '21 Jump St'
+          },
+          'avatar': 'does not exist',
+          'createdAt': new Date(),
+          'description': 'a fake group',
+          'email': '[email protected]',
+          'employees': 3,
+          'id': 1,
+          'industry': 'sw eng',
+          'name': 'libweb',
+          'phone': '555-pizza',
+          'website': 'www.google.com',
+          'plan': 'business'
+        },
+        {
+          'integrations': {
+            'All': true
+          }
+        }, function() { console.log('group callback triggered')})"
+    >
+      Group
+    </button>
+
+    <button
+      id='alias'
+      onclick="analytics.alias('userId', 'previous id', {
+        'integrations': { 'All': true }
+      }, function(){ console.log('alias callback triggered')})"
+    >
+      Alias
+    </button>
+
+    <br />
+
+    <script>
+      const { searchParams } = new URL(document.location);
+      const writeKey = searchParams.get("writeKey");
+      const cdnHost = searchParams.get("cdnHost") || 'cdn.segment.com';
+      const status = (s) => (document.querySelector("p").innerText = s);
+
+      document.querySelector("input").value = writeKey;
+
+      if (writeKey) {
+        !(function () {
+          var analytics = (window.analytics = window.analytics || []);
+          if (!analytics.initialize)
+            if (analytics.invoked)
+              window.console &&
+                console.error &&
+                console.error("Segment snippet included twice.");
+            else {
+              analytics.invoked = !0;
+              analytics.methods = [
+                "trackSubmit",
+                "trackClick",
+                "trackLink",
+                "trackForm",
+                "pageview",
+                "identify",
+                "reset",
+                "group",
+                "track",
+                "ready",
+                "alias",
+                "debug",
+                "page",
+                "once",
+                "off",
+                "on",
+              ];
+              analytics.factory = function (t) {
+                return function () {
+                  var e = Array.prototype.slice.call(arguments);
+                  e.unshift(t);
+                  analytics.push(e);
+                  return analytics;
+                };
+              };
+              for (var t = 0; t < analytics.methods.length; t++) {
+                var e = analytics.methods[t];
+                analytics[e] = analytics.factory(e);
+              }
+              analytics.load = function (t, e) {
+                var n = document.createElement("script");
+                n.type = "text/javascript";
+                n.async = !0;
+                n.src =
+                  "http://" +
+                  cdnHost +
+                  "/analytics.js/v1/" +
+                  t +
+                  "/analytics.js";
+                var a = document.getElementsByTagName("script")[0];
+                a.parentNode.insertBefore(n, a);
+                analytics._loadOptions = e;
+              };
+              analytics.SNIPPET_VERSION = "4.1.0";
+              analytics.load(writeKey);
+              analytics.page();
+            }
+        })();
+
+        status("loading ajs");
+
+        analytics.ready(() => {
+          analytics.reset();
+          var f = function ({ payload, next, integrations }) {
+            next(payload);
+          };
+          var f2 = function ({ payload, next, integrations }) {
+            next(payload);
+          };
+          analytics.addSourceMiddleware(f);
+          analytics.addSourceMiddleware(f2);
+          return status(
+            `ajs ${analytics.VERSION} loaded, write key: ${analytics._integrations["Segment.io"].options.apiKey}`
+          );
+        });
+      } else {
+        status("ajs not loaded, enter a write key");
+      }
+    </script>
+  </body>
+</html>

test-e2e/steps.d.ts

@@ -1,4 +1,4 @@
-/// <reference types='codeceptjs' />
+// / <reference types='codeceptjs' />
 type steps_file = typeof import('./steps_file');
 
 declare namespace CodeceptJS {

test-e2e/steps_file.ts

@@ -1,9 +1,20 @@
 const fs = require('fs');
+const config = require('./config');
 // in this file you can append custom step methods to 'I' object
 
 module.exports = function() {
   return actor({
-    loadAJS: async function(testWriteKey) {
+    loadAJS: async function(options /* : {local: boolean}*/) {
+      let testSite = config.remote.testSite;
+      let testWriteKey = config.remote.testWriteKey;
+      let cdn = config.remote.cdn;
+      if (options.local) {
+        testSite = config.local.testSite;
+        testWriteKey = config.local.testWriteKey;
+        cdn = config.local.cdn;
+      }
+      this.amOnPage(testSite);
+      this.fillField('cdnHost', cdn);
       this.fillField('writeKey', testWriteKey);
       this.click('Load');