refactor: use @ngrx/router-store instead of ngrx-router (#167)

BREAKING CHANGE: all dependencies of ngrx-router are replaced with @ngrx/router-store
intershop · Apr 15, 2020 · 032b2ae · 032b2ae
1 parent 86839d7
commit 032b2ae
Show file tree

Hide file tree

Showing 64 changed files with 1,439 additions and 1,190 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -20,7 +20,6 @@ module.exports = {
   transformIgnorePatterns: [`node_modules/(?!${esModules.join('|')})`],
   moduleNameMapper: {
     '^ish-(.*)$': '<rootDir>/src/app/$1',
-    '^ngrx-router$': '<rootDir>/src/ngrx-router',
   },
   snapshotSerializers: [
     './src/jest-serializer/AngularHTMLSerializer.js',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "@ng-bootstrap/ng-bootstrap": "^5.1.4",
     "@ngrx/effects": "^8.6.0",
     "@ngrx/entity": "^8.6.0",
+    "@ngrx/router-store": "^8.6.0",
     "@ngrx/store": "^8.6.0",
     "@ngrx/store-devtools": "^8.6.0",
     "@nguniversal/express-engine": "^8.1.1",

diff --git a/schematics/src/store-group/factory_spec.ts b/schematics/src/store-group/factory_spec.ts
@@ -19,7 +19,6 @@ describe('Store Group Schematic', () => {
       `import { NgModule } from '@angular/core';
 import { EffectsModule } from '@ngrx/effects';
 import { ActionReducerMap, StoreModule } from '@ngrx/store';
-import { RouterEffects } from 'ngrx-router';
 
 import { CoreState } from './core-store';
 import { CountriesEffects } from './countries/countries.effects';

diff --git a/schematics/src/store/factory_spec.ts b/schematics/src/store/factory_spec.ts
@@ -34,7 +34,6 @@ describe('Store Schematic', () => {
       `import { NgModule } from '@angular/core';
 import { EffectsModule } from '@ngrx/effects';
 import { ActionReducerMap, StoreModule } from '@ngrx/store';
-import { RouterEffects } from 'ngrx-router';
 
 import { CoreState } from './core-store';
 import { CountriesEffects } from './countries/countries.effects';

diff --git a/src/app/core/routing/category/category.route.spec.ts b/src/app/core/routing/category/category.route.spec.ts
@@ -1,19 +1,20 @@
+import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { Router, UrlMatchResult, UrlSegment } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { cold } from 'jest-marbles';
-import { RouteNavigation } from 'ngrx-router';
-import { of } from 'rxjs';
+import { Store, select } from '@ngrx/store';
 
 import { createCategoryView } from 'ish-core/models/category-view/category-view.model';
 import { Category } from 'ish-core/models/category/category.model';
+import { selectRouter } from 'ish-core/store/router';
+import { ngrxTesting } from 'ish-core/utils/dev/ngrx-testing';
 import { categoryTree } from 'ish-core/utils/dev/test-data-utils';
 
 import {
   generateCategoryUrl,
   generateLocalizedCategorySlug,
   matchCategoryRoute,
-  ofCategoryRoute,
+  ofCategoryUrl,
 } from './category.route';
 
 describe('Category Route', () => {
@@ -129,35 +130,6 @@ describe('Category Route', () => {
     });
   });
 
-  describe('ofCategoryRoute', () => {
-    it('should detect category route when categoryUniqueId is a param', () => {
-      const stream$ = of(new RouteNavigation({ path: 'any', params: { categoryUniqueId: '123' } }));
-      expect(stream$.pipe(ofCategoryRoute())).toBeObservable(
-        cold('(a|)', {
-          a: new RouteNavigation({
-            params: {
-              categoryUniqueId: '123',
-            },
-            path: 'any',
-            url: '/any',
-          }),
-        })
-      );
-    });
-
-    it('should not detect category route when categoryUniqueId is missing', () => {
-      const stream$ = of(new RouteNavigation({ path: 'any' }));
-
-      expect(stream$.pipe(ofCategoryRoute())).toBeObservable(cold('|'));
-    });
-
-    it('should not detect category route when categoryUniqueId and sku are params', () => {
-      const stream$ = of(new RouteNavigation({ path: 'any', params: { categoryUniqueId: '123', sku: '123' } }));
-
-      expect(stream$.pipe(ofCategoryRoute())).toBeObservable(cold('|'));
-    });
-  });
-
   describe('generateLocalizedCategorySlug', () => {
     it('should generate slug for top level category', () => {
       const category = createCategoryView(categoryTree([specials]), specials.uniqueId);
@@ -174,3 +146,60 @@ describe('Category Route', () => {
     });
   });
 });
+
+describe('Category Route', () => {
+  let router: Router;
+  let store$: Store<{}>;
+
+  beforeEach(() => {
+    @Component({ template: 'dummy' })
+    class DummyComponent {}
+
+    TestBed.configureTestingModule({
+      declarations: [DummyComponent],
+      imports: [
+        RouterTestingModule.withRoutes([{ path: '**', component: DummyComponent }]),
+        ngrxTesting({ routerStore: true }),
+      ],
+    });
+
+    router = TestBed.get(Router);
+    store$ = TestBed.get(Store);
+  });
+
+  describe('ofCategoryRoute', () => {
+    it('should detect category route when categoryUniqueId is a param', done => {
+      router.navigateByUrl('/category;categoryUniqueId=ABC');
+
+      store$
+        .pipe(
+          ofCategoryUrl(),
+          select(selectRouter)
+        )
+        .subscribe(data => {
+          expect(data.state.params).toMatchInlineSnapshot(`
+            Object {
+              "categoryUniqueId": "ABC",
+            }
+          `);
+          done();
+        });
+    });
+
+    it('should not detect category route when sku and categoryUniqueId are params', done => {
+      router.navigateByUrl('/category;sku=123;categoryUniqueId=ABC');
+
+      store$.pipe(ofCategoryUrl()).subscribe(fail, fail, fail);
+
+      setTimeout(done, 1000);
+    });
+
+    it('should not detect category route when categoryUniqueId is missing', done => {
+      router.navigateByUrl('/other');
+
+      store$.pipe(ofCategoryUrl()).subscribe(fail, fail, fail);
+
+      setTimeout(done, 1000);
+    });
+  });
+});
diff --git a/src/app/core/routing/category/category.route.ts b/src/app/core/routing/category/category.route.ts
@@ -1,9 +1,10 @@
 import { UrlMatchResult, UrlSegment } from '@angular/router';
-import { RouteNavigation, ofRoute } from 'ngrx-router';
 import { MonoTypeOperatorFunction } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
 import { CategoryView } from 'ish-core/models/category-view/category-view.model';
+import { CoreState } from 'ish-core/store/core-store';
+import { selectRouteParam } from 'ish-core/store/router';
 
 export function generateLocalizedCategorySlug(category: CategoryView) {
   if (!category || !category.categoryPath.length) {
@@ -53,10 +54,9 @@ export function generateCategoryUrl(category: CategoryView): string {
   return route;
 }
 
-export function ofCategoryRoute(): MonoTypeOperatorFunction<RouteNavigation> {
+export function ofCategoryUrl(): MonoTypeOperatorFunction<{}> {
   return source$ =>
     source$.pipe(
-      ofRoute(),
-      filter(action => action.payload.params && action.payload.params.categoryUniqueId && !action.payload.params.sku)
+      filter((state: CoreState) => !selectRouteParam('sku')(state) && !!selectRouteParam('categoryUniqueId')(state))
     );
 }
diff --git a/src/app/core/routing/product/product.route.spec.ts b/src/app/core/routing/product/product.route.spec.ts
@@ -1,18 +1,19 @@
+import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { Router, UrlMatchResult, UrlSegment } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { cold } from 'jest-marbles';
-import { RouteNavigation } from 'ngrx-router';
-import { of } from 'rxjs';
+import { Store, select } from '@ngrx/store';
 
 import { createCategoryView } from 'ish-core/models/category-view/category-view.model';
 import { Category } from 'ish-core/models/category/category.model';
 import { createProductView } from 'ish-core/models/product-view/product-view.model';
 import { VariationProduct } from 'ish-core/models/product/product-variation.model';
 import { Product } from 'ish-core/models/product/product.model';
+import { selectRouter } from 'ish-core/store/router';
+import { ngrxTesting } from 'ish-core/utils/dev/ngrx-testing';
 import { categoryTree } from 'ish-core/utils/dev/test-data-utils';
 
-import { generateProductUrl, matchProductRoute, ofProductRoute } from './product.route';
+import { generateProductUrl, matchProductRoute, ofProductUrl } from './product.route';
 
 describe('Product Route', () => {
   const specials = { categoryPath: ['Specials'], uniqueId: 'Specials', name: 'Spezielles' } as Category;
@@ -315,28 +316,72 @@ describe('Product Route', () => {
       `);
     });
   });
+});
+
+describe('Product Route', () => {
+  let router: Router;
+  let store$: Store<{}>;
+
+  beforeEach(() => {
+    @Component({ template: 'dummy' })
+    class DummyComponent {}
+
+    TestBed.configureTestingModule({
+      declarations: [DummyComponent],
+      imports: [
+        RouterTestingModule.withRoutes([{ path: '**', component: DummyComponent }]),
+        ngrxTesting({ routerStore: true }),
+      ],
+    });
+
+    router = TestBed.get(Router);
+    store$ = TestBed.get(Store);
+  });
 
   describe('ofProductRoute', () => {
-    it('should detect product route when sku is a param', () => {
-      const stream$ = of(new RouteNavigation({ path: 'any', params: { sku: '123' } }));
-
-      expect(stream$.pipe(ofProductRoute())).toBeObservable(
-        cold('(a|)', {
-          a: new RouteNavigation({
-            params: {
-              sku: '123',
-            },
-            path: 'any',
-            url: '/any',
-          }),
-        })
-      );
+    it('should detect product route when sku is a param', done => {
+      router.navigateByUrl('/product;sku=123');
+
+      store$
+        .pipe(
+          ofProductUrl(),
+          select(selectRouter)
+        )
+        .subscribe(data => {
+          expect(data.state.params).toMatchInlineSnapshot(`
+            Object {
+              "sku": "123",
+            }
+          `);
+          done();
+        });
+    });
+
+    it('should detect product route when sku and categoryUniqueId are params', done => {
+      router.navigateByUrl('/product;sku=123;categoryUniqueId=ABC');
+
+      store$
+        .pipe(
+          ofProductUrl(),
+          select(selectRouter)
+        )
+        .subscribe(data => {
+          expect(data.state.params).toMatchInlineSnapshot(`
+            Object {
+              "categoryUniqueId": "ABC",
+              "sku": "123",
+            }
+          `);
+          done();
+        });
     });
 
-    it('should not detect product route when sku is missing', () => {
-      const stream$ = of(new RouteNavigation({ path: 'any' }));
+    it('should not detect product route when sku is missing', done => {
+      router.navigateByUrl('/other');
+
+      store$.pipe(ofProductUrl()).subscribe(fail, fail, fail);
 
-      expect(stream$.pipe(ofProductRoute())).toBeObservable(cold('|'));
+      setTimeout(done, 1000);
     });
   });
 });
diff --git a/src/app/core/routing/product/product.route.ts b/src/app/core/routing/product/product.route.ts
@@ -1,12 +1,13 @@
 import { UrlMatchResult, UrlSegment } from '@angular/router';
-import { RouteNavigation, ofRoute } from 'ngrx-router';
 import { MonoTypeOperatorFunction } from 'rxjs';
 import { filter } from 'rxjs/operators';
 
 import { CategoryView } from 'ish-core/models/category-view/category-view.model';
 import { ProductView } from 'ish-core/models/product-view/product-view.model';
 import { ProductHelper } from 'ish-core/models/product/product.model';
 import { generateLocalizedCategorySlug } from 'ish-core/routing/category/category.route';
+import { CoreState } from 'ish-core/store/core-store';
+import { selectRouteParam } from 'ish-core/store/router';
 
 function generateProductSlug(product: ProductView) {
   if (!product || !product.name) {
@@ -82,10 +83,6 @@ export function generateProductUrl(product: ProductView, category?: CategoryView
   return route;
 }
 
-export function ofProductRoute(): MonoTypeOperatorFunction<RouteNavigation> {
-  return source$ =>
-    source$.pipe(
-      ofRoute(),
-      filter(action => action.payload.params && action.payload.params.sku)
-    );
+export function ofProductUrl(): MonoTypeOperatorFunction<{}> {
+  return source$ => source$.pipe(filter((state: CoreState) => !!selectRouteParam('sku')(state)));
 }