Update client dependencies (#52)

* Update angular version

* Fix lint errors

* Test users component

* Test user effects

Author: nirgn975

client/.gitignore

@@ -3,6 +3,7 @@
 # compiled output
 /dist
 /tmp
+/out-tsc
 
 # dependencies
 /node_modules
@@ -26,7 +27,7 @@
 # misc
 /.sass-cache
 /connect.lock
-/coverage/*
+/coverage
 /libpeerconnection.log
 npm-debug.log
 testem.log
@@ -36,6 +37,6 @@ testem.log
 /e2e/*.js
 /e2e/*.map
 
-#System Files
+# System Files
 .DS_Store
 Thumbs.db

client/e2e/tsconfig.e2e.json

@@ -1,16 +1,9 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "es2016"
-    ],
-    "outDir": "../dist/out-tsc-e2e",
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es6",
+    "target": "es5",
     "types":[
       "jasmine",
       "node"

client/package.json

@@ -13,28 +13,29 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/material": "^2.0.0-beta.2",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
+    "@angular/animations": "^4.1.1",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/forms": "^4.0.0",
+    "@angular/http": "^4.0.0",
+    "@angular/material": "^2.0.0-beta.3",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
+    "@angular/router": "^4.0.0",
     "@ngrx/core": "^1.2.0",
-    "@ngrx/effects": "^2.0.0",
-    "@ngrx/store": "^2.2.1",
+    "@ngrx/effects": "^2.0.3",
+    "@ngrx/store": "^2.2.2",
     "core-js": "^2.4.1",
     "hammerjs": "^2.0.8",
-    "reselect": "^2.5.4",
+    "reselect": "^3.0.0",
     "rxjs": "^5.1.0",
-    "zone.js": "^0.7.6"
+    "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.0",
-    "@angular/compiler-cli": "^2.4.0",
-    "@ngrx/store-devtools": "^3.2.3",
+    "@angular/cli": "1.0.2",
+    "@angular/compiler-cli": "^4.0.0",
+    "@ngrx/store-devtools": "^3.2.4",
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
@@ -49,9 +50,9 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "ngrx-store-freeze": "^0.1.9",
     "protractor": "~5.1.0",
-    "sw-precache": "^5.0.0",
+    "sw-precache": "^5.1.1",
     "ts-node": "~2.0.0",
-    "tslint": "~4.4.2",
-    "typescript": "~2.0.0"
+    "tslint": "~4.5.0",
+    "typescript": "~2.2.0"
   }
 }

client/src/app/actions/user.ts

@@ -1,20 +1,17 @@
 import { Action } from '@ngrx/store';
 import { User } from '../models/user';
-import { type } from '../util';
 
-export const ActionTypes = {
-  LOAD_USER:                type('[User] Load User'),
-  LOAD_USER_SUCCESS:        type('[User] Load User Success'),
-};
+export const LOAD_USER =  '[User] Load User';
+export const LOAD_USER_SUCCESS = '[User] Load User Success';
 
 export class LoadUserAction implements Action {
-  type = ActionTypes.LOAD_USER;
+  readonly type = LOAD_USER;
 
   constructor() { }
 }
 
 export class LoadUserSuccessAction implements Action {
-  type = ActionTypes.LOAD_USER_SUCCESS;
+  readonly type = LOAD_USER_SUCCESS;
 
   constructor(public payload: User[]) { }
 }

client/src/app/app.component.ts

@@ -8,5 +8,4 @@ import { Component } from '@angular/core';
   styles: [``]
 })
 export class AppComponent {
-  title = 'app works!';
 }

client/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { MaterialModule } from '@angular/material';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { reducer } from './reducers';
 import { AppRoutingModule } from './app-routing.module';
@@ -30,6 +31,7 @@ import { UserService } from './services/user.service';
     HttpModule,
     AppRoutingModule,
     MaterialModule,
+    BrowserAnimationsModule,
     StoreModule.provideStore(reducer),
     StoreDevtoolsModule.instrumentOnlyWithExtension(),
     EffectsModule.run(UserEffects),

client/src/app/components/users/users.component.html

@@ -1,12 +1,12 @@
 <md-card class="example-card" *ngFor="let user of user$ | async">
   <md-card-header>
     <div md-card-avatar class="example-header-image"></div>
-    <md-card-title>{{user.username}}</md-card-title>
-    <md-card-subtitle>{{user.email}}</md-card-subtitle>
+    <md-card-title>{{ user.username }}</md-card-title>
+    <md-card-subtitle>{{ user.email }}</md-card-subtitle>
   </md-card-header>
   <img md-card-image src="assets/person-icon.png">
   <md-card-content>
-    <p>{{user.url}}</p>
+    <p>{{ user.url }}</p>
   </md-card-content>
   <md-card-actions>
     <button md-button>SHARE</button>

client/src/app/components/users/users.component.spec.ts

@@ -1,7 +1,9 @@
-/* tslint:disable:no-unused-variable */
+import 'hammerjs';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 import { MaterialModule } from '@angular/material';
 import { reducer } from '../../reducers';
 import { StoreModule } from '@ngrx/store';
@@ -11,25 +13,63 @@ import { UsersComponent } from './users.component';
 describe('UsersComponent', () => {
   let component: UsersComponent;
   let fixture: ComponentFixture<UsersComponent>;
+  let debugs: DebugElement[];
+  let element: HTMLElement;
+  const users: any = Observable.of([{
+    url: 'http://localhost/nirgalon',
+    username: 'Nir Galon',
+    email: '[email protected]',
+    groups: ['admin']
+  }, {
+    url: 'http://localhost/adisaar',
+    username: 'Adi Saar',
+    email: '',
+    groups: ['users']
+  }]);
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        MaterialModule.forRoot(),
+        MaterialModule,
         StoreModule.provideStore(reducer)
       ],
-      declarations: [ UsersComponent ]
+      declarations: [ UsersComponent ],
+      schemas: [ NO_ERRORS_SCHEMA ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(UsersComponent);
     component = fixture.componentInstance;
+
+    // Create a dummy transaction.
+    component.user$ = users;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display first user email', () => {
+    element = fixture.debugElement.query(By.css('md-card-subtitle')).nativeElement;
+    expect(element.textContent).toContain('[email protected]');
+  });
+
+  it('should display users name', () => {
+    debugs = fixture.debugElement.queryAll(By.css('md-card-title'));
+    debugs.forEach((elem, index) => {
+      element = elem.nativeElement;
+      expect(element.textContent).toContain(users.value[index].username);
+    });
+  });
+
+  it('should display the users url links', () => {
+    debugs = fixture.debugElement.queryAll(By.css('md-card-content > p'));
+    debugs.forEach((elem, index) => {
+      element = elem.nativeElement;
+      expect(element.textContent).toContain(users.value[index].url);
+    });
+  });
 });

client/src/app/components/users/users.component.ts

@@ -12,7 +12,7 @@ import { User } from '../../models/user';
   styleUrls: ['./users.component.scss']
 })
 export class UsersComponent implements OnInit {
-  private user$: Observable<User[]>;
+  public user$: Observable<User[]>;
 
   constructor(
     private store: Store<fromRoot.State>,

client/src/app/effects/user.spec.ts

@@ -0,0 +1,45 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+import { EffectsTestingModule, EffectsRunner } from '@ngrx/effects/testing';
+
+import { UserEffects } from './user';
+import { UserService } from '../services/user.service';
+import * as userAction from '../actions/user';
+
+describe('UsersEffects', () => {
+  const userServiceStub = {};
+  let runner: EffectsRunner;
+  let userEffects: UserEffects;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        EffectsTestingModule,
+      ],
+      providers: [
+        { provide: UserService, useValue: userServiceStub },
+        UserEffects,
+      ]
+    });
+  });
+
+  beforeEach(inject([
+      EffectsRunner, UserEffects
+    ],
+    (_runner, _userEffects) => {
+      runner = _runner;
+      userEffects = _userEffects;
+    }
+  ));
+
+  it('should create the service', inject([UserEffects], (service: UserEffects) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should return a LOAD_USER_SUCCESS action after LOAD_USER', () => {
+    runner.queue({ type: 'LOAD_USER' });
+
+    userEffects.loadUser$.subscribe(result => {
+      expect(result).toEqual({ type: 'LOAD_USER_SUCCESS' });
+    });
+  });
+});