使用Jasmine监视Observable Subscription的结果

时间:2017-03-31 08:05:28

标签: unit-testing angular typescript jasmine karma-jasmine

我是Jasmine单元测试角度组件,它使用Observables。我的组件有我正在测试的生命周期钩子:

ngOnInit() {
  this.dataService.getCellOEE(this.cell).subscribe(value => this.updateChart(value));
}

我有一个测试,确保已调用getCellOEE,但现在我想检查当observable用新值解析时调用updateChart。这就是我到目前为止所做的:

let fakeCellService = {
  getCellOEE: function (value): Observable<Array<IOee>> {
    return Observable.of([{ time: moment(), val: 67 }, { time: moment(), val: 78 }]);
  }
};

describe('Oee24Component', () => {
  let component: Oee24Component;
  let service: CellService;
  let injector: Injector;
  let fixture: ComponentFixture<Oee24Component>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [Oee24Component],
      providers: [{ provide: CellService, useValue: fakeCellService }]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(Oee24Component);
    component = fixture.componentInstance;
    injector = getTestBed();
    service = injector.get(CellService)
    fixture.detectChanges();
    spyOn(service, 'getCellOEE').and.returnValue({ subscribe: () => { } });
    spyOn(component, 'updateChart');
  });

  it('should get cell oee on init', () => {
    component.ngOnInit();
    expect(service.getCellOEE).toHaveBeenCalled();
  });

  it('should update chart on new data', () => {
    component.ngOnInit();
    expect(component.updateChart).toHaveBeenCalled();
  });
});

然而,我收到错误:

  

chrome 56.0.2924(Windows 10 0.0.0)Oee24Component应该更新新数据的图表FAILED

     

已经调用了预期的间谍updateChart。

大概这是一个时间问题,因为当测试检查时,observable不一定能解决?如果是这种情况,我该如何正确设置?

更新

这是我的组件:

@Component({
  selector: 'app-oee24',
  templateUrl: './oee24.component.html',
  styleUrls: ['./oee24.component.css']
})
export class Oee24Component implements OnInit {
  public barChartData: any[] = [{ data: [], label: 'OEE' }];

  constructor(public dataService: CellService) { }

  ngOnInit() {
    this.dataService.getCellOEE(this.cell).subscribe(value => this.updateChart(value));
  }

  updateChart(data: Array<IOee>) {
    this.barChartData[0].data = data.map(val => val.val);
  }
}

4 个答案:

答案 0 :(得分:0)

你有没有提出解决方案?如何使用jasmine-marbles包和complete活动?

it('should update chart on new data', () => {
    const obs$ = cold('--a-|');
    spyOn(service, 'getCellOEE').and.returnValue(obs$);
    component.ngOnInit(); 
    obs$.subscribe({
        complete: () => {
            expect(component.updateChart).toHaveBeenCalledWith('a');
        }
    });
});

答案 1 :(得分:0)

不确定这是否是最好的方法,但是我已经看到它在我正在处理的项目中起作用。该方法基本上是获得对提供给subscription方法的回调函数的引用,并手动调用它以模拟观察者发出一个值:

it('should update chart on new data', () => {
    component.ngOnInit();

    // this is your mocked observable
    const obsObject = service.getCellOEE.calls.mostRecent().returnValue;

    // expect(obsObject.subscribe).toHaveBeenCalled() should pass

    // get the subscribe callback function you provided in your component code
    const subscribeCb = obsObject.subscribe.calls.mostRecent().args[0];

    // now manually call that callback, you can provide an argument here to mock the "value" returned by the service
    subscribeCb(); 

    expect(component.updateChart).toHaveBeenCalled();
  });

答案 2 :(得分:0)

代替

spyOn(service, 'getCellOEE').and.returnValue({ subscribe: () => { } });

您可以尝试

spyOn(service, 'getCellOEE').and.returnValue( {subscribe: (callback) => callback()});

答案 3 :(得分:0)

fixture.detectChanges 触发 ngOnInit。因此,如果执行了 ngOnInit,则无需手动调用 fixture.detectChanges

这是一个不好的做法to check if the method was called。相反,检查代码执行的预期结果更可靠。

spyOn(service, 'getCellOEE').and.returnValue({ subscribe: () => { } }); 中不需要,因为 fakeCellService 已经正确模拟了服务。

测试的代码是异步的,所以我们需要等到它被执行。 await fixture.whenStable(); 正是这样做的。

所以,结果测试:

const fakeData = [{ time: moment(), val: 67 }, { time: moment(), val: 78 }];
const expectedChartData = [67, 78];
const fakeCellService = {
  getCellOEE: function (value): Observable<Array<IOee>> {
    return Observable.of(fakeData);
  }
};

describe('Oee24Component', () => {
  let component: Oee24Component;
  let service: CellService;
  let injector: Injector;
  let fixture: ComponentFixture<Oee24Component>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [Oee24Component],
      providers: [{ provide: CellService, useValue: fakeCellService }]
    })
      .compileComponents();
  }));

  beforeEach(async () => {
    fixture = TestBed.createComponent(Oee24Component);
    component = fixture.componentInstance;
    fixture.detectChanges();
    await fixture.whenStable();
  });

  it('maps and saves value from the CellService.getCellOEE to barChartData[0].data when initialized', () => {
    expect(component.barChartData[0].data).toEqual(expectedChartData);
  });
});