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

Question

What should be the right approach to test whether router.navigate method is accepting provided queryParams and navigating to right location path?

In Component file:--

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

TestBed Config:--

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

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

This test fails as it is expecting all the options with navigate method:--

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

Maybe you can take advantage of the args object from 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
            }
          );