feat: expose Promise result of the Angular navigation in RoutingServi…

…ce (#12795)

Exposed Promise result of the Angular navigation in methods of the `RoutingService`: `go()` and `goByUrl()`.
Now Angular Router is called directly from the `RoutingService`, but not from ngrx effects anymore. Dropped the effects as well as the actions triggering them.

Added migration docs and schematics for the breaking changes.

By the way, added the missing param `NavigationExtras` in `RoutingService.goByUrl`.

BREAKING CHANGES
The following ngrx actions have been removed:
- `RoutingActions.RouteGo` (and `RoutingActions.ROUTER_GO`)
- `RoutingActions.RouteGoByUrlAction` (and `RoutingActions.ROUTER_GO_BY_URL`)
- `RoutingActions.RouteBackAction` (and `RoutingActions.ROUTER_BACK`)
- `RoutingActions.RouteForwardAction` (and `RoutingActions.ROUTER_FORWARD`).
Please use instead the methods of the `RoutingService`, respectively: `go()`, `goByUrl()`, `back()`, `forward()`.

closes #12789

docs/migration/4_0.md

@@ -732,6 +732,7 @@ The display of the guest checkout button relies on the presence of the `forced`
 - `AuthHttpHeaderService` now requires `AuthRedirectService`.
 - `AsmAuthHttpHeaderService` now requires `AuthRedirectService`.
 - `AuthRedirectService` now requires `AuthFlowRoutesService`.
+- `RoutingService` now requires `Location` from `@angular/common`.
 - `ProtectedRoutesService` now requires `UrlParsingService`.
 - `EventService` no longer uses `FeatureConfigService`.
 - `PageEventModule` was removed. Instead, use `NavigationEventModule` from `@spartacus/storefront`
@@ -1216,6 +1217,15 @@ related labels outside of checkout and the checkout lib is not used, you will ne
 `RoutingService.go` - Removed 2nd argument `query`. Use `extras.queryParams` instead.
 `RoutingService.navigate` - Removed 2nd argument `query`. Use `extras.queryParams` instead.
 
+### RoutingActions ngrx
+The following ngrx actions have been removed:
+- `RoutingActions.RouteGo` (and `RoutingActions.ROUTER_GO`)
+- `RoutingActions.RouteGoByUrlAction` (and `RoutingActions.ROUTER_GO_BY_URL`)
+- `RoutingActions.RouteBackAction` (and `RoutingActions.ROUTER_BACK`)
+- `RoutingActions.RouteForwardAction` (and `RoutingActions.ROUTER_FORWARD`).
+
+Please use instead the methods of the `RoutingService`, respectively: `go()`, `goByUrl()`, `back()`, `forward()`.
+
 ### AuthRedirectService
 
 - `#reportNotAuthGuard` - method not needed anymore. Every visited URL is now remembered automatically as redirect URL on `NavigationEnd` event.

feature-libs/asm/components/asm-main-ui/asm-main-ui.component.spec.ts

@@ -88,7 +88,7 @@ class MockGlobalMessageService implements Partial<GlobalMessageService> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go() {}
+  go = () => Promise.resolve(true);
 }
 
 class MockAsmComponentService {

feature-libs/asm/components/asm-session-timer/asm-session-timer.component.spec.ts

@@ -36,7 +36,7 @@ class MockAsmComponentService implements Partial<AsmComponentService> {
   logoutCustomerSupportAgentAndCustomer(): void {}
 }
 class MockRoutingService implements Partial<RoutingService> {
-  go() {}
+  go = () => Promise.resolve(true);
   isNavigating() {
     return of(false);
   }

feature-libs/asm/root/services/asm-auth-http-header.service.spec.ts

@@ -40,7 +40,7 @@ class MockAuthStorageService implements Partial<AuthStorageService> {
 class MockOAuthLibWrapperService implements Partial<OAuthLibWrapperService> {}
 
 class MockRoutingService implements Partial<RoutingService> {
-  go() {}
+  go = () => Promise.resolve(true);
 }
 
 class MockGlobalMessageService implements Partial<GlobalMessageService> {

feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.spec.ts

@@ -35,7 +35,7 @@ class MockAuthService implements Partial<AuthService> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go(): void {}
+  go = () => Promise.resolve(true);
 }
 
 class MockLaunchDialogService implements Partial<LaunchDialogService> {

feature-libs/cart/saved-cart/components/details/saved-cart-details-action/saved-cart-details-action.component.spec.ts

@@ -37,7 +37,7 @@ class MockSavedCartFacade implements Partial<SavedCartFacade> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go(): void {}
+  go = () => Promise.resolve(true);
 }
 
 class MockGlobalMessageService implements Partial<GlobalMessageService> {

feature-libs/cart/saved-cart/components/details/saved-cart-details-items/saved-cart-details-items.component.spec.ts

@@ -78,7 +78,7 @@ class MockSavedCartFacade implements Partial<SavedCartFacade> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go(): void {}
+  go = () => Promise.resolve(true);
 }
 class MockGlobalMessageService implements Partial<GlobalMessageService> {
   add(

feature-libs/cart/saved-cart/components/list/saved-cart-list.component.spec.ts

@@ -65,7 +65,7 @@ class MockTranslationService {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go(): void {}
+  go = () => Promise.resolve(true);
 }
 
 describe('SavedCartListComponent', () => {

feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.spec.ts

@@ -55,7 +55,7 @@ class MockLaunchDialogService implements Partial<LaunchDialogService> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go(): void {}
+  go = () => Promise.resolve(true);
 }
 
 class MockSavedCartFacade implements Partial<SavedCartFacade> {

feature-libs/product-configurator/common/components/configure-product/configure-product.component.spec.ts

@@ -50,7 +50,7 @@ class MockUrlPipe implements PipeTransform {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go() {}
+  go = () => Promise.resolve(true);
 }
 
 let component: ConfigureProductComponent;

feature-libs/storefinder/core/facade/store-finder.service.spec.ts

@@ -1,38 +1,32 @@
 import { inject, TestBed } from '@angular/core/testing';
 import * as NgrxStore from '@ngrx/store';
 import { MemoizedSelector, Store, StoreModule } from '@ngrx/store';
-import { StoreFinderActions } from '../store/actions/index';
-import * as fromStoreReducers from '../store/reducers/index';
-import {
-  FindStoresState,
-  StoresState,
-  StateWithStoreFinder,
-  STORE_FINDER_FEATURE,
-} from '../store/store-finder-state';
-import { StoreFinderService } from './store-finder.service';
-import { NavigationExtras } from '@angular/router';
-import { StoreFinderConfig } from '../config/store-finder-config';
 import {
   GeoPoint,
   GlobalMessageService,
   PointOfService,
   RoutingService,
-  UrlCommands,
   WindowRef,
 } from '@spartacus/core';
 import { BehaviorSubject, EMPTY, of } from 'rxjs';
+import { StoreFinderConfig } from '../config/store-finder-config';
 import { StoreFinderSelectors } from '../store';
+import { StoreFinderActions } from '../store/actions/index';
+import * as fromStoreReducers from '../store/reducers/index';
+import {
+  FindStoresState,
+  StateWithStoreFinder,
+  StoresState,
+  STORE_FINDER_FEATURE,
+} from '../store/store-finder-state';
+import { StoreFinderService } from './store-finder.service';
 
 const routerParam$: BehaviorSubject<{
   [key: string]: string;
 }> = new BehaviorSubject({});
 
 class MockRoutingService implements Partial<RoutingService> {
-  go(
-    _commands: any[] | UrlCommands,
-    _query?: object,
-    _extras?: NavigationExtras
-  ): void {}
+  go = () => Promise.resolve(true);
 
   getParams = () => routerParam$.asObservable();
 }

feature-libs/user/profile/components/close-account/components/close-account-modal/close-account-modal.component.spec.ts

@@ -7,9 +7,9 @@ import {
   RoutingService,
 } from '@spartacus/core';
 import { ICON_TYPE, ModalService } from '@spartacus/storefront';
+import { UserProfileFacade } from '@spartacus/user/profile/root';
 import { Observable, of, throwError } from 'rxjs';
 import { CloseAccountModalComponent } from './close-account-modal.component';
-import { UserProfileFacade } from '@spartacus/user/profile/root';
 import createSpy = jasmine.createSpy;
 
 class MockGlobalMessageService implements Partial<GlobalMessageService> {
@@ -31,7 +31,7 @@ class MockAuthService implements Partial<AuthService> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go() {}
+  go = () => Promise.resolve(true);
 }
 
 @Component({

projects/core/src/auth/user-auth/facade/auth.service.spec.ts

@@ -48,7 +48,7 @@ class MockAuthRedirectService implements Partial<AuthRedirectService> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go() {}
+  go = () => Promise.resolve(true);
 }
 
 describe('AuthService', () => {

projects/core/src/auth/user-auth/services/auth-http-header.service.spec.ts

@@ -31,7 +31,7 @@ class MockOAuthLibWrapperService implements Partial<OAuthLibWrapperService> {
 }
 
 class MockRoutingService implements Partial<RoutingService> {
-  go() {}
+  go = () => Promise.resolve(true);
 }
 
 class MockOccEndpointsService implements Partial<OccEndpointsService> {

projects/core/src/routing/facade/routing.service.spec.ts

@@ -1,4 +1,6 @@
+import { Location } from '@angular/common';
 import { TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import * as NgrxStore from '@ngrx/store';
 import { Store, StoreModule } from '@ngrx/store';
@@ -29,12 +31,19 @@ class MockRoutingParamsService {
   }
 }
 
+class MockLocation implements Partial<MockLocation> {
+  back = jasmine.createSpy('back');
+  forward = jasmine.createSpy('forward');
+}
+
 describe('RoutingService', () => {
   let store: Store<RouterState>;
   let service: RoutingService;
   let winRef: WindowRef;
   let urlService: SemanticPathService;
   let routingParamsService: RoutingParamsService;
+  let router: Router;
+  let location: Location;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
@@ -44,6 +53,7 @@ describe('RoutingService', () => {
         WindowRef,
         { provide: SemanticPathService, useClass: MockSemanticPathService },
         { provide: RoutingParamsService, useClass: MockRoutingParamsService },
+        { provide: Location, useClass: MockLocation },
       ],
     });
 
@@ -52,6 +62,8 @@ describe('RoutingService', () => {
     winRef = TestBed.inject(WindowRef);
     urlService = TestBed.inject(SemanticPathService);
     routingParamsService = TestBed.inject(RoutingParamsService);
+    router = TestBed.inject(Router);
+    location = TestBed.inject(Location);
     spyOn(store, 'dispatch');
   });
 
@@ -60,31 +72,33 @@ describe('RoutingService', () => {
   });
 
   describe('go', () => {
-    it('should dispatch navigation action with generated path', () => {
-      spyOn(urlService, 'transform').and.returnValue(['generated', 'path']);
-      service.go([]);
-      expect(store.dispatch).toHaveBeenCalledWith(
-        new RoutingActions.RouteGoAction({
-          path: ['generated', 'path'],
-          extras: undefined,
-        })
-      );
+    it('should return Promise for the Angular navigation', () => {
+      const navigationPromise = Promise.resolve(true);
+      const queryParams = { test: true };
+      spyOn(urlService, 'transform').and.returnValue(['url']);
+      spyOn(router, 'navigate').and.returnValue(navigationPromise);
+      const result = service.go(['url'], { queryParams });
+      expect(router.navigate).toHaveBeenCalledWith(['url'], { queryParams });
+      expect(result).toBe(navigationPromise);
     });
 
-    it('should call url service service with given array of commands', () => {
-      spyOn(urlService, 'transform');
+    it('should call url service with given array of commands', () => {
       const commands = ['testString', { cxRoute: 'testRoute' }];
+      const resultPath = ['testString', 'testPath'];
+      spyOn(urlService, 'transform').and.returnValue(resultPath);
       service.go(commands);
       expect(urlService.transform).toHaveBeenCalledWith(commands);
     });
   });
 
   describe('goByUrl', () => {
-    it('should dispatch GoByUrl action', () => {
-      service.goByUrl('test');
-      expect(store.dispatch).toHaveBeenCalledWith(
-        new RoutingActions.RouteGoByUrlAction('test')
-      );
+    it('should return Promise for the Angular navigation', () => {
+      const navigationPromise = Promise.resolve(true);
+      const queryParams = { test: true };
+      spyOn(router, 'navigateByUrl').and.returnValue(navigationPromise);
+      const result = service.goByUrl('url', { queryParams });
+      expect(router.navigateByUrl).toHaveBeenCalledWith('url', { queryParams });
+      expect(result).toBe(navigationPromise);
     });
   });
 
@@ -125,34 +139,26 @@ describe('RoutingService', () => {
   });
 
   describe('back', () => {
-    it('should dispatch back action', () => {
-      service.back();
-      expect(store.dispatch).toHaveBeenCalledWith(
-        new RoutingActions.RouteBackAction()
-      );
-    });
-
     it('should go to homepage on back action when referer is not from the app', () => {
       spyOnProperty(document, 'referrer', 'get').and.returnValue(
         'http://foobar.com'
       );
+      spyOn(service, 'go');
       spyOn(urlService, 'transform').and.callFake((x) => x);
       service.back();
-      expect(store.dispatch).toHaveBeenCalledWith(
-        new RoutingActions.RouteGoAction({
-          path: ['/'],
-          extras: undefined,
-        })
-      );
+      expect(service.go).toHaveBeenCalledWith(['/']);
+    });
+
+    it('should call Location.back', () => {
+      service.back();
+      expect(location.back).toHaveBeenCalled();
     });
   });
 
   describe('forward', () => {
-    it('should dispatch forward action', () => {
+    it('should call Location.forward', () => {
       service.forward();
-      expect(store.dispatch).toHaveBeenCalledWith(
-        new RoutingActions.RouteForwardAction()
-      );
+      expect(location.forward).toHaveBeenCalled();
     });
   });