Angular 9 how to test `relativeTo` route

Question

here is my component method:

 initiateDetailsView(detailsData) {
        this.router.navigate(['./personnel-details'], {
            relativeTo: this.activatedRoute,
        });
    }

my test case:

it('should navigate to details page', () => {
        const routerNavigateSpy = spyOn(router, 'navigate');
        component.initiateDetailsView({});
        fixture.detectChanges();
        expect(routerNavigateSpy).toHaveBeenCalledWith([
            './personnel-details',
            { relativeTo: 'clinic-admin/scok-personnel' },
        ]);
    });

but getting an error as:

 Expected spy navigate to have been called with:
          [ [ './personnel-details', Object({ relativeTo: 'clinic-admin/scok-personnel' }) ] ]
        but actual calls were:
          [ [ './personnel-details' ], Object({ relativeTo: Route(url:'', path:'') }) ].

how to test the relativeTo route?

UPDATE

fdescribe('ListPersonnelComponent', () => {
    let component: ListPersonnelComponent;
    let fixture: ComponentFixture<ListPersonnelComponent>;
    let location: Location;
    let activatedRoute:ActivatedRoute;
    let router;
    const routes = [
        {
            path: 'personnel-details',
            component: PersonnelDetailsComponent,
            relativeTo: activatedRoute,
        },
    ];

  beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule.withRoutes(routes),
                SharedModule,
                BrowserAnimationsModule,
                HttpClientModule,
            ],
            declarations: [ListPersonnelComponent],
            providers: [PersonnelDataService],
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ListPersonnelComponent);
        component = fixture.componentInstance;
        router = TestBed.inject(Router);
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    

    it('should navigate to details page', () => {
        const routerNavigateSpy = spyOn(router, 'navigate');
        component.initiateDetailsView({});
        fixture.detectChanges();
        expect(routerNavigateSpy).toHaveBeenCalledWith([
            './personnel-details',
            { relativeTo: activatedRoute },
        ]);
    });
});

getting an error as :

Variable 'activatedRoute' is used before being assigned.ts(2454)

Answer 1

fdescribe('ListPersonnelComponent', () => {
  let component: ListPersonnelComponent;
  let fixture: ComponentFixture<ListPersonnelComponent>;
  let location: Location;
  let activatedRoute:ActivatedRoute;
  let router;
  const routes = [
  { path: 'personnel-details',
    component: PersonnelDetailsComponent,
// here is one issue, comment next line
// relativeTo: activatedRoute,
  },
];

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule.withRoutes(routes),
      SharedModule,
      BrowserAnimationsModule,
      HttpClientModule,
    ],
    declarations: [ListPersonnelComponent],
    providers: [PersonnelDataService],
  }).compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(ListPersonnelComponent);
  component = fixture.componentInstance;
  router = TestBed.inject(Router);
  // grab the instance used for this test
  activatedRoute = TestBed.inject(ActivatedRoute);
  fixture.detectChanges();
});

it('should create', () => {
  expect(component).toBeTruthy();
});

it('should navigate to details page', () => {
  const routerNavigateSpy = spyOn(router, 'navigate');
 
  component.initiateDetailsView({});
  fixture.detectChanges();
  expect(routerNavigateSpy).toHaveBeenCalledWith(
    // this is an array of itself, then relativeTo is an object after
    ['./personnel-details'],
    { relativeTo: activatedRoute },
  );
});
});

Best resource I've found so far on this is testing-angular free e-book. Feel free to ask other testing questions and tag me.