fix: change accessor to property in ActivatedRouteStub (#346)

Due to a breaking change in Typescript 4 a property could not be overwritten with an accessor
In the ActivatedRouteStub the snapshow property was overwritten with an get accessor

Co-authored-by: enno <enno.lohmann@codecentric.de>

Author: EnnoLohmann

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

@@ -1,13 +1,4 @@
-import {
-  convertToParamMap,
-  ActivatedRoute,
-  ActivatedRouteSnapshot,
-  Data,
-  Params,
-  ParamMap,
-  UrlSegment,
-  RouterStateSnapshot
-} from '@angular/router';
+import { convertToParamMap, ActivatedRoute, ActivatedRouteSnapshot, Data, Params, ParamMap, UrlSegment } from '@angular/router';
 import { Observable, ReplaySubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -56,55 +47,55 @@ export class ActivatedRouteStub extends ActivatedRoute {
     this.fragment = this.fragmentSubject.asObservable() as Observable<string>;
     this.url = this.urlSubject.asObservable() as Observable<UrlSegment[]>;
 
+    this.snapshot = this.buildSnapshot();
+
     this.triggerNavigation();
   }
 
   public get paramMap(): Observable<ParamMap> {
     return this.paramsSubject.asObservable().pipe(map(params => convertToParamMap(params)));
   }
 
-  public get snapshot(): ActivatedRouteSnapshot {
-    const snapshot = new ActivatedRouteSnapshot();
-
-    snapshot.params = this.testParams;
-    snapshot.queryParams = this.testQueryParams;
-    snapshot.data = this.testData;
-    snapshot.fragment = this.testFragment!;
-    snapshot.url = this.testUrl;
-
-    return snapshot;
-  }
+  public snapshot: ActivatedRouteSnapshot;
 
   public setParams(params: Params): void {
     this.testParams = params;
+    this.snapshot = this.buildSnapshot();
   }
 
   public setParam(name: string, value: string): void {
     this.testParams = { ...this.testParams, [name]: value };
+    this.snapshot = this.buildSnapshot();
   }
 
   public setQueryParams(queryParams: Params): void {
     this.testQueryParams = queryParams;
+    this.snapshot = this.buildSnapshot();
   }
 
   public setQueryParam(name: string, value: string): void {
     this.testQueryParams = { ...this.testQueryParams, [name]: value };
+    this.snapshot = this.buildSnapshot();
   }
 
   public setAllData(data: Data): void {
     this.testData = data;
+    this.snapshot = this.buildSnapshot();
   }
 
   public setData(name: string, value: string): void {
     this.testData = { ...this.testData, [name]: value };
+    this.snapshot = this.buildSnapshot();
   }
 
   public setFragment(fragment: string | null): void {
     this.testFragment = fragment;
+    this.snapshot = this.buildSnapshot();
   }
 
   public setUrl(url: UrlSegment[]): void {
     this.testUrl = url;
+    this.snapshot = this.buildSnapshot();
   }
 
   public get root(): ActivatedRouteStub {
@@ -137,4 +128,16 @@ export class ActivatedRouteStub extends ActivatedRoute {
   public toString(): string {
     return 'activatedRouteStub';
   }
+
+  private buildSnapshot(): ActivatedRouteSnapshot {
+    const snapshot = new ActivatedRouteSnapshot();
+
+    snapshot.params = this.testParams;
+    snapshot.queryParams = this.testQueryParams;
+    snapshot.data = this.testData;
+    snapshot.fragment = this.testFragment!;
+    snapshot.url = this.testUrl;
+
+    return snapshot;
+  }
 }

projects/spectator/test/spectator-routing/activated-route-stub.spec.ts

@@ -0,0 +1,168 @@
+import { ActivatedRouteStub } from '../../src/lib/spectator-routing/activated-route-stub';
+import { RouteOptions } from '../../src/lib/spectator-routing/route-options';
+import { UrlSegment } from '@angular/router';
+
+describe('ActivatedRouteStub', () => {
+  it('should fill the Snapshot with empty values it no options are provided', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { params, queryParams, data, fragment, url } = activatedRouteStub.snapshot;
+
+    expect(params).toEqual({});
+    expect(queryParams).toEqual({});
+    expect(data).toEqual({});
+    expect(fragment).toBeNull();
+    expect(url).toEqual([]);
+  });
+
+  it('should fill the Snapshot with values from given option object', () => {
+    const urlSegment = new UrlSegment('test', {});
+
+    const routeOptions: RouteOptions = {
+      params: {
+        test: 'test'
+      },
+      queryParams: {
+        test: 'test'
+      },
+      data: {
+        test: 'test'
+      },
+      fragment: 'test',
+      url: [urlSegment]
+    };
+
+    const activatedRouteStub = new ActivatedRouteStub(routeOptions);
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+    const { params, queryParams, data, fragment, url } = activatedRouteStub.snapshot;
+
+    expect(params).toEqual({
+      test: 'test'
+    });
+    expect(queryParams).toEqual({
+      test: 'test'
+    });
+    expect(data).toEqual({
+      test: 'test'
+    });
+    expect(fragment).toEqual('test');
+    expect(url).toContain(urlSegment);
+  });
+
+  it('should update params in snapshot when set', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setParams({
+      test: 'test'
+    });
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { params } = activatedRouteStub.snapshot;
+
+    expect(params).toEqual({
+      test: 'test'
+    });
+  });
+
+  it('should update params in snapshot when single param is set', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setParam('test', 'test');
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { params } = activatedRouteStub.snapshot;
+
+    expect(params).toEqual({
+      test: 'test'
+    });
+  });
+
+  it('should update queryparams in snapshot when set', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setQueryParams({
+      test: 'test'
+    });
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { queryParams } = activatedRouteStub.snapshot;
+
+    expect(queryParams).toEqual({
+      test: 'test'
+    });
+  });
+
+  it('should update queryparams in snapshot when single queryparam is set', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setQueryParam('test', 'test');
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { queryParams } = activatedRouteStub.snapshot;
+
+    expect(queryParams).toEqual({
+      test: 'test'
+    });
+  });
+
+  it('should update data in snapshot when set', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setAllData({
+      test: 'test'
+    });
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { data } = activatedRouteStub.snapshot;
+
+    expect(data).toEqual({
+      test: 'test'
+    });
+  });
+
+  it('should update data in snapshot when single data is set', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setData('test', 'test');
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { data } = activatedRouteStub.snapshot;
+
+    expect(data).toEqual({
+      test: 'test'
+    });
+  });
+
+  it('should update fragment in snapshot when set', () => {
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setFragment('test');
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { fragment } = activatedRouteStub.snapshot;
+
+    expect(fragment).toEqual('test');
+  });
+
+  it('should update URL in snapshot when single data is set', () => {
+    const urlSegment = new UrlSegment('test', {});
+
+    const activatedRouteStub = new ActivatedRouteStub();
+
+    activatedRouteStub.setUrl([urlSegment]);
+
+    expect(activatedRouteStub.snapshot).not.toBeNull();
+
+    const { url } = activatedRouteStub.snapshot;
+
+    expect(url).toContain(urlSegment);
+  });
+});