Angular testing ngOnInit with sevice calls

Question

I am learning unit testing in Angular using jasmine. I have a component in which the ngOnInit() method has certain service calls. Below is my ngOnInit() method:

ngOnInit() {
    this.componentInteractionService.resetCurrentMenu();
    this.router.paramMap.subscribe(params => {
      this.currentContentUrl = params.get("currentContentUrl");
      let tmp = params.get("contentTitle");
      this.contentSubstitle = params.get("contentSubtitle");
      if (tmp == undefined) {
        let url = this.currentContentUrl;
        this.contentTitle = url.substring(url.lastIndexOf("/") + 1, url.length);
      } 
      else {
        this.contentTitle = tmp;
      }
    });
  }

So how should I test so that all the lines of the ngOnInit() method are covered? I mean I need full code coverage. In my spec.ts:

it('should call all methods in ngOnInit', () => {
    component.ngOnInit();
    .......
    .......
  });

What should I write after component.ngOnInit();? Please help. I can test the first line which is: this.componentInteractionService.resetCurrentMenu(); But how to test the rest of the lines?

You can mock the `paramMap` to return the values you require. Return a value such that the `if` block is covered and you can assert `contentTitle`, `contentSubtitle` and `currentContentUrl` and the same for the `else` block. https://stackoverflow.com/questions/45917883/how-do-you-mock-activatedroute That's how you mock paramMap and for you you will need to mock `params.get` as well. — AliF50, Mar 23 '21 at 12:46
@AliF50 The if condition requires tmp to be undefined....but tmp is a let variable. How to set tmp to be undefined? — Dhritiman Tamuli Saikia, Mar 23 '21 at 14:06
But `tmp` gets set from `params.get('contentTitle')` and you should have control of this in your tests. — AliF50, Mar 23 '21 at 15:22
@DhritimanTamuliSaikia: would you mind letting me know any comments on my answer ? — Shashank Vivek, Mar 30 '21 at 06:21
@ShashankVivek Sorry for the late reply...But what happened is that I am asked to do the testing using Jest now...So I am facing a couple of other issues handling Jest...Didn't check whether your code is working or not. — Dhritiman Tamuli Saikia, Mar 30 '21 at 07:17

score 0 · Answer 1 · answered Mar 23 '21 at 15:44

Try this out

  TestBed.configureTestingModule({
      declarations: [YourComponenToTest],
      providers: [
        {
          provide: ActivatedRoute,
          useValue: {
            paramMap: of([
             {currentContentUrl: 'ccu/tt'}
             {contentSubtitle: 'cs'},
             {contentTitle: 'ct'}
             ]),
          },
        },
      ]
    });

   it('should call all methods in ngOnInit', () => {
      spyOn(component.componentInteractionService,'resetCurrentMenu')
              .and.returnValue('');
      component.ngOnInit();
      expect(component.currentContentUrl).toBe('ccu/tt');
      // similar for component.contentSubstitle for 'cs'
      // similar for component.contentTitle for 'ct'
    });

   it('should set in 'contentTitle' accordingly in ngOnInit', () => {
      component.route.paramMap = of([
             {currentContentUrl: 'ccu/tt'}
             {contentSubtitle: 'cs'}
             ])
      component.ngOnInit();
      expect(component.currentContentUrl).toBe('ccu/tt');
      // similar for component.contentSubstitle for 'cs'
      // similar for component.contentTitle for 'tt' 
    });

Let me know if the mocking works

Angular testing ngOnInit with sevice calls

1 Answers1