How to test router.navigate method when using with relativeTo?

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