feat(tests): Add Protractor configuration and tests

mraible · web-flow · commit 41c216af769f · 2016-12-22T14:46:26.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -8,5 +8,4 @@ demo/demo.js
 demo/demo.js.map
 dist/
 docs/
-yarn.lock
 *.tgz
diff --git a/.travis.yml b/.travis.yml
@@ -3,21 +3,28 @@ node_js:
 - '6'
 script:
 - npm test
+- npm start &
+- npm run e2e
 - npm run typedoc
 cache:
   directories:
   - node_modules
 before_install:
-- test -z "$BUILD_DOCS" || openssl aes-256-cbc -K $encrypted_d98a3227cf72_key -iv $encrypted_d98a3227cf72_iv
-  -in keypair.enc -out ~/.ssh/id_rsa -d
+- test -z "$BUILD_DOCS" || openssl aes-256-cbc -K $encrypted_d98a3227cf72_key -iv
+  $encrypted_d98a3227cf72_iv -in keypair.enc -out ~/.ssh/id_rsa -d
 - test -z "$BUILD_DOCS" || chmod 600 ~/.ssh/id_rsa
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 after_success:
 - test -z "$BUILD_DOCS" || CURRENT_HASH=`git rev-parse HEAD`
-- test -z "$BUILD_DOCS" || RELEASE_VERSION=`git tag | xargs -I@ git log --format=format:"%ai @%n" -1 @ | sort | awk '{print $4}' | tail -n 1`
+- test -z "$BUILD_DOCS" || RELEASE_VERSION=`git tag | xargs -I@ git log --format=format:"%ai
+  @%n" -1 @ | sort | awk '{print $4}' | tail -n 1`
 - test -z "$BUILD_DOCS" || RELEASE_HASH=`git rev-list $RELEASE_VERSION -n 1`
-- test -z "$BUILD_DOCS" || if [ "$CURRENT_HASH" = "$RELEASE_HASH" ]; then DEPLOY_DOCS=true; fi
+- test -z "$BUILD_DOCS" || if [ "$CURRENT_HASH" = "$RELEASE_HASH" ]; then DEPLOY_DOCS=true;
+  fi
 - test -z "$DEPLOY_DOCS" || git config --global user.email "evangelists@stormpath.com"
-- test -z "$DEPLOY_DOCS" || git config --global user.name "stormpath-sdk-angular Auto Doc Build"
+- test -z "$DEPLOY_DOCS" || git config --global user.name "stormpath-sdk-angular Auto
+  Doc Build"
 - test -z "$DEPLOY_DOCS" || git clone git@github.com:stormpath/stormpath.github.io.git
 - test -z "$DEPLOY_DOCS" || cd stormpath.github.io
 - test -z "$DEPLOY_DOCS" || git fetch origin source:source
@@ -31,4 +38,13 @@ after_success:
 matrix:
   include:
   - env: BUILD_DOCS=true
-    node_js: 'node'
+    node_js: node
+notifications:
+  webhooks:
+    on_success: change
+    on_failure: always
+    on_start: false
+env:
+  global:
+  - secure: Ql5jkxDVxmLRB+enk2SXT7ZuZQbAv0txQbMYv9iFOk/eezyA+joep3VAze7h8gDsC7eipUisuPNHa0wvJklpacTrNsUfK/HM/IPUwMNdyBEX+lk28L1oT199Aijj51KBH7OuIgnTHp6RP4SahonY9iBRyUhOlAcyan4aCYvMIr9sIvx9PJAPeO5/4olR9UnIIjPsLs8+xuh1nbnu/nb6BClA3wKriSe64K+vREl3x863BPTDzVDBCKbB5F5QTRuNSlJ7NT6JnbqqH6Dt5LQYwu/h4l3gFFMzROKzOcId62EfdMlpyH/akJqxqqKuCd9cQ3eo42wSIu3zD2eq3rhEj6g4WjKilMPxYIjEah3f+75qmby7U8qEJGsuyd1J0nWRXm0e+Uei9w9TVV+shjwH85QVz09w5ktOzZm595pV9v/2gx3dzbPZ/g/xHlhTcvFdxt587EDUEeejXKHFN2/kzQTqc04ZBJ5P2E0SbuoOGv6p030VsZFVuUlZaRcjempXOD7SuoRZ/6v7mpzvT/uHuQdJPzIEUejrLUnCbJ3k/VU9jXp0V88IAl+/vF/4h9e6zuo4eLcQ0Z9q4+hMRXZbiljSENty5tdgGzUfz3bwqWaL8AuFrDyA3wdlT1tqSIjbq1yvD9IzHRToq2jvjqlidbeDKwuh+GlF79+CTjlgV14=
+  - secure: lLFXP0J7p1rwSAIYzTClDaS05Iv3w8uK1DysdqCFtS180QEP8KN5uWwJQ4+YPklrzPDrE7jN6JJgtDvch9+C4ea1Y/Tuvct3snslWyOCfrg0UKRKkNOv8n/QAgczjoTZkniCc/PElKCyYP1CRPv4jN4AyhOzgSVZ2dzm5+BnKsPf02U6dSn8SO37gOmJGinVPyXLzUpFgvShC5sz1zEahPhr87BM7yz2ImqgibXqPvHDlw0E0ZKYXoTB4w6jaVrl/R743rjJ7PNCvSs2AQT/MZoHBNHGJby3NdSmV4gOCxIhe/eu5AJ6Nu95GRy4q9ThxqlBILJseaQr8OII5ceQ5eaADgaZHqW0fVXZ3VSjdUgmxrZ8ZaVchrgZKDBbNG/tImcPAkjWP6YScUfyqPjaE21W/ckKuwq6mgtPR6mY2z1gQAie0q0mWlbWfGfXE0cvCo0z6Eyr7zsl5NS54ywdjtns8KaN+O2+SrgJbhHunxkKr3ZE/JWfmYyBie4Hb+7inmOcEFmDQJfQ5AaXiHONBnQAIq7RHE73jykpVNUog9nvD7jLSHpPj1+kHg0c18ADzApyP0BCtj42mEnfHlPpoRyrM7e4UxQtlt1WP7zOtWmF0HI9QJ6PcqG2qarC+HHwGs0dbtAU+itYvGcA4e2AD7N6rkbzHutP1ymixI+Krns=
diff --git a/demo/app.component.ts b/demo/app.component.ts
@@ -9,14 +9,20 @@ import { Account } from '../src/shared/account';
       <div class="container">
         <br/>
         <br/>
+        <div class="row" *ngIf="(user$ | async) === false">
+          <div class="col-xs-12 col-sm-offset-3 col-sm-6">
+            <h1 class="text-center">Hello</h1>
+            <br/>
+          </div>
+        </div>
         <div *ngIf="(user$ | async)" class="row text-center">
-          <h2 class="">
-            Welcome, ({{ ( user$ | async ).fullName }}).
-          </h2>
+          <h1>
+            Welcome, {{ ( user$ | async ).fullName }}
+          </h1>
           <hr/>
 
           <ul class="nav nav-pills nav-stacked text-centered">
-            <li role="presentation" (click)="logout()"><a href="#">Logout</a></li>
+            <li role="presentation" (click)="logout()"><a id="logout" href="#">Logout</a></li>
           </ul>
         </div>
 
diff --git a/demo/demo.module.ts b/demo/demo.module.ts
@@ -3,12 +3,34 @@ import { BrowserModule } from '@angular/platform-browser';
 import { StormpathModule } from '../src/stormpath.module';
 import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
+import { StormpathConfiguration } from '../src/stormpath/stormpath.config';
+
+let config: StormpathConfiguration = new StormpathConfiguration();
+let params = {};
+
+if (location.search) {
+  let parts = location.search.substring(1).split('&');
+
+  for (let i = 0; i < parts.length; i++) {
+    let nv = parts[i].split('=');
+    if (!nv[0]) continue;
+    params[nv[0]] = nv[1] || true;
+  }
+}
+
+if (params['api']) {
+  config.endpointPrefix = params['api']; //'https://raible.apps.stormpath.io';
+  console.log('Configured endpointPrefix to be: ' + params['api']);
+}
+
 
 @NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule, FormsModule, StormpathModule],
   bootstrap: [AppComponent],
-  providers: []
+  providers: [{
+    provide: StormpathConfiguration, useValue: config
+  }]
 })
 export class DemoModule {
 }
diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
@@ -0,0 +1,40 @@
+import { browser, element, by, $ } from 'protractor';
+
+describe('login', () => {
+
+  const username = element(by.id('loginField'));
+  const password = element(by.id('passwordField'));
+  const logout = element(by.id('logout'));
+  const title = element.all(by.css('h1')).first();
+
+  beforeAll(() => {
+    browser.get('');
+  });
+
+  it('should fail to login with bad password', () => {
+    expect(element.all(by.css('h1')).first().getText()).toMatch(/Hello/);
+
+    username.sendKeys('admin');
+    password.sendKeys('foo');
+    element(by.css('button[type=submit]')).click();
+
+    let error = $('.alert-danger').getText();
+    expect(error).toMatch(/Invalid username or password./);
+  });
+
+  it('should login successfully with valid account', () => {
+    expect(title.getText()).toMatch(/Hello/);
+
+    username.clear();
+    username.sendKeys('matt.raible+user@stormpath.com');
+    password.clear();
+    password.sendKeys('Stormpath1');
+    element(by.css('button[type=submit]')).click();
+
+    expect(title.getText()).toMatch(/Welcome, Hip User/);
+
+    logout.click();
+
+    expect(title.getText()).toMatch(/Hello/);
+  });
+});
diff --git a/e2e/register.spec.ts b/e2e/register.spec.ts
@@ -0,0 +1,55 @@
+import { browser, element, by, $ } from 'protractor';
+
+describe('register', () => {
+
+  const registerLink = element(by.id('register'));
+  const firstName = element(by.id('givenName'));
+  const lastName = element(by.id('surname'));
+  const email = element(by.id('email'));
+  const password = element(by.id('password'));
+  const logout = element(by.id('logout'));
+  const title = element.all(by.css('h1')).first();
+
+  beforeEach(() => {
+    browser.get('');
+    registerLink.click();
+    expect(firstName.isDisplayed());
+  });
+
+  afterAll(() => {
+    // delete user via the REST API
+  });
+
+  it('should fail with short password', () => {
+    firstName.sendKeys('Test');
+    lastName.sendKeys('User');
+    email.sendKeys('matt.raible+user' + getRandomInt(0, 1000) + '@stormpath.com');
+    password.sendKeys('short');
+    element(by.css('button[type=submit]')).click();
+
+    let error = $('.alert-danger').getText();
+    expect(error).toMatch(/Account password minimum length not satisfied./);
+  });
+
+  it('should register successfully', () => {
+    firstName.sendKeys('Test');
+    lastName.sendKeys('User');
+    email.sendKeys('matt.raible+user' + getRandomInt(0, 1000) + '@stormpath.com');
+    password.sendKeys('Stormpath123');
+    element(by.css('button[type=submit]')).click();
+
+    let success = $('.alert-success').getText();
+    expect(success).toMatch(/Your account has been created, you may now log in./);
+    expect(title.getText()).toMatch(/Welcome, Test User/);
+
+    logout.click();
+
+    expect(title.getText()).toMatch(/Hello/);
+  });
+});
+
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min)) + min;
+}
diff --git a/package.json b/package.json
@@ -15,6 +15,8 @@
     "build:clean": "rm -rf dist",
     "test": "karma start",
     "test:watch": "karma start --watch",
+    "postinstall": "webdriver-manager update",
+    "e2e": "protractor",
     "commit": "git-cz",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "typedoc": "mkdir -p dist/docs && typedoc --options typedoc.json src/*.ts",
@@ -70,6 +72,7 @@
     "ghooks": "~1.3.2",
     "imports-loader": "^0.7.0",
     "jasmine-core": "~2.5.0",
+    "jasmine-reporters": "^2.2.0",
     "karma": "~1.3.0",
     "karma-coverage": "~1.1.0",
     "karma-jasmine": "^1.1.0",
@@ -78,13 +81,16 @@
     "karma-sourcemap-loader": "~0.3.7",
     "karma-webpack": "~1.8.0",
     "phantomjs-prebuilt": "~2.1.7",
+    "protractor": "4.0.14",
+    "protractor-jasmine2-screenshot-reporter": "0.3.2",
     "raw-loader": "^0.5.1",
     "rxjs": "5.0.1",
     "sinon": "~1.17.4",
     "sinon-chai": "~2.8.0",
     "sourcemap-istanbul-instrumenter-loader": "~0.2.0",
     "standard-version": "^4.0.0",
     "ts-loader": "^1.3.2s",
+    "ts-node": "^1.7.2",
     "tslint": "^4.0.2",
     "tslint-loader": "^3.3.0",
     "typescript": "^2.1.4",
diff --git a/protractor.conf.js b/protractor.conf.js
@@ -0,0 +1,46 @@
+var HtmlScreenshotReporter = require("protractor-jasmine2-screenshot-reporter");
+var JasmineReporters = require('jasmine-reporters');
+
+exports.config = {
+    allScriptsTimeout: 20000,
+
+    specs: [
+        './e2e/*.spec.ts'
+    ],
+
+    capabilities: {
+        'browserName': 'firefox',
+        'phantomjs.binary.path': require('phantomjs-prebuilt').path,
+        'phantomjs.ghostdriver.cli.args': ['--loglevel=DEBUG']
+    },
+
+    directConnect: true,
+
+    baseUrl: 'http://localhost:8000/', // ?api=https://raible.apps.stormpath.io
+
+    framework: 'jasmine2',
+
+    jasmineNodeOpts: {
+        showColors: true,
+        defaultTimeoutInterval: 30000
+    },
+
+    beforeLaunch: function() {
+        require('ts-node').register({
+            project: ''
+        });
+    },
+
+    onPrepare: function() {
+        browser.driver.manage().window().setSize(1280, 1024);
+        jasmine.getEnv().addReporter(new JasmineReporters.JUnitXmlReporter({
+            savePath: 'dist/reports/e2e',
+            consolidateAll: false
+        }));
+        jasmine.getEnv().addReporter(new HtmlScreenshotReporter({
+            dest: "dist/reports/e2e/screenshots"
+        }));
+    },
+
+    useAllAngular2AppRoots: true
+};
diff --git a/src/authport/authport.component.ts b/src/authport/authport.component.ts
@@ -11,19 +11,15 @@ import { Account } from '../shared/account';
     <br/>
     <br/>
     <div class="row" *ngIf="(user$ | async) === false">
-      <div class="col-xs-12 col-sm-offset-3 col-sm-6">
-        <h1 class="text-center">Hello</h1>
-        <br/>
-      </div>
       <div class="col-xs-12 col-sm-offset-3 col-sm-6">
         <div class="panel panel-default">
           <div class="panel-heading">
             <h4>
               <ul class="nav nav-pills">
-                <li role="presentation" [ngClass]="{active:loginService.login || loginService.forgot}" (click)="showLogin()">
+                <li role="presentation" [ngClass]="{active:loginService.login || loginService.forgot}" id="login" (click)="showLogin()">
                   <a>Sign In</a>
                 </li>
-                <li role="presentation" [ngClass]="{active:loginService.register}" (click)="showRegister()" class="pull-right">
+                <li role="presentation" [ngClass]="{active:loginService.register}" (click)="showRegister()" id="register" class="pull-right">
                   <a>Register</a>
                 </li>
               </ul>
diff --git a/src/login/login.component.ts b/src/login/login.component.ts
@@ -31,7 +31,7 @@ import { FormsModule } from '@angular/forms';
   </div>
 
   <div *ngIf="error" class="alert alert-danger">{{error}}</div>
-  <button (click)="login()" class="btn btn-primary pull-right">Login</button>
+  <button (click)="login()" id="loginBtn" type="submit" class="btn btn-primary pull-right">Login</button>
 </form>
 </template>
 <template
diff --git a/yarn.lock b/yarn.lock
