26 testing selectors

db.json

@@ -54,73 +54,35 @@
       "name": "Blazin' Inferno",
       "toppings": [
         {
-          "id": 10,
-          "name": "pepperoni"
-        },
-        {
-          "id": 9,
-          "name": "pepper"
-        },
-        {
-          "id": 3,
-          "name": "basil"
+          "id": 12,
+          "name": "tomato"
         },
         {
           "id": 4,
           "name": "chili"
         },
         {
-          "id": 7,
-          "name": "olive"
-        },
-        {
-          "id": 2,
-          "name": "bacon"
-        }
-      ],
-      "id": 1
-    },
-    {
-      "name": "Seaside Surfin'",
-      "toppings": [
-        {
-          "id": 6,
-          "name": "mushroom"
+          "id": 10,
+          "name": "pepperoni"
         },
         {
-          "id": 7,
-          "name": "olive"
+          "id": 9,
+          "name": "pepper"
         },
         {
-          "id": 2,
-          "name": "bacon"
+          "id": 5,
+          "name": "mozzarella"
         },
         {
           "id": 3,
           "name": "basil"
         },
-        {
-          "id": 1,
-          "name": "anchovy"
-        },
         {
           "id": 8,
           "name": "onion"
-        },
-        {
-          "id": 11,
-          "name": "sweetcorn"
-        },
-        {
-          "id": 9,
-          "name": "pepper"
-        },
-        {
-          "id": 5,
-          "name": "mozzarella"
         }
       ],
-      "id": 2
+      "id": 1
     },
     {
       "name": "Plain Ol' Pepperoni",

src/app/app.module.ts

@@ -3,9 +3,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { Routes, RouterModule } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+import {
+  StoreRouterConnectingModule,
+  RouterStateSerializer,
+} from '@ngrx/router-store';
 import { StoreModule, MetaReducer } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 
+import { reducers, effects, CustomSerializer } from './store';
+
 // not used in production
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { storeFreeze } from 'ngrx-store-freeze';
@@ -37,10 +43,12 @@ export const ROUTES: Routes = [
     BrowserModule,
     BrowserAnimationsModule,
     RouterModule.forRoot(ROUTES),
-    StoreModule.forRoot({}, { metaReducers }),
-    EffectsModule.forRoot([]),
+    StoreModule.forRoot(reducers, { metaReducers }),
+    EffectsModule.forRoot(effects),
+    StoreRouterConnectingModule,
     environment.development ? StoreDevtoolsModule.instrument() : [],
   ],
+  providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

src/app/store/actions/index.ts

@@ -0,0 +1 @@
+export * from './router.action';

src/app/store/actions/router.action.ts

@@ -0,0 +1,27 @@
+import { Action } from '@ngrx/store';
+import { NavigationExtras } from '@angular/router';
+
+export const GO = '[Router] Go';
+export const BACK = '[Router] Back';
+export const FORWARD = '[Router] Forward';
+
+export class Go implements Action {
+  readonly type = GO;
+  constructor(
+    public payload: {
+      path: any[];
+      query?: object;
+      extras?: NavigationExtras;
+    }
+  ) {}
+}
+
+export class Back implements Action {
+  readonly type = BACK;
+}
+
+export class Forward implements Action {
+  readonly type = FORWARD;
+}
+
+export type Actions = Go | Back | Forward;

src/app/store/effects/index.ts

@@ -0,0 +1,5 @@
+import { RouterEffects } from './router.effect';
+
+export const effects: any[] = [RouterEffects];
+
+export * from './router.effect';

src/app/store/effects/router.effect.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Location } from '@angular/common';
+
+import { Effect, Actions } from '@ngrx/effects';
+import * as RouterActions from '../actions/router.action';
+
+import { tap, map } from 'rxjs/operators';
+
+@Injectable()
+export class RouterEffects {
+  constructor(
+    private actions$: Actions,
+    private router: Router,
+    private location: Location
+  ) {}
+
+  @Effect({ dispatch: false })
+  navigate$ = this.actions$.ofType(RouterActions.GO).pipe(
+    map((action: RouterActions.Go) => action.payload),
+    tap(({ path, query: queryParams, extras }) => {
+      this.router.navigate(path, { queryParams, ...extras });
+    })
+  );
+
+  @Effect({ dispatch: false })
+  navigateBack$ = this.actions$
+    .ofType(RouterActions.BACK)
+    .pipe(tap(() => this.location.back()));
+
+  @Effect({ dispatch: false })
+  navigateForward$ = this.actions$
+    .ofType(RouterActions.FORWARD)
+    .pipe(tap(() => this.location.forward()));
+}

src/app/store/index.ts

@@ -0,0 +1,3 @@
+export * from './reducers';
+export * from './actions';
+export * from './effects';

src/app/store/reducers/index.ts

@@ -0,0 +1,42 @@
+import {
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  Params,
+} from '@angular/router';
+import { createFeatureSelector, ActionReducerMap } from '@ngrx/store';
+
+import * as fromRouter from '@ngrx/router-store';
+
+export interface RouterStateUrl {
+  url: string;
+  queryParams: Params;
+  params: Params;
+}
+
+export interface State {
+  routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
+}
+
+export const reducers: ActionReducerMap<State> = {
+  routerReducer: fromRouter.routerReducer,
+};
+
+export const getRouterState = createFeatureSelector<
+  fromRouter.RouterReducerState<RouterStateUrl>
+>('routerReducer');
+
+export class CustomSerializer
+  implements fromRouter.RouterStateSerializer<RouterStateUrl> {
+  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
+    const { url } = routerState;
+    const { queryParams } = routerState.root;
+
+    let state: ActivatedRouteSnapshot = routerState.root;
+    while (state.firstChild) {
+      state = state.firstChild;
+    }
+    const { params } = state;
+
+    return { url, queryParams, params };
+  }
+}

src/products/components/pizza-form/pizza-form.component.ts

@@ -22,6 +22,7 @@ import { Topping } from '../../models/topping.model';
 
 @Component({
   selector: 'pizza-form',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['pizza-form.component.scss'],
   template: `
     <div class="pizza-form">

src/products/containers/product-item/product-item.component.ts

@@ -1,91 +1,71 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
 
-import { Pizza } from '../../models/pizza.model';
-import { PizzasService } from '../../services/pizzas.service';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { tap } from 'rxjs/operators';
+import * as fromStore from '../../store';
 
+import { Pizza } from '../../models/pizza.model';
 import { Topping } from '../../models/topping.model';
-import { ToppingsService } from '../../services/toppings.service';
 
 @Component({
   selector: 'product-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['product-item.component.scss'],
   template: `
     <div 
       class="product-item">
       <pizza-form
-        [pizza]="pizza"
-        [toppings]="toppings"
+        [pizza]="pizza$ | async"
+        [toppings]="toppings$ | async"
         (selected)="onSelect($event)"
         (create)="onCreate($event)"
         (update)="onUpdate($event)"
         (remove)="onRemove($event)">
         <pizza-display
-          [pizza]="visualise">
+          [pizza]="visualise$ | async">
         </pizza-display>
       </pizza-form>
     </div>
   `,
 })
 export class ProductItemComponent implements OnInit {
-  pizza: Pizza;
-  visualise: Pizza;
-  toppings: Topping[];
+  pizza$: Observable<Pizza>;
+  visualise$: Observable<Pizza>;
+  toppings$: Observable<Topping[]>;
 
-  constructor(
-    private pizzaService: PizzasService,
-    private toppingsService: ToppingsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
+  constructor(private store: Store<fromStore.ProductsState>) {}
 
   ngOnInit() {
-    this.pizzaService.getPizzas().subscribe(pizzas => {
-      const param = this.route.snapshot.params.id;
-      let pizza;
-      if (param === 'new') {
-        pizza = {};
-      } else {
-        pizza = pizzas.find(pizza => pizza.id == parseInt(param, 10));
-      }
-      this.pizza = pizza;
-      this.toppingsService.getToppings().subscribe(toppings => {
-        this.toppings = toppings;
-        this.onSelect(toppings.map(topping => topping.id));
-      });
-    });
+    this.pizza$ = this.store.select(fromStore.getSelectedPizza).pipe(
+      tap((pizza: Pizza = null) => {
+        const pizzaExists = !!(pizza && pizza.toppings);
+        const toppings = pizzaExists
+          ? pizza.toppings.map(topping => topping.id)
+          : [];
+        this.store.dispatch(new fromStore.VisualiseToppings(toppings));
+      })
+    );
+    this.toppings$ = this.store.select(fromStore.getAllToppings);
+    this.visualise$ = this.store.select(fromStore.getPizzaVisualised);
   }
 
   onSelect(event: number[]) {
-    let toppings;
-    if (this.toppings && this.toppings.length) {
-      toppings = event.map(id =>
-        this.toppings.find(topping => topping.id === id)
-      );
-    } else {
-      toppings = this.pizza.toppings;
-    }
-    this.visualise = { ...this.pizza, toppings };
+    this.store.dispatch(new fromStore.VisualiseToppings(event));
   }
 
   onCreate(event: Pizza) {
-    this.pizzaService.createPizza(event).subscribe(pizza => {
-      this.router.navigate([`/products/${pizza.id}`]);
-    });
+    this.store.dispatch(new fromStore.CreatePizza(event));
   }
 
   onUpdate(event: Pizza) {
-    this.pizzaService.updatePizza(event).subscribe(() => {
-      this.router.navigate([`/products`]);
-    });
+    this.store.dispatch(new fromStore.UpdatePizza(event));
   }
 
   onRemove(event: Pizza) {
     const remove = window.confirm('Are you sure?');
     if (remove) {
-      this.pizzaService.removePizza(event).subscribe(() => {
-        this.router.navigate([`/products`]);
-      });
+      this.store.dispatch(new fromStore.RemovePizza(event));
     }
   }
 }