Adds basic end to end test (#154)

* Added basic end to end test that uses a test website to load analytics.js, clicks around, and captures the network traffic and compares cookies / local storage values. Saves captured network traffic to a staging directory for comparison against a reference later.

Co-authored-by: Julio <julio.farah@gmail.com>

Author: King Long Tse

.gitignore

@@ -4,4 +4,7 @@ package-lock.json
 junit-reports
 
 build/
-.DS_Store
+.DS_Store
+
+test-e2e/output
+test-e2e/staging

.npmignore

@@ -3,6 +3,9 @@
 node_modules
 test/**/*
 lib/**/*
+test-e2e/**/*
+steps_file.ts
+steps.d.ts
 .eslintrc
 .gitignore
 .nvmrc

HISTORY.md

@@ -1,3 +1,7 @@
+# 3.13.6 / 2020-06-15
+
+- test: test analytics.js from a test website
+
 # 3.13.5 / 2020-06-08
 
 - refactor: improve typescript support

Makefile

@@ -80,6 +80,14 @@ test-browser: build
 test: lint test-browser
 .PHONY: test
 
+# Run e2e tests
+test-e2e: 
+	rm -rf ./test-e2e/output
+	rm -rf ./test-e2e/staging
+	mkdir ./test-e2e/staging
+	npx codeceptjs run --steps
+.PHONY: test-e2e
+
 release-test:
 	sh .circleci/changelog-check.sh
 .PHONY: release-test

codecept.conf.js

@@ -0,0 +1,45 @@
+const { setHeadlessWhen } = require('@codeceptjs/configure');
+
+// turn on headless mode when running with HEADLESS=true environment variable
+// HEADLESS=true npx codecept run
+setHeadlessWhen(process.env.HEADLESS);
+
+exports.config = {
+  tests: './test-e2e/*.test.ts',
+  output: './test-e2e/output',
+  helpers: {
+    Puppeteer: {
+      url: 'http://www.library-test-site.com/',
+      show: false,
+      windowSize: '1200x900',
+      args: ['--disable-web-security']
+    },
+    MockRequestHelper: {
+      require: '@codeceptjs/mock-request',
+      mode: 'record',
+      recordIfMissing: true,
+      recordFailedRequests: false,
+      expiresIn: null,
+      persisterOptions: {
+        keepUnusedRequests: false,
+        fs: {
+          recordingsDir: './test-e2e/output'
+        }
+      }
+    }
+  },
+  include: {
+    I: './test-e2e/steps_file.ts'
+  },
+  bootstrap: null,
+  mocha: {},
+  name: 'analytics.js-core',
+  plugins: {
+    retryFailedStep: {
+      enabled: true
+    },
+    screenshotOnFail: {
+      enabled: true
+    }
+  }
+};

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "allowJs": true
+  }
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@segment/analytics.js-core",
   "author": "Segment <friends@segment.com>",
-  "version": "3.13.5",
+  "version": "3.13.6",
   "description": "The hassle-free way to integrate analytics into any web application.",
   "keywords": [
     "analytics",
@@ -62,11 +62,13 @@
     "uuid": "^3.4.0"
   },
   "devDependencies": {
+    "@codeceptjs/mock-request": "^0.3.0",
     "@segment/analytics.js-integration": "^3.2.1",
     "@segment/eslint-config": "^4.0.0",
     "@types/node": "^14.0.6",
     "browserify": "13.0.0",
     "browserify-istanbul": "^2.0.0",
+    "codeceptjs": "^2.6.5",
     "codecov": "^3.0.2",
     "compat-trigger-event": "^1.0.0",
     "component-each": "^0.2.6",
@@ -95,6 +97,7 @@
     "phantomjs-prebuilt": "^2.1.7",
     "prettier-eslint-cli": "^4.7.1",
     "proclaim": "^3.4.1",
+    "puppeteer": "^3.3.0",
     "sinon": "^1.7.3",
     "snyk": "^1.83.0",
     "ts-node": "^8.10.2",

test-e2e/ajs.test.ts

@@ -0,0 +1,28 @@
+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.startRecording(testID);
+    I.click('#page-home');
+    I.click('#track-checkout-started');
+    I.click('#identify-fathy');
+
+    await I.stopRecording(testID);
+
+    const userId = await I.grabCookie('ajs_user_id');
+    assert.equal(userId.value, '%22fathy%22');
+
+    const lsUserId = await I.executeScript(() => {
+      return localStorage.getItem('ajs_user_id');
+    });
+    assert.equal(lsUserId, `"fathy"`);
+  }
+).injectDependencies({ testID: 'cookies-and-local-storage' });

test-e2e/steps.d.ts

@@ -0,0 +1,16 @@
+/// <reference types='codeceptjs' />
+type steps_file = typeof import('./steps_file');
+
+declare namespace CodeceptJS {
+  interface SupportObject {
+    I: CodeceptJS.I;
+  }
+  interface CallbackOrder {
+    [0]: CodeceptJS.I;
+  }
+  interface Methods extends CodeceptJS.Puppeteer {}
+  interface I extends ReturnType<steps_file> {}
+  namespace Translation {
+    interface Actions {}
+  }
+}

test-e2e/steps_file.ts

@@ -0,0 +1,44 @@
+const fs = require('fs');
+// in this file you can append custom step methods to 'I' object
+
+module.exports = function() {
+  return actor({
+    loadAJS: async function(testWriteKey) {
+      this.fillField('writeKey', testWriteKey);
+      this.click('Load');
+
+      // Wait for AJS to load
+      this.waitForText(`loaded`, 5, '#status-msg');
+    },
+
+    startRecording: function(testID) {
+      this.startMocking();
+      this.mockServer(server => {
+        server.any('https://api.segment.io/*').recordingName(testID);
+      });
+    },
+
+    stopRecording: async function(testID) {
+      await this.stopMocking();
+      const dirs = fs.readdirSync('./test-e2e/output', { encoding: 'utf8' });
+      let outputFilePath = '';
+      dirs.forEach(dir => {
+        if (dir.includes(testID)) {
+          outputFilePath = `./test-e2e/output/${dir}/recording.har`;
+        }
+      });
+
+      if (outputFilePath.length == 0)
+        throw new Error(`cannot find directory for ${testID}`);
+      if (!fs.existsSync(outputFilePath)) {
+        throw new Error(`cannot find HAR file for ${testID}`);
+      }
+
+      const stagingFilePath = `./test-e2e/staging/${testID}.har`;
+
+      fs.renameSync(outputFilePath, stagingFilePath);
+
+      return stagingFilePath;
+    }
+  });
+};