Testing observable inside .pipe angular 8 jasmine

Question

I have subject in my component subscribed triggerRuleExecutionService which is getting emitted ie next() from another component.

And inside pipe i am having switchMap to call http service to get data from database

 this.ruleExecutionService = this.editCheckSVC.triggerRuleExecutionService.pipe(
      switchMap(res => {
        return this.editCheckSVC.executeRules(res);
      })
    ).subscribe(res => {
      console.log(res);
    });

above code is inside ngOnInit

below is my spec to test above function.

    const ruleExecutionSubject = new Subject();

    class EditChkManagementServiceStub {
      triggerRuleExecutionService = ruleExecutionSubject.asObservable();
      executeRules() {
        return of([])
      }
   }



describe('EditcheckManagmentComponent', () => {
      let component: EditcheckManagmentComponent;
      let fixture: ComponentFixture<EditcheckManagmentComponent>;
      let debugElement: DebugElement;
      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [EditcheckManagmentComponent],
          schemas: [NO_ERRORS_SCHEMA],
          providers: [{ provide: EditCheckManagementService, useClass: EditChkManagementServiceStub }, HttpService],
          imports: [HttpClientModule]
        })
          .compileComponents();
      }));

      beforeEach(() => {

        fixture = TestBed.createComponent(EditcheckManagmentComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
        fixture.detectChanges();
      });


    it('should call rule execution API', () => {
        ruleExecutionSubject.next({
          formName: '',
          schedule: '',
          subSchedule: '',
          version: '',
          fiscalYear: '2018',
          accountingPeriod: '6'
        });

        fixture.detectChanges();
        fixture.whenStable().then(() => {
          const executionServiceInstance: EditCheckManagementService = TestBed.get(EditCheckManagementService);
          spyOn(executionServiceInstance, 'executeRules').and.callThrough();
          component.ngOnInit()
          expect(executionServiceInstance.executeRules).toHaveBeenCalled();
        });

      });
    });

Test case is failing with message Expected spy executeRules to have been called.

What I am doing wrong here?

Answer 1

describe('EditcheckManagmentComponent', () => {
      let component: EditcheckManagmentComponent;
      let fixture: ComponentFixture<EditcheckManagmentComponent>;
      let debugElement: DebugElement;
      let mockEditChkManagementService: any;
      beforeEach(async(() => {
        mockEditChkManagementService = jasmine.createSpyObj('editCheckSVC', ['executeRules']);
        // can maybe create a variable BehaviorSubject so you can call next on it and send new values.
        mockEditChkManagemenetService.triggerRuleExecutionService = new BehaviorSubject({
         formName: '',
         schedule: '',
         subSchedule: '',
         version: '',
         fiscalYear: '2018',
         accountingPeriod: '6'
        });
        TestBed.configureTestingModule({
          declarations: [EditcheckManagmentComponent],
          schemas: [NO_ERRORS_SCHEMA],
          providers: [{ provide: EditCheckManagementService, useValue: mockEditChkManagemenetService}],
          imports: [HttpClientTestingModule] // bring in the testing HTTP, not actual implementation
        })
          .compileComponents();
      }));

      beforeEach(() => {

        fixture = TestBed.createComponent(EditcheckManagmentComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
        // make mockEditChkManagementService return an empty array
        mockEditChkManagementService.executeRules.and.returnValue(of([])); 
        // this first fixture.detectChanges() will call ngOnInit, no need to do it manually
        fixture.detectChanges();
      });


    it('should call rule execution API', () => {
       expect(mockEditChkManagementService.executeRules).toHaveBeenCalledWith({
         formName: '',
         schedule: '',
         subSchedule: '',
         version: '',
         fiscalYear: '2018',
         accountingPeriod: '6'
        });
      });
    });

Try that. To make more tests and to have an easy setup, it might be difficult. You will have to leverage more describe s, beforeEach , etc.

As for what you have, I am not sure what is wrong.