如何测试路由器.使用relativeTo?

Question

测试router.navigate方法是否接受提供的queryParams并导航到正确的位置路径的正确方法应该是什么?

组件文件:——

syncQueryParams() {
this.router.navigate([], {
relativeTo: this.activatedRoute,
queryParams: {
searchTerm: this.searchTerm,
taskId: this.selectedResultId,
version: this.selectedVersion,
startDate: this.startDate
},
queryParamsHandling: 'merge'
});
}

试验台配置:

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [DataListingViewComponent],
schemas: [NO_ERRORS_SCHEMA],
providers: [{
provide: DataListingViewFacade,
useValue: {
dispatch: jest.fn()
}
}, DataListingViewFacade, provideMockStore({
selectors: [],
})],
imports: [
RouterTestingModule.withRoutes([]),
AgGridModule,
NgbModule
]
})
.compileComponents();
});

测试SyncQueryParmas:——

it(`syncQueryParams() should navigate to data-list page with query params`, () => {
const version = component.selectedVersion;
const startDate = component.startDate;
const taskId = component.taskId;
const searchTerm = component.searchTerm;
spyOn(router, "navigate");
component.syncQueryParams();
expect(router.navigate).toHaveBeenCalledWith(['data-list'], {
queryParams: { taskId: 1309, version: '133', startDate: '2021-01-11', searchTerm: 'hjgj' }
});
}
);

这个测试失败了，因为它期望navigate方法的所有选项:——

DataListingViewComponent › syncQueryParams() should navigate with query params
expect(spy).toHaveBeenCalledWith(...expected)
- Expected
+ Received
[],
@@ -3,6 +3,159 @@
"taskId": 1309,
"startDate": "2021-01-11",
"searchTerm": "IWRD.L",
"version": "133",
},
+   "queryParamsHandling": "merge",
+   "relativeTo": ActivatedRoute {
+     "_futureSnapshot": ActivatedRouteSnapshot {
+       "_lastPathIndex": -1,
+       "_resolve": Object {},
+       "_routerState": RouterStateSnapshot {
+         "_root": TreeNode {
+           "children": Array [],
+           "value": [Circular],
+         },
+         "url": "/?searchTerm=IWRD.L&taskId=1309&version=133&startDate=2021-01-11",
+       },
+       "_urlSegment": UrlSegmentGroup {
+         "children": Object {},
+         "parent": null,
+         "segments": Array [],
+       },
+       "component": null,
+       "data": Object {},
+       "fragment": undefined,
+       "outlet": "primary",
+       "params": Object {},
+       "queryParams": Object {
+         "taskId": "1309",
+         "startDate": "2021-01-11",
+         "searchTerm": "IWRD.L",
+         "version": "133",
+       },
+       "routeConfig": null,
+       "url": Array [],
+     },
+     "_routerState": RouterState {
+       "_root": TreeNode {
+         "children": Array [],
+         "value": [Circular],
+       },
+       "snapshot": RouterStateSnapshot {
+         "_root": TreeNode {
+           "children": Array [],
+           "value": ActivatedRouteSnapshot {
+             "_lastPathIndex": -1,
+             "_resolve": Object {},
+             "_routerState": [Circular],
+             "_urlSegment": UrlSegmentGroup {
+               "children": Object {},
+               "parent": null,
+               "segments": Array [],
+             },
+             "component": null,
+             "data": Object {},
+             "fragment": undefined,
+             "outlet": "primary",
+             "params": Object {},
+             "queryParams": Object {
+               "taskId": "1309",
+               "startDate": "2021-01-11",
+               "searchTerm": "IWRD.L",
+               "version": "133",
+             },
+             "routeConfig": null,
+             "url": Array [],
+           },
+         },
+         "url": "/?searchTerm=IWRD.L&taskId=1309&version=133&startDate=2021-01-11",
+       },
+     },
+     "component": null,
+     "data": BehaviorSubject {
+       "_isScalar": false,
+       "_value": Object {},
+       "closed": false,
+       "hasError": false,
+       "isStopped": false,
+       "observers": Array [],
+       "thrownError": null,
+     },
+     "fragment": BehaviorSubject {
+       "_isScalar": false,
+       "_value": undefined,
+       "closed": false,
+       "hasError": false,
+       "isStopped": false,
+       "observers": Array [],
+       "thrownError": null,
+     },
+     "outlet": "primary",
+     "params": BehaviorSubject {
+       "_isScalar": false,
+       "_value": Object {},
+       "closed": false,
+       "hasError": false,
+       "isStopped": false,
+       "observers": Array [],
+       "thrownError": null,
+     },
+     "queryParams": BehaviorSubject {
+       "_isScalar": false,
+       "_value": Object {
+         "taskId": "1309",
+         "startDate": "2021-01-11",
+         "searchTerm": "IWRD.L",
+         "version": "133",
+       },
+       "closed": false,
+       "hasError": false,
+       "isStopped": false,
+       "observers": Array [],
+       "thrownError": null,
+     },
+     "snapshot": ActivatedRouteSnapshot {
+       "_lastPathIndex": -1,
+       "_resolve": Object {},
+       "_routerState": RouterStateSnapshot {
+         "_root": TreeNode {
+           "children": Array [],
+           "value": [Circular],
+         },
+         "url": "/?searchTerm=IWRD.L&taskId=1309&version=133&startDate=2021-01-11",
+       },
+       "_urlSegment": UrlSegmentGroup {
+         "children": Object {},
+         "parent": null,
+         "segments": Array [],
+       },
+       "component": null,
+       "data": Object {},
+       "fragment": undefined,
+       "outlet": "primary",
+       "params": Object {},
+       "queryParams": Object {
+         "taskId": "1309",
+         "startDate": "2021-01-11",
+         "searchTerm": "IWRD.L",
+         "version": "133",
+       },
+       "routeConfig": null,
+       "url": Array [],
+     },
+     "url": BehaviorSubject {
+       "_isScalar": false,
+       "_value": Array [
+         UrlSegment {
+           "parameters": Object {},
+           "path": "",
+         },
+       ],
+       "closed": false,
+       "hasError": false,
+       "isStopped": false,
+       "observers": Array [],
+       "thrownError": null,
+     },
+   },
},

Answer 1

也许您可以利用Jasmine中的args对象。

it(`syncQueryParams() should navigate to data-list page with query params`, () => {
const version = component.selectedVersion;
const startDate = component.startDate;
const taskId = component.taskId;
const searchTerm = component.searchTerm;
const navigateSpy = spyOn(router, "navigate"); // get a handle on navigateSpy
component.syncQueryParams();
expect(navigateSpy.calls.mostRecent().args[0]).toEqual(['data-list']);
expect(navigateSpy.calls.mostRecent().args[1]).toBeTruthy();
// for the 2nd expect, you can get fancy with jasmine.objectContaining or 
// other assertions
}
);