Angular: How to use router in angular unit testing

Question

I'm writing a test case in angular. I have written a condition if res.length === 1 redirect to the details page. (this.router.navigate(['details', id])). I'm getting the id from the first array of the object in body response as const id = res[0].id. These both line are not covered in my code coverage. Can anyone let me know where I made mistake?

I'm getting Expected spy navigate to have been called with [ [ '/product-details', 'SAAASD0001' ] ] but it was never called.

app.component.spec.ts

let router = {navigate: jasmine.createSpy('navigate')};

TestBed.configureTestingModule({
  imports: [RouterTestingModule],
  providers: [
    { provide: Router, useValue: router }
  ]
})

it('should take data from store', () => {
  const mockData = [
      {
        id: '123',
        name: 'Stackoverlow',
      }
  ]
  expect(component.getList).toEqual(mockData);

  const productId = mockData[0].id;
  expect(router.navigate).toHaveBeenCalledWith(['/details', id]);
});

app.component.ts

  getList() {
    this.store
      .select('content', 'catalogue')
      .pipe(takeUntil(this.onDestroy$))
      .subscribe((res) => {
        Iif (res.length === 1) {
          // this line doesn't cover
          const id = res[0].id;
          // this line doesn't cover
          this.router.navigate(['details', id]);
        } else {
          this.list = category(res);
        }
      });
  }

When are you calling the getList() method? You seem to be missing the () — satchcoder
– satchcoder, Commented Apr 23, 2020 at 21:05
@satchcoder hmm that's not an issue. issue is how i can cover router code in testing :( — SKL
– SKL, Commented Apr 24, 2020 at 3:28

Shashank Vivek · Accepted Answer · 2020-04-24 15:33:18Z

1

Make Router and Store public in component and try:

TestBed.configureTestingModule({
  imports: [RouterTestingModule],
  providers: [Router,Store ]
})

it('should take data from store', () => {
  const response = [{id: 'val'}];
  spyOn(component.store,"select").and.returnValue(of(response));
  spyOn(component.router,"navigate").and.callThrough();
  component.getList();
  expect(router.navigate).toHaveBeenCalledWith(['/details', response[0].id]);
});

similarly cover elsepart by changing const response = [{id: 'val'}];

answered Apr 24, 2020 at 15:33

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sanket wani · Accepted Answer · 2020-04-26 05:43:26Z

0

Add this thing to your imports :

 RouterTestingModule.withRoutes([
          { path: 'path1', component: TestComponent1},
          { path: 'home', component: DashboardComponent }
        ]),

later on in your test case : you can spy on "Navigate" of Router and and use it for redirection to any component mentioned in imports.

spyOn(Router,"navigate").and.callthrough();
router.navigate([/path1]);

answered Apr 26, 2020 at 5:43

Sanket wani

2131 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular: How to use router in angular unit testing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related