Angular conditional coverage inside ngAfterViewInit

Question

I have a code under ngAfterViewInit unable to coverage conditions/branches As i need to cover 100% on new code, please give me suggestions (currently at 68%)

Tried few tests but not covering branches

Answer 1

We need to mock the observable as of({...}), then we can call ngAfterViewInit which will attach the rest of the pipes to the observable, after the method runs, we subscribe and get the output, notice I use fakeAsync and flush to wait for the API to complete to evaluate the results, I hope you get the approach the solve this! do let me know if any doubts!

describe('ngAfterViewInit', () => {
    const data = {
        fund: {
          entity: [
            {
              profile: {
                ticker: 'VGRLX'
              },
              fees: {
                redemptionFee: {
                  content: null,
                }
              }
            }
          ]
        }
      };
    beforeEach(() => {
      component.data$ = of(data) as any;
    });

    it('should set the fund fess to 0.25%', fakeAsync(() => {
      component.ngAfterViewInit();
      let output = null;
      component.data$.subscribe((response: any) => output = response);
      flush();
      expect(output.fund.entity[0].fees.redemptionFee.content).toEqual("0.25%");
    }));

    it('should not set the fund fess to 0.25%', fakeAsync(() => {
      data.fund.entity[0].profile.ticker = 'asdf'; // <- typo
      component.ngAfterViewInit();
      let output = null;
      component.data$.subscribe((response: any) => output = response);
      flush();
      expect(output.fund.entity[0].fees.redemptionFee.content).toBeNull();
    }));
  });