Added e2e tests

Author: bryanforbes

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
+dist-e2e/
 coverage/

bs-config.json

@@ -4,6 +4,7 @@
     "./intern.json"
   ],
   "open": false,
+  "logLevel": "silent",
   "logConnections": false,
   "server": {
     "baseDir": [ "dist", "." ],

e2e/app.e2e-spec.ts

@@ -0,0 +1,30 @@
+const { describe, it, before } = intern.getPlugin('interface.bdd');
+const { expect } = intern.getPlugin('chai');
+
+import Home from './pages/Home';
+
+describe('E2E Tests', () => {
+	let page: Home;
+
+	before(async ({ remote }) => {
+		page = new Home(remote);
+		await page.load();
+	});
+
+	it('should begin at /dashboard', async () => {
+		expect(await page.getCurrentUrl()).to.match(/\/dashboard$/);
+		expect(await page.getDashboard()).to.exist;
+	});
+
+	it('should navigate to /heroes when clicking Heroes', async () => {
+		await page.clickHeroesNav();
+		await page.waitForHeroes();
+		expect(await page.getCurrentUrl()).to.match(/\/heroes$/);
+	});
+
+	it('should navigate to /about when clicking About', async () => {
+		await page.clickAboutNav();
+		await page.waitForAbout();
+		expect(await page.getCurrentUrl()).to.match(/\/about$/);
+	});
+});

e2e/pages/Home.ts

@@ -0,0 +1,76 @@
+import Page from './Page';
+
+export async function load() {
+	const { parent: remote } = this;
+	await remote.setFindTimeout(5000);
+	await remote.get('dist/index.html');
+	await remote.findDisplayedByCssSelector('my-app[ng-version]');
+}
+
+export default class Home extends Page {
+	protected _app = 'my-app[ng-version]';
+	protected _dashboard = 'my-app app-dashboard';
+	protected _heroes = 'my-app app-heroes';
+	protected _about = 'my-app app-about';
+
+	async load() {
+		const { _remote: remote } = this;
+		await remote.setFindTimeout(5000);
+		await remote.get('dist/index.html');
+		await this.waitForApp();
+	}
+
+	async getApp() {
+		return this._find(this._app);
+	}
+
+	async getNav() {
+		return this._find('my-app > nav');
+	}
+
+	async getDashboard() {
+		return this._find(this._dashboard);
+	}
+
+	async getHeroes() {
+		return this._find(this._heroes);
+	}
+
+	async getAbout() {
+		return this._find(this._about);
+	}
+
+	async getCurrentUrl() {
+		return this._remote.getCurrentUrl();
+	}
+
+	async clickHeroesNav() {
+		await this._clickNav('/heroes');
+	}
+
+	async clickAboutNav() {
+		await this._clickNav('/about');
+	}
+
+	async waitForApp() {
+		return this._findDisplayed(this._app);
+	}
+
+	async waitForDashboard() {
+		return this._findDisplayed(this._dashboard);
+	}
+
+	async waitForHeroes() {
+		return this._findDisplayed(this._heroes);
+	}
+
+	async waitForAbout() {
+		return this._findDisplayed(this._about);
+	}
+
+	protected async _clickNav(route: string) {
+		const nav = await this.getNav();
+		const link = await nav.findByCssSelector(`a[routerLink="${route}"]`);
+		await link.click();
+	}
+}

e2e/pages/Page.ts

@@ -0,0 +1,15 @@
+import { Remote } from 'intern/lib/executors/Node';
+
+export default class Page {
+	constructor (protected _remote: Remote) {}
+
+	protected async _find(selector: string) {
+		const { _remote } = this;
+		return _remote.findByCssSelector(selector);
+	}
+
+	protected async _findDisplayed(selector: string) {
+		const { _remote } = this;
+		return _remote.findDisplayedByCssSelector(selector);
+	}
+}

e2e/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es5",
+      "es2015.core",
+      "es2015.collection",
+      "es2015.symbol",
+      "es2015.symbol.wellknown",
+      "es2015.iterable",
+      "dom"
+    ],
+    "importHelpers": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "outDir": "../dist-e2e",
+    "typeRoots": [
+      "../node_modules/@types",
+      "../node_modules/intern/types"
+    ],
+    "types": [
+      "intern"
+    ]
+  }
+}

intern.json

@@ -31,10 +31,13 @@
       "app/shared/twain.component.spec"
     ]
   },
+  "functionalSuites": [
+    "dist-e2e/app.e2e-spec"
+  ],
   "configs": {
     "coverage": {
       "reporters+": "htmlcoverage",
-      "excludeInstrumentation": "(?:node_modules|testing)\\/|\\.spec\\.js$|dist\\/[^\\/]+\\.js$"
+      "excludeInstrumentation": "(?:node_modules|testing|e2e)\\/|[.-]spec\\.js$|dist\\/[^\\/]+\\.js$"
     },
 
     "wd": {

package.json

@@ -4,18 +4,23 @@
   "main": "index.js",
   "license": "BSD-3-Clause",
   "scripts": {
-    "preci": "npm run clean && npm run lint && npm run dist",
+    "preci": "npm run clean && npm run lint && npm run build",
     "ci": "npm run test",
-    "clean": "rimraf dist coverage",
+    "clean": "rimraf dist dist-e2e coverage",
     "copy": "cpx \"src/**/*.{js,html,css}\" dist",
     "copy:watch": "cpx \"src/**/*.{js,html,css}\" dist --watch",
-    "build": "tsc -p src/",
-    "build:watch": "tsc -p src/ -w",
-    "dist": "concurrently \"npm run build\" \"npm run copy\"",
+
+    "build": "concurrently --names \"tsc-src,tsc-e2e,copy\" \"npm run build:src\" \"npm run build:e2e\" \"npm run copy\"",
+    "build:watch": "concurrently --names \"tsc-src,tsc-e2e,copy\" \"npm run build:src:watch\" \"npm run build:e2e:watch\" \"npm run copy:watch\"",
+
+    "build:src": "tsc -p src/",
+    "build:src:watch": "tsc -p src/ -w",
+    "build:e2e": "tsc -p e2e/",
+    "build:e2e:watch": "tsc -p e2e/ -w",
+
     "lint": "tslint -c tslint.json \"./src/**/*.ts\"",
     "serve": "lite-server -c=bs-config.json",
-    "prestart": "npm run dist",
-    "start": "concurrently \"npm run build:watch\" \"npm run copy:watch\" \"npm run serve\"",
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
     "test": "intern config=@wdcoverage"
   },
   "dependencies": {