initial karma webpack

CHANGELOG.md

@@ -1,3 +1,17 @@
+<a name="1.12.0"></a>
+# 1.12.0 (2016-08-24)
+
+### Features
+
+* **App**: Implement ngrx PR [#133](https://github.com/lathonez/clicker/pull/133) ([ab2cd9a](https://github.com/lathonez/clicker/commit/ab2cd9a))
+
+<a name="1.11.0"></a>
+# 1.11.0 (2016-08-17)
+
+### Features
+
+* **E2E**: Add screenshot reporter for Protractor PR [#132](https://github.com/lathonez/clicker/pull/132) ([dd1242d](https://github.com/lathonez/clicker/commit/dd1242d))
+
 <a name="1.10.0"></a>
 # 1.10.0 (2016-08-09)
 

README.md

@@ -50,6 +50,7 @@ Issues and PRs are welcome, see the [roadmap sticky](https://github.com/lathonez
 * This started out as a fork of [Angular 2 Seed](https://github.com/mgechev/angular2-seed) and would not be possible without it
 * @bengro for the lightweightify inspiration (#68)
 * @ric9176 and @DanielaGSB for E2E tests (#50)
+* @tja4472 for the ngrx implementation (#133)
 * [Everyone else](https://github.com/lathonez/clicker/graphs/contributors) for the advice, help, PRs etc
 
 ## Changelog
@@ -78,8 +79,14 @@ External dependencies are listed here to justify their inclusion and to allow fo
 * karma-jasmine: jasmine framework for Karma
 * karma-mocha-reporter: mocha progress reporter for Karma
 * karma-phantomjs-launcher: allows using phantom with Karma
+* @ngrx/core: ngrx
+* @ngrx/effects: ngrx
+* @ngrx/store: ngrx
+* ngrx-store-logger: ngrx debug logging
+* ngrx-store-freeze: ngrx state mutation prevetion
 * phantomjs-prebuilt: phantom headless browser
 * protractor: e2e test runner
+* protractor-jasmine2-screenshot-reporter: screenshot reporter for Jasmine
 * tsify: typescript plugin for karma-browserify
 * ts-node: transpile gulpfile
 * tslint: static code analysis for typescript

app/actions/clicker.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { Action } from '@ngrx/store';
+import { Clicker } from '../models';
+
+@Injectable()
+export class ClickerActions {
+  public static DO_CLICK: string = '[ClickerActions] Do Click';
+  public doClick(id: string): Action {
+    return {
+      type: ClickerActions.DO_CLICK,
+      payload: { id: id },
+    };
+  }
+
+  public static LOAD: string = '[ClickerActions] Load';
+  public load(): Action {
+    return {
+      type: ClickerActions.LOAD,
+    };
+  }
+
+  public static LOAD_SUCCESS: string  = '[ClickerActions] Load Success';
+  public loadSuccess(data: Clicker[]): Action {
+    return {
+      type: ClickerActions.LOAD_SUCCESS,
+      payload: data,
+    };
+  }
+
+  public static NEW_CLICKER: string = '[ClickerActions] New Clicker';
+  public newClicker(name: string): Action {
+    return {
+      type: ClickerActions.NEW_CLICKER,
+      payload: { name: name },
+    };
+  }
+
+  public static REMOVE_CLICKER: string = '[ClickerActions] Remove Clicker';
+  public removeClicker(id: string): Action {
+    return {
+      type: ClickerActions.REMOVE_CLICKER,
+      payload: { id: id },
+    };
+  }
+}

app/actions/index.ts

@@ -0,0 +1,9 @@
+import { ClickerActions } from './clicker';
+
+export {
+ClickerActions
+};
+
+export default [
+    ClickerActions,
+];

app/app.spec.ts

@@ -1,11 +1,9 @@
-import {
-  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS, TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-}                               from '@angular/platform-browser-dynamic/testing';
-import { setBaseTestProviders } from '@angular/core/testing';
+// import { TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS, TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS } from '@angular/platform-browser-dynamic/testing';
+// import { setBaseTestProviders } from '@angular/core/testing';
 import { ClickerApp }           from './app';
 import { Page2 }                from './pages/page2/page2';
 
-setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
+// setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
 
 let clickerApp: ClickerApp = null;
 

app/app.ts

@@ -2,10 +2,18 @@
 
 import { Component, provide, Type, ViewChild }           from '@angular/core';
 import { disableDeprecatedForms, provideForms }          from '@angular/forms';
+import { provideStore }                                  from '@ngrx/store';
+import { runEffects }                                    from '@ngrx/effects';
 import { ionicBootstrap, MenuController, Nav, Platform } from 'ionic-angular';
 import { StatusBar }                                     from 'ionic-native';
-import { Clickers, Storage }                             from './services';
+import { ClickersService, DataService, StorageService }  from './services';
 import { ClickerList, Page2 }                            from './pages';
+import actions                                           from './actions';
+import effects                                           from './effects';
+import reducers                                          from './reducers';
+
+// Add the RxJS Observable operators we need in this app.
+import './rxjs-operators';
 
 @Component({
   templateUrl: 'build/app.html',
@@ -15,7 +23,7 @@ export class ClickerApp {
   @ViewChild(Nav) private nav: Nav;
 
   private rootPage: Type;
-  private pages: Array<{title: string, component: Type}>;
+  private pages: Array<{ title: string, component: Type }>;
   private menu: MenuController;
   private platform: Platform;
 
@@ -53,6 +61,11 @@ export class ClickerApp {
 ionicBootstrap(ClickerApp, [
   disableDeprecatedForms(),
   provideForms(),
-  Clickers,
-  provide('Storage', {useClass: Storage})]
-);
+  StorageService,
+  DataService,
+  ClickersService,
+  provide('Storage', { useClass: Storage }),
+  provideStore(reducers),
+  runEffects(effects),
+  actions,
+]);

app/components/clickerButton/clickerButton.html

@@ -1 +1 @@
-<button block outline (click)="clickerService.doClick(clicker.id)">{{clicker.name}} ({{clicker.getCount()}})</button>
+<button block outline (click)="doClick.emit(clicker.id)">{{clicker.name}} ({{clicker.getCount()}})</button>

app/components/clickerButton/clickerButton.spec.ts

@@ -1,22 +1,26 @@
 import { beforeEach, beforeEachProviders, describe, expect, it }          from '@angular/core/testing';
 import { provide }                                                        from '@angular/core';
 import { asyncCallbackFactory, injectAsyncWrapper, providers, TestUtils } from '../../../test/diExports';
-import { ClickersMock }                                                   from '../../services/mocks';
+import { ClickersServiceMock }                                            from '../../services/mocks';
 import { ClickerButton }                                                  from './clickerButton';
-import { Clickers }                                                       from '../../services';
+import { ClickersService }                                                from '../../services';
+// import {  TestComponentBuilder }     from '@angular/compiler/testing';
+// import {addProviders} from '@angular/core/testing';
 
 this.fixture = null;
 this.instance = null;
 
 let clickerButtonProviders: Array<any> = [
- provide(Clickers, {useClass: ClickersMock}),
+  provide(ClickersService, { useClass: ClickersServiceMock }),
+
 ];
 
 describe('ClickerButton', () => {
 
   let beforeEachFn: Function = ((testSpec) => {
+    // addProviders([{ provide: TestComponentBuilder, useClass: null }]);
     testSpec.instance['clicker'] = { name: 'TEST CLICKER' };
-    testSpec.instance['clicker'].getCount = function(): number { return 10; };
+    testSpec.instance['clicker'].getCount = function (): number { return 10; };
   });
 
   beforeEachProviders(() => providers.concat(clickerButtonProviders));
@@ -31,10 +35,9 @@ describe('ClickerButton', () => {
     expect(this.fixture.nativeElement.querySelectorAll('.button-inner')[0].innerHTML).toEqual('TEST CLICKER (10)');
   });
 
-  it('does a click', () => {
+  it('does a click', (done) => {
     this.fixture.detectChanges();
-    spyOn(this.instance['clickerService'], 'doClick');
+    this.instance.doClick.subscribe(done);
     TestUtils.eventFire(this.fixture.nativeElement.querySelectorAll('button')[0], 'click');
-    expect(this.instance['clickerService'].doClick).toHaveBeenCalled();
   });
 });

app/components/clickerButton/clickerButton.ts

@@ -1,21 +1,24 @@
 'use strict';
 
-import { Component } from '@angular/core';
-import { Button }    from 'ionic-angular';
-import { Clickers }  from '../../services';
+import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
+import { Button }                                                          from 'ionic-angular';
+import { ClickersService }                                                 from '../../services';
+import { Clicker }                                                         from '../../models';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-button',
-  inputs: ['clicker: clicker'],
   templateUrl: 'build/components/clickerButton/clickerButton.html',
   directives: [Button],
 })
 
 export class ClickerButton {
+  @Input() public clicker: Clicker;
+  @Output() public doClick: EventEmitter<string> = new EventEmitter<string>();
 
-  private clickerService: Clickers;
+  private clickerService: ClickersService;
 
-  constructor(clickerService: Clickers) {
+  constructor(clickerService: ClickersService) {
     this.clickerService = clickerService;
   }
 }

app/components/clickerForm/clickerForm.html

@@ -1,4 +1,4 @@
-<form [formGroup]="form" (submit)="newClicker(form.value)">
+<form [formGroup]="form" (submit)="newClickerLocal(form.value)">
   <ion-row>
     <ion-col width-80>
       <ion-item >

app/components/clickerForm/clickerForm.spec.ts

@@ -1,22 +1,20 @@
 import { beforeEach, beforeEachProviders, describe, expect, it }          from '@angular/core/testing';
 import { provide }                                                        from '@angular/core';
 import { asyncCallbackFactory, injectAsyncWrapper, providers, TestUtils } from '../../../test/diExports';
-import { ClickersMock }                                                   from '../../services/mocks';
-import { Clickers, Utils }                                                from '../../services';
+import { ClickersServiceMock }                                            from '../../services/mocks';
+import { ClickersService, Utils }                                         from '../../services';
 import { ClickerForm }                                                    from './clickerForm';
-
 this.fixture = null;
 this.instance = null;
 
 let clickerFormProviders: Array<any> = [
-  provide(Clickers, {useClass: ClickersMock}),
+  provide(ClickersService, {useClass: ClickersServiceMock}),
 ];
 
 describe('ClickerForm', () => {
 
   let beforeEachFn: Function = ((testSpec) => {
-    spyOn(testSpec.instance, 'newClicker').and.callThrough();
-    spyOn(testSpec.instance['clickerService'], 'newClicker').and.callThrough();
+    spyOn(testSpec.instance, 'newClickerLocal').and.callThrough();
   });
 
   beforeEachProviders(() => providers.concat(clickerFormProviders));
@@ -35,8 +33,7 @@ describe('ClickerForm', () => {
     input.value = clickerName;
     TestUtils.eventFire(input, 'input');
     TestUtils.eventFire(button, 'click');
-    expect(this.instance.newClicker).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
-    expect(this.instance['clickerService'].newClicker).toHaveBeenCalledWith(clickerName);
+    expect(this.instance.newClickerLocal).toHaveBeenCalledWith(Object({ clickerNameInput: clickerName }));
     expect(Utils.resetControl).toHaveBeenCalledWith(this.instance.form.controls.clickerNameInput);
   });
 
@@ -45,7 +42,6 @@ describe('ClickerForm', () => {
     this.instance.clickerName = '';
     this.fixture.detectChanges();
     TestUtils.eventFire(button, 'click');
-    expect(this.instance.newClicker).toHaveBeenCalled();
-    expect(this.instance['clickerService'].newClicker).not.toHaveBeenCalled();
+    expect(this.instance.newClickerLocal).toHaveBeenCalled();
   });
 });

app/components/clickerForm/clickerForm.ts

@@ -1,32 +1,34 @@
+
 'use strict';
 
-import { FormGroup, FormBuilder, Validators }        from '@angular/forms';
-import { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
-import { Component }                                 from '@angular/core';
-import { Button, Icon, Item, Label, TextInput }      from 'ionic-angular';
-import { Clickers, Utils }                           from '../../services';
+import { FormGroup, FormBuilder, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, Validators } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, Output, EventEmitter } from '@angular/core';
+import { ClickersService, Utils }                                   from '../../services';
+import { TextInput }      from 'ionic-angular';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'clicker-form',
   templateUrl: 'build/components/clickerForm/clickerForm.html',
-  directives: [Button, Icon, Item, Label, TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
+  directives: [TextInput, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES],
 })
 
 export class ClickerForm {
 
-  private clickerService: Clickers;
+  private clickerService: ClickersService;
   private form: FormGroup;
 
-  constructor(clickerService: Clickers, fb: FormBuilder) {
+  @Output() public newClicker: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(clickerService: ClickersService, fb: FormBuilder) {
     this.clickerService = clickerService;
 
     this.form = fb.group({
       clickerNameInput: ['', Validators.required],
     });
   }
 
-  public newClicker(formValue: Object): boolean {
-
+  public newClickerLocal(formValue: Object): boolean {
     // need to mark the clickerName control as touched so validation
     // will apply after the user has tried to add a clicker
     this.form.controls['clickerNameInput'].markAsTouched();
@@ -35,7 +37,8 @@ export class ClickerForm {
       return false;
     }
 
-    this.clickerService.newClicker(formValue['clickerNameInput']);
+    // this.clickerService.newClicker(formValue['clickerNameInput']);
+    this.newClicker.emit(formValue['clickerNameInput']);
 
     // reset the value of the contorl and all validation / state
     this.form.controls['clickerNameInput'] = Utils.resetControl(this.form.controls['clickerNameInput']);

app/effects/clicker.ts

@@ -0,0 +1,44 @@
+import { Injectable }                        from '@angular/core';
+import { Observable }                        from 'rxjs/Observable';
+import { Action }                            from '@ngrx/store';
+import { Effect, StateUpdate, StateUpdates } from '@ngrx/effects';
+import { AppState }                          from '../reducers';
+import { ClickerActions }                    from '../actions';
+import { Clicker }                           from '../models';
+import { DataService }                       from '../services/data';
+
+@Injectable()
+export class ClickerEffects {
+
+  // for some reason you have to declare this in the constructor??
+  // ORIGINAL EXCEPTION: TypeError: Cannot read property 'whenAction' of undefined
+  // private updates: StateUpdates<AppState>;
+
+  private actions: ClickerActions;
+  private dataService: DataService;
+
+  /* tslint:disable: no-constructor-vars */
+  constructor(private updates$: StateUpdates<AppState>, actions: ClickerActions, dataService: DataService) {
+    // this.updates$ = updates;
+    this.actions = actions;
+    this.dataService = dataService;
+  }
+
+  @Effect() public loadCollection$: Observable<Action> = this.updates$
+    .whenAction(ClickerActions.LOAD)
+    // .do(x => { console.log('Effect:loadCollection$:A', x); })
+
+    // Watch database node and get items.
+    .switchMap(() => this.dataService.getClickers())
+    .map((items: Clicker[]) => this.actions.loadSuccess(items));
+  // Terminate effect.
+  // .ignoreElements();
+
+  @Effect() public update$: Observable<StateUpdate<AppState>> = this.updates$
+    .whenAction(ClickerActions.NEW_CLICKER, ClickerActions.REMOVE_CLICKER, ClickerActions.DO_CLICK)
+    .do(x => {
+      this.dataService.saveClickers(x.state.clickers.clickerItems);
+    })
+    // Terminate effect.
+    .ignoreElements();
+}

app/effects/index.ts

@@ -0,0 +1,9 @@
+import { ClickerEffects } from './clicker';
+
+export {
+ClickerEffects
+};
+
+export default [
+    ClickerEffects,
+];