e2e tests using protractor

Author: butters16

README.md

@@ -5,6 +5,18 @@ Based on the awesome [unit testing example](https://github.com/roblouie/unit-tes
 
 Clone repo, run `npm install`.
 
+Unit Tests
+----------
+
 To run the tests, run `npm test`.
 
 See the example test in `src/app/app.component.spec.ts` for an example of a component test.
+
+End-To-End Tests (Browser-Only)
+-------------------------------
+
+To serve the app, run `ionic serve`.
+
+To run the end-to-end tests, run (while the app is being served) `npm run e2e`.
+
+See the example end-to-end test in `e2e/app.e2e-spec.ts`.

e2e/app.e2e-spec.ts

@@ -0,0 +1,21 @@
+import { Page } from './app.po';
+
+describe('App', function() {
+  let page: Page;
+
+  beforeEach(() => {
+    page = new Page();
+  });
+
+  describe('default screen', () => {
+    beforeEach(() => {
+      page.navigateTo('/');
+    });
+
+    it('should have a title saying Page One', () => {
+      page.getTitle().then(title => {
+        expect(title).toEqual('Page One');
+      });
+    });
+  })
+});

e2e/app.po.ts

@@ -0,0 +1,13 @@
+import { browser } from 'protractor';
+
+export class Page {
+
+  navigateTo(destination) {
+    return browser.get(destination);
+  }
+
+  getTitle() {
+    return browser.getTitle();
+  }
+  
+}

e2e/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

package.json

@@ -8,7 +8,8 @@
     "build": "ionic-app-scripts build",
     "ionic:build": "ionic-app-scripts build",
     "ionic:serve": "ionic-app-scripts serve",
-    "test": "karma start ./test-config/karma.conf.js"
+    "test": "karma start ./test-config/karma.conf.js",
+    "e2e": "webdriver-manager update --standalone false --gecko false; protractor ./test-config/protractor.conf.js"
   },
   "dependencies": {
     "@angular/common": "2.4.8",
@@ -39,14 +40,17 @@
     "angular2-template-loader": "^0.6.2",
     "html-loader": "^0.4.5",
     "jasmine": "^2.5.3",
+    "jasmine-spec-reporter": "^3.2.0",
     "karma": "^1.5.0",
     "karma-chrome-launcher": "^2.0.0",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^2.0.3",
     "null-loader": "^0.1.1",
+    "protractor": "^5.1.1",
     "ts-loader": "^2.0.3",
+    "ts-node": "^3.0.2",
     "typescript": "2.1.6"
   },
   "version": "0.0.1",

test-config/protractor.conf.js

@@ -0,0 +1,32 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter').SpecReporter;
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    '../e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:8100/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};