微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

与relativeTo一起使用时如何测试router.navigate方法?

如何解决与relativeTo一起使用时如何测试router.navigate方法?

测试 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 [],+           },+     "component": null,+     "data": BehaviorSubject {
    +       "_isScalar": false,+       "_value": Object {},+       "closed": false,+       "hasError": false,+       "isstopped": false,+       "observers": Array [],+       "thrownError": null,+     "fragment": BehaviorSubject {
    +       "_isScalar": false,+       "_value": undefined,+     "outlet": "primary",+     "params": BehaviorSubject {
    +       "_isScalar": false,+     "queryParams": BehaviorSubject {
    +       "_isScalar": false,+       "_value": Object {
    +         "taskId": "1309",+     "snapshot": ActivatedRouteSnapshot {
    +       "_lastPathIndex": -1,+     "url": BehaviorSubject {
    +       "_isScalar": false,+       "_value": Array [
    +         UrlSegment {
    +           "parameters": Object {},+           "path": "",+       ],+   },

解决方法

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

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
            }
          );

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。