Merge branch 'TBSliver/CoreUI' into finn/MoreCoreUI

e2e/app.e2e-spec.ts

@@ -1,14 +0,0 @@
-import { CoreUIPage } from './app.po';
-
-describe('core-ui App', function() {
-  let page: CoreUIPage;
-
-  beforeEach(() => {
-    page = new CoreUIPage();
-  });
-
-  it('should display message saying app works', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
-  });
-});

e2e/app.po.ts

@@ -1,11 +0,0 @@
-import { browser, element, by } from 'protractor/globals';
-
-export class CoreUIPage {
-  navigateTo() {
-    return browser.get('/');
-  }
-
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
-}

e2e/login.e2e-spec.ts

@@ -0,0 +1,24 @@
+import { LoginPageObject } from './login.po';
+
+describe('Login Page', () => {
+  let page: LoginPageObject;
+
+  beforeEach(() => {
+    page = new LoginPageObject();
+    page.navigateTo();
+  });
+
+  it('should have a header saying login', () => {
+    expect(page.getLoginHeaderText()).toEqual('Login');
+  });
+
+  it('should have a username box of type text', () => {
+    expect(page.isUsernameFieldPresent()).toBeTruthy();
+    expect(page.getUsernameFieldType()).toBe('text');
+  });
+
+  it('should have a password box of type password', () => {
+    expect(page.isPasswordFieldPresent()).toBeTruthy();
+    expect(page.getPasswordFieldType()).toBe('password');
+  });
+});

e2e/login.po.ts

@@ -0,0 +1,20 @@
+import { browser, element, by } from 'protractor';
+
+export class LoginPageObject {
+  navigateTo() {
+    return browser.get('/login');
+  }
+
+  getLoginHeaderText() {
+    return element(by.css('app-root h1')).getText();
+  }
+
+  getUsernameField() { return element(by.id('username')); }
+  getPasswordField() { return element(by.id('password')); }
+
+  isUsernameFieldPresent() { return this.getUsernameField().isPresent(); }
+  isPasswordFieldPresent() { return this.getPasswordField().isPresent(); }
+
+  getUsernameFieldType() { return this.getUsernameField().getAttribute('type'); }
+  getPasswordFieldType() { return this.getPasswordField().getAttribute('type'); }
+}

e2e/tsconfig.e2e.json

@@ -4,8 +4,9 @@
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
     "target": "es5",
-    "types":[
+    "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

package.json

@@ -41,19 +41,20 @@
   "devDependencies": {
     "@angular/cli": "1.3.0",
     "@angular/compiler-cli": "4.0.3",
-    "@types/jasmine": "2.5.47",
+    "@types/jasmine": "2.5.54",
-    "@types/node": "7.0.13",
+    "@types/jasminewd2": "2.0.2",
+    "@types/node": "8.0.24",
     "codelyzer": "2.1.1",
-    "jasmine-core": "2.5.2",
+    "jasmine-core": "2.7.0",
-    "jasmine-spec-reporter": "3.2.0",
+    "jasmine-spec-reporter": "4.2.1",
-    "karma": "1.6.0",
+    "karma": "1.7.0",
-    "karma-chrome-launcher": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.2.0",
+    "karma-coverage-istanbul-reporter": "1.3.0",
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.1",
+    "protractor": "5.1.2",
-    "ts-node": "3.0.2",
+    "ts-node": "3.3.0",
     "tslint": "4.5.1",
     "typescript": "2.4.2"
   }

src/app/app.component.spec.ts

@@ -25,12 +25,14 @@ describe('AppComponent', () => {
         ]
       })
       .compileComponents();
+  }));
 
+  beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);
     app = fixture.componentInstance;
     de = fixture.debugElement;
     appDocument = de.nativeElement;
-  }));
+  });
 
   it('should create the app', async(() => {
     expect(app).toBeTruthy();

src/app/app.component.ts

@@ -1,8 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  // tslint:disable-next-line
+  selector: 'app-root',
-  selector: 'body',
   template: '<router-outlet></router-outlet>'
 })
 export class AppComponent { }

src/app/auth/login.component.html

@@ -10,11 +10,11 @@
                 <form [formGroup]="signin" (ngSubmit)="onSubmit()">
                   <div class="input-group mb-3">
                     <span class="input-group-addon">@</span>
-                    <input type="text" class="form-control" formControlName="email" placeholder="Email">
+                    <input id="username" type="text" class="form-control" formControlName="email" placeholder="Email">
                   </div>
                   <div class="input-group mb-4">
                     <span class="input-group-addon"><i class="icon-lock"></i></span>
-                    <input type="password" class="form-control" formControlName="password" placeholder="Password">
+                    <input id="password" type="password" class="form-control" formControlName="password" placeholder="Password">
                   </div>
                   <div class="mb-4">
                     <div [ngSwitch]="loginStatus">

src/index.html

@@ -21,8 +21,7 @@
 <body class="app header-fixed sidebar-fixed">
   <!-- Enable bootstrap 4 theme -->
   <script>window.__theme = 'bs4';</script>
-
+  <app-root><i>Loading...</i></app-root>
-  <!-- App Loading... -->
 </body>
 
 </html>