Unit Test angular component for Observable using tick and fakeAsync

Question

I see questions very similar to this already been asked multiple times but no where I found exact solution or there are a lot of solution which confuses like me who has recently started with angular.

I have an angular component like this:

export class MyTestComponent implements OnInit {
  isLoading: false;
  testOutput: any = [];
  someConstant: string = "gvt";
  private unsubscription$ = new Subject();
  constructor(private testService: TestService){}

  ngOnInit() {
    getTestOutputList(this.someConstant);
  }

  getTestOutputList(someConstant){
    this.isLoading = true;

    testService.getTestOutputList(someConstant)
      .pipe(takeUnitl(this.unsubscription$))
      .subscribe(res => {
         this.isLoading = true;
         this.testOutput = res;
       });

  }

}

I tried Spying the method getTestOutputList but I do not know how i can pass the argument for the method getTestOutputList to spyOn. And further how i can test the observable.

Answer 1

There are different ways you could approach this. I typically like to use a spy object since that lets me set up the spy for a particular service and a return value for testing in one step.

There were many errors in your code (such as missing 'this.' in front of your call to 'testService.getTestOutputList()', spelling 'takeUntil' wrong, setting isLoading to type of 'false' instead of to a boolean, etc) so I assume you did not copy and paste from working code. :)

Nevertheless, I corrected the errors and put the code into a StackBlitz to demonstrate how a component such as this could be tested. From that Stackblitz, here is the describe which includes a spy on the service and a test to show that the subscribe of the Observable is working.

describe('MyTestComponent', () => {
  let component: MyTestComponent;
  let fixture: ComponentFixture<MyTestComponent>;
  let service: TestService;
  const serviceSpy = jasmine.createSpyObj('TestService', {
    getTestOutputList : of(['the result'])
  });

  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [MyTestComponent],
        providers: [ 
          { provide: TestService, useValue: serviceSpy }
        ]
      }).compileComponents().then(() => {
        service = TestBed.get(TestService);
        fixture = TestBed.createComponent(MyTestComponent);
        component = fixture.componentInstance;
      });
  }));

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

  it('should set this.testOutput properly if subscribe is working', () => {
    fixture.detectChanges(); // Need this here to execute ngOnInit()
    expect(component.testOutput).toEqual(['the result']);
  });

});

As you can see in the StackBlitz, all the tests are passing. I hope this helps.