在 .pipe angular 8 茉莉花中测试 observable

Question

我在我的组件中订阅了主题triggerRuleExecutionService，它正在从另一个组件发出，即 next()。

在管道内，我有 switchMap 调用 http 服务从数据库中获取数据

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

以上代码在ngOnInit

里面

下面是我测试上述功能的规范。

    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();
        });

      });
    });

测试用例失败并显示消息 Expected spy executeRules to have been called.

我做错了什么？

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'
        });
      });
    });

试试看。要进行更多测试并进行简单设置，可能会很困难。您将不得不利用更多 describe、beforeEach 等

至于你有什么，我不确定哪里不对。

在 .pipe angular 8 茉莉花中测试 observable

Testing observable inside .pipe angular 8 jasmine

jasmine

typescript

karma-runner

angular