feat(routing): add support for ActivatedRoute url property

README.md

@@ -559,6 +559,11 @@ interface SpectatorRouting<C> extends Spectator<C> {
  * Updates the route fragment and triggers a route navigation.
  */
  setRouteFragment(fragment: string | null): void;
+
+ /**
+ * Updates the route url and triggers a route navigation.
+ */
+ setRouteUrl(url: UrlSegment[]): void;
 }
 ```
 
@@ -616,6 +621,7 @@ The `createRoutesFactory` function can take the following options, on top of the
 * `queryParams`: initial query params to use in `ActivatedRoute` stub
 * `data`: initial data to use in `ActivatedRoute` stub
 * `fragment`: initial fragment to use in `ActivatedRoute` stub
+* `url`: initial URL segments to use in `ActivatedRoute` stub
 * `stubsEnabled` (default: `true`): enables the `ActivatedRoute` stub, if set to `false` it uses `RouterTestingModule` instead
 * `routes`: if `stubsEnabled` is set to false, you can pass a `Routes` configuration for `RouterTestingModule`
 

projects/spectator/src/lib/spectator-routing/activated-route-stub.ts

@@ -1,4 +1,4 @@
-import { convertToParamMap, ActivatedRoute, ActivatedRouteSnapshot, Data, Params, ParamMap } from '@angular/router';
+import { convertToParamMap, ActivatedRoute, ActivatedRouteSnapshot, Data, Params, ParamMap, UrlSegment } from '@angular/router';
 import { Observable, ReplaySubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -14,11 +14,13 @@ export class ActivatedRouteStub extends ActivatedRoute {
  private testQueryParams: Params = {};
  private testData: Data = {};
  private testFragment: string | null = null;
+ private testUrl: UrlSegment[] = [];
 
  private readonly paramsSubject = new ReplaySubject<Params>(1);
  private readonly queryParamsSubject = new ReplaySubject<Params>(1);
  private readonly dataSubject = new ReplaySubject<Data>(1);
  private readonly fragmentSubject = new ReplaySubject<string | null>(1);
+ private readonly urlSubject = new ReplaySubject<UrlSegment[]>(1);
 
  constructor(options?: RouteOptions) {
  super();
@@ -28,12 +30,14 @@ export class ActivatedRouteStub extends ActivatedRoute {
  this.testQueryParams = options.queryParams || {};
  this.testData = options.data || {};
  this.testFragment = options.fragment || null;
+ this.testUrl = options.url || [];
  }
 
  this.params = this.paramsSubject.asObservable();
  this.queryParams = this.queryParamsSubject.asObservable();
  this.data = this.dataSubject.asObservable();
  this.fragment = this.fragmentSubject.asObservable() as Observable<string>;
+ this.url = this.urlSubject.asObservable() as Observable<UrlSegment[]>;
 
  this.triggerNavigation();
  }
@@ -49,6 +53,7 @@ export class ActivatedRouteStub extends ActivatedRoute {
  snapshot.queryParams = this.testQueryParams;
  snapshot.data = this.testData;
  snapshot.fragment = this.testFragment!;
+ snapshot.url = this.testUrl;
 
  return snapshot;
  }
@@ -81,6 +86,10 @@ export class ActivatedRouteStub extends ActivatedRoute {
  this.testFragment = fragment;
  }
 
+ public setUrl(url: UrlSegment[]): void {
+ this.testUrl = url;
+ }
+
  public get children(): ActivatedRouteStub[] {
  return [this];
  }
@@ -97,6 +106,7 @@ export class ActivatedRouteStub extends ActivatedRoute {
  this.queryParamsSubject.next(this.testQueryParams);
  this.dataSubject.next(this.testData);
  this.fragmentSubject.next(this.testFragment);
+ this.urlSubject.next(this.testUrl);
  }
 
  public toString(): string {

projects/spectator/src/lib/spectator-routing/create-factory.ts

@@ -60,10 +60,10 @@ export function createRoutingFactory<C>(typeOrOptions: Type<C> | SpectatorRoutin
  });
  }
 
- const { params, queryParams, data, fragment } = { ...options, ...overrides };
+ const { params, queryParams, data, fragment, url } = { ...options, ...overrides };
 
  TestBed.overrideProvider(ActivatedRoute, {
- useValue: new ActivatedRouteStub({ params, queryParams, data, fragment })
+ useValue: new ActivatedRouteStub({ params, queryParams, data, fragment, url })
  });
 
  const spectator = createSpectatorRouting(options, props);

projects/spectator/src/lib/spectator-routing/options.ts

@@ -21,7 +21,8 @@ const defaultRoutingOptions: OptionalsRequired<SpectatorRoutingOptions<any>> = {
  fragment: null,
  mockRouterLinks: true,
  stubsEnabled: true,
- routes: []
+ routes: [],
+ url: []
 };
 
 /**

projects/spectator/src/lib/spectator-routing/route-options.ts

@@ -1,8 +1,9 @@
-import { Data, Params } from '@angular/router';
+import { Data, Params, UrlSegment } from '@angular/router';
 
 export interface RouteOptions {
  params?: Params;
  queryParams?: Params;
  data?: Data;
  fragment?: string | null;
+ url?: UrlSegment[];
 }

projects/spectator/src/lib/spectator-routing/spectator-routing.ts

@@ -1,6 +1,6 @@
 import { DebugElement } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
-import { Event, Router } from '@angular/router';
+import { Event, Router, UrlSegment } from '@angular/router';
 
 import { Spectator } from '../spectator/spectator';
 
@@ -89,6 +89,16 @@ export class SpectatorRouting<C> extends Spectator<C> {
  }
  }
 
+ /**
+ * Updates the route url and triggers a route navigation.
+ */
+ public setRouteUrl(url: UrlSegment[]): void {
+ if (this.checkStubPresent()) {
+ this.activatedRouteStub.setUrl(url);
+ this.triggerNavigationAndUpdate();
+ }
+ }
+
  /**
  * Emits a router event
  */

projects/spectator/test/with-routing/my-page.component.spec.ts

@@ -1,4 +1,4 @@
-import { NavigationStart, Router, RouterLink } from '@angular/router';
+import { NavigationStart, Router, RouterLink, UrlSegment } from '@angular/router';
 import { createRoutingFactory } from '@ngneat/spectator';
 import { Component } from '@angular/core';
 import { Location } from '@angular/common';
@@ -17,11 +17,13 @@ describe('MyPageComponent', () => {
  });
 
  describe('route options', () => {
+ const url = [new UrlSegment('/url-path', {})];
  const createComponent = createRoutingFactory({
  component: MyPageComponent,
  data: { title: 'lorem', dynamicTitle: 'ipsum' },
  params: { foo: '1', bar: '2' },
- queryParams: { baz: '3' }
+ queryParams: { baz: '3' },
+ url: url
  });
 
  it('should create with default options', () => {
@@ -33,6 +35,8 @@ describe('MyPageComponent', () => {
  expect(spectator.query('.foo')).toHaveText('1');
  expect(spectator.query('.bar')).toHaveText('2');
  expect(spectator.query('.baz')).toHaveText('3');
+
+ expect(spectator.component.url).toEqual(url);
  });
 
  it('should create with overridden options', () => {
@@ -68,6 +72,11 @@ describe('MyPageComponent', () => {
  expect(spectator.query('.bar')).toHaveText('X');
  expect(spectator.query('.baz')).toHaveText('Y');
  expect(spectator.component.fragment).toBe('lorem');
+
+ const url = [new UrlSegment('/url-path', {})];
+ spectator.setRouteUrl(url);
+
+ expect(spectator.component.url).toEqual(url);
  });
 
  it('should support snapshot data', () => {

projects/spectator/test/with-routing/my-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, UrlSegment } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -22,6 +22,7 @@ export class MyPageComponent implements OnInit {
  public bar?: string;
  public baz$!: Observable<string>;
  public fragment!: string | null;
+ public url?: UrlSegment[];
 
  constructor(private readonly route: ActivatedRoute, private readonly router: Router) {}
 
@@ -33,6 +34,7 @@ export class MyPageComponent implements OnInit {
  this.route.paramMap.subscribe(params => (this.bar = params.get('bar')!));
  this.baz$ = this.route.queryParams.pipe(map(params => params.baz));
  this.route.fragment.subscribe(fragment => (this.fragment = fragment));
+ this.route.url.subscribe(url => (this.url = url));
  }
 
  public navigate(): void {