add e2e tests (protractor) (fixes #28) (#50)

.angular-cli.json

@@ -29,7 +29,8 @@
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
+        "prod": "environments/environment.prod.ts",
+        "test": "environments/environment.test.ts"
       }
     }
   ],

Vagrantfile

@@ -64,7 +64,7 @@ Vagrant.configure(2) do |config|
   #   vb.gui = true
   #
   #   # Customize the amount of memory on the VM:
-    vb.memory = "666"
+    vb.memory = "1111"
   end
   #
   # View the documentation for the provider you are using for more
@@ -94,6 +94,11 @@ Vagrant.configure(2) do |config|
     apt-get -y install nodejs
     # Install Angular CLI
     npm install -g @angular/cli
+    # Install Chrome for e2e/Protractor tests
+    wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+    sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+    sudo apt-get update
+    sudo apt-get install -fy google-chrome-stable
     
     # Add CORS to CouchDB so app has access to databases
     git clone https://github.com/pouchdb/add-cors-to-couchdb.git

e2e/login.e2e-spec.ts

@@ -0,0 +1,29 @@
+import { LoginPage } from './login.po';
+import { browser, by, element } from 'protractor';
+import fs = require('fs');
+
+describe('Login', () => {
+  let page: LoginPage;
+
+  beforeEach(() => {
+    page = new LoginPage();
+  });
+
+  it('should display page header', () => {
+    page.navigateTo();
+    expect(page.getHeaderText()).toEqual('Planet Learning');
+  });
+
+  it('should login', () => {
+    page.navigateTo();
+    let userInput = page.getUsernameInput();
+    let passInput = page.getPasswordInput();
+    userInput.sendKeys(browser.params.user);
+    passInput.sendKeys('e2e');
+    page.clickSignin();
+    browser.getCurrentUrl().then((url) => {
+      expect(url).toEqual('http://0.0.0.0:49152/');
+    });
+  });
+
+});

e2e/login.po.ts

@@ -0,0 +1,24 @@
+import { browser, by, element } from 'protractor';
+
+export class LoginPage {
+  navigateTo() {
+    return browser.get('/login');
+  }
+
+  getHeaderText() {
+    return element(by.css('planet h1')).getText();
+  }
+
+  getUsernameInput() {
+    return element(by.css('input[name=name]'));
+  }
+
+  getPasswordInput() {
+    return element(by.css('input[name=password]'));
+  }
+
+  clickSignin() {
+    return element(by.buttonText('SIGN-IN')).click();
+  }
+
+}

e2e/userHandler.ts

@@ -0,0 +1,31 @@
+var rp = require('request-promise');
+
+module.exports = function(timeStamp) {
+  var user = 'e2e_' + timeStamp;
+
+  return {
+    get:function() {
+      return user;
+    },
+    create:function() {
+      return rp({
+        method:'PUT',
+        uri:'http://127.0.0.1:5984/_users/org.couchdb.user:' + user,
+        headers:{'Content-Type':'application/json'},
+        body:{name:user,password:'e2e',roles:[],type:'user'},
+        json:true
+      });
+    },
+    delete:function() {
+      return rp('http://127.0.0.1:5984/_users/org.couchdb.user:' + user).then(function(res) {
+        var rev = JSON.parse(res)._rev;
+        return rp({
+          method:'DELETE',
+          uri:'http://127.0.0.1:5984/_users/org.couchdb.user:' + user + '?rev=' + rev,
+          headers:{'Content-Type':'application/json'},
+          json:true
+        });
+      });
+    }
+  }
+};

package.json

@@ -47,6 +47,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "node-sass": "^4.5.3",
     "protractor": "~5.1.2",
+    "request-promise": "^4.2.1",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
     "typescript": "~2.3.3"

protractor.conf.js

@@ -1,15 +1,21 @@
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const { SpecReporter } = require('jasmine-spec-reporter'),
+  userHandler = require('./e2e/userHandler.ts'),
+  timeStamp = Date.now(),
+  user = userHandler(timeStamp);
 
 exports.config = {
   allScriptsTimeout: 11000,
   specs: [
     './e2e/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    'browserName': 'chrome'
+    'browserName': 'chrome',
+    'chromeOptions': {
+      args: [ "--headless", "--disable-gpu", "--window-size=1280,800" ]
+    }
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',
@@ -20,9 +26,26 @@ exports.config = {
     print: function() {}
   },
   onPrepare() {
+    var defer = protractor.promise.defer();
     require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      project: './e2e/tsconfig.e2e.json'
     });
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    browser.params.user = user.get();
+
+    return user.create().then(function(res) {
+      defer.fulfill();
+    })
+    .catch(function(err) {
+      console.log(err);
+    });
+  },
+  onComplete() {
+    return user.delete().then(function(res) {
+      console.log('Completed tests and removed new user: ' + user.get());
+    })
+    .catch(function(err) {
+      console.log(err);
+    });
   }
 };

src/app/shared/couchdb.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Headers, Http } from '@angular/http';
+import { environment } from '../../environments/environment';
 
 import 'rxjs/add/operator/toPromise';
 
@@ -8,7 +9,7 @@ export class CouchService {
     private headers = new Headers({'Content-Type':'application/json'});
     private defaultOpts = {headers:this.headers,withCredentials:true};
     // CouchDB ports are 2200 and 2201 (forwarded from 5984 and 5986 on virtual machine)
-    private baseUrl = 'http://127.0.0.1:2200/';
+    private baseUrl = 'http://127.0.0.1:' + environment.couchPort + '/';
 
     private setOpts(opts?:any) {
         return Object.assign({},this.defaultOpts,opts) || this.defaultOpts;

src/environments/environment.test.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production:false,
+  couchPort:'5984'
+};

src/environments/environment.ts

@@ -4,5 +4,6 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  couchPort:'2200'
 };