如何在 Angular 中测试简单导航 function

Question

this is my function

  public onBackButtonClick(): void {
    void this.router.navigate(['/users/manage-user']);
  }

This is the test code i have written

   const router = {
     navigate: jasmine.createSpy('navigate'),
   };
  it('should navigate to "users/manage-user" page', () => {
    component.onBackButtonClick(); // call router.navigate
    expect(router.navigate).toHaveBeenCalledWith(['/users/manage-user']);
  });

the error I am getting is

   Expected spy navigate to have been called with:
   [ [ '/users/manage-user' ] ]
   but it was never called.
   Error: Expected spy navigate to have been called with:
   [ [ '/users/manage-user' ] ]
   but it was never called.

Answer 1

I think the problem is due to the fact that the "Route" is not enough to spy on

const routerSpy = jasmine.createSpyObj('Router', {
  navigate: of({}),
  params: of({id: 1})
});
/// in testBed
TestBed.configureTestingModule({
   providers: [{
     provide: Router,
     useValue: routerSpy,
   }],
});

you probably need to add the variable as a provider as in the example and use the CreateSpyObj method

jasmine.createSpy can be used when there is no function to spy on. It will track calls and arguments like a spyOn but there is no implementation.

jasmine.createSpyObj is used to create a mock that will spy on one or more methods. It returns an object that has a property for each string that is a spy.