test: add tests for replacing when reload is true

npm/ng-packs/packages/core/src/lib/states/replaceable-components.state.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { Router } from '@angular/router';
 import { Action, createSelector, Selector, State, StateContext } from '@ngxs/store';
 import snq from 'snq';
@@ -29,10 +29,26 @@ export class ReplaceableComponentsState {
     return selector;
   }
 
-  constructor(private router: Router) {}
+  constructor(private ngZone: NgZone, private router: Router) {}
+
+  // TODO: Create a shared service for route reload and more
+  private reloadRoute() {
+    const { shouldReuseRoute } = this.router.routeReuseStrategy;
+    const setRouteReuse = (reuse: typeof shouldReuseRoute) => {
+      this.router.routeReuseStrategy.shouldReuseRoute = reuse;
+    };
+
+    setRouteReuse(() => false);
+    this.router.navigated = false;
+
+    this.ngZone.run(async () => {
+      await this.router.navigateByUrl(this.router.url).catch();
+      setRouteReuse(shouldReuseRoute);
+    });
+  }
 
   @Action(AddReplaceableComponent)
-  async replaceableComponentsAction(
+  replaceableComponentsAction(
     { getState, patchState }: StateContext<ReplaceableComponents.State>,
     { payload, reload }: AddReplaceableComponent,
   ) {
@@ -52,14 +68,6 @@ export class ReplaceableComponentsState {
       replaceableComponents,
     });
 
-    if (reload) {
+    if (reload) this.reloadRoute();
-      // TODO: Create a shared service for route reload and more
-      const { shouldReuseRoute } = this.router.routeReuseStrategy;
-      this.router.routeReuseStrategy.shouldReuseRoute = () => false;
-      this.router.navigated = false;
-
-      await this.router.navigateByUrl(this.router.url).catch();
-      this.router.routeReuseStrategy.shouldReuseRoute = shouldReuseRoute;
-    }
   }
 }

npm/ng-packs/packages/core/src/lib/tests/replaceable-components.state.spec.ts

@@ -1,21 +1,27 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { Component } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { SpyObject } from '@ngneat/spectator';
 import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { NgxsModule, Store } from '@ngxs/store';
-import { ReplaceableComponentsState } from '../states/replaceable-components.state';
-import { Component } from '@angular/core';
 import { AddReplaceableComponent } from '../actions';
+import { ReplaceableComponentsState } from '../states/replaceable-components.state';
 
 @Component({ selector: 'abp-dummy', template: 'dummy works' })
 class DummyComponent {}
 
 describe('ReplaceableComponentsState', () => {
   let spectator: SpectatorHost<DummyComponent>;
+  let router: SpyObject<Router>;
   const createHost = createHostFactory({
     component: DummyComponent,
-    imports: [NgxsModule.forRoot([ReplaceableComponentsState])],
+    providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
+    imports: [RouterModule.forRoot([]), NgxsModule.forRoot([ReplaceableComponentsState])],
   });
 
   beforeEach(() => {
     spectator = createHost('<abp-dummy></abp-dummy>');
+    router = spectator.inject(Router);
   });
 
   it('should add a component to the state', () => {
@@ -38,4 +44,16 @@ describe('ReplaceableComponentsState', () => {
     });
     expect(store.selectSnapshot(ReplaceableComponentsState.getAll)).toHaveLength(1);
   });
+
+  it('should call reloadRoute when reload parameter is given as true to AddReplaceableComponent', async () => {
+    const spy = jest.spyOn(router, 'navigateByUrl');
+    const store = spectator.get(Store);
+    store.dispatch(new AddReplaceableComponent({ component: DummyComponent, key: 'Dummy' }));
+    store.dispatch(new AddReplaceableComponent({ component: null, key: 'Dummy' }, true));
+
+    await spectator.fixture.whenStable();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith(router.url);
+  });
 });