单元测试使用observable和异步管道的Angular 2组件

Question

使用异步管道使用可观察数据服务直接在视图中更新数据,这证明难以测试(正常工作正常).

我希望能够更新视图,触发单击事件,然后测试模型是否已正确更新(由于单击),但在测试中,异步管道在其绑定的observable触发时不会呈现任何内容事件.所以我无法在测试中与DOM交互并测试交互的结果.

找不到任何人使用异步管道对组件进行单元测试的例子,所以我很茫然.任何反馈意见.

测试:

it('Updates the availability model correctly after UI interaction.', done => {

    this.instance.morning$
        .subscribe(data => {

            let checkboxes = this.fixture.nativeElement.querySelectorAll('ion-checkbox');
            TestUtils.trigger(checkboxes[0], 'click');

            let morningModel = this.instance.model.morning;
            expect(morningModel[0].v).toEqual(true);

            done();

        });         

});

模板:

<td *ngFor="let day of morning$ | async">
    <ion-checkbox [(ngModel)]="day.v"></ion-checkbox>
</td>

零件:

@Component({
    templateUrl: 'build/modules/availability/availability.view.html',
    selector: 'availability',
    providers: [AvailabilitySvc],
    directives: [Checkbox]
})
export class AvailabilityCom {

    @Input() userId: string;
    public morning$: any;

    constructor(private svc: AvailabilitySvc) {     
        this.morning$ = svc.morning$;
        this.setEvents();
    }

    ngOnInit(){
        this.getAvailability();
    }

    getAvailability(){
        return this.svc.get(this.userId);
    }

};

模拟服务.get()通常包含对http提供程序的调用,但在模拟中我只是在模拟主题上使用模拟模型调用next并返回observable.

let subjectMock = new BehaviorSubject(model);
let observableMock$ = subjectMock.asObservable();

export class ServiceMock{

    get(id:string):any {
        subjectMock.next(model)
        return observableMock$;
    }

    get morning$(){
        return observableMock$.map((model:any) => model.morning);
    }

}

Answer 1

尝试在instance.morning$ subscribe .subscribe((morningModel: DoneFn) =>中获取morningModel，如下所示：

it('Updates the availability model correctly after UI interaction.', done => {

    this.instance.morning$
        .subscribe((morningModel: DoneFn) => {

            let checkboxes = this.fixture.nativeElement.querySelectorAll('ion-checkbox');
            TestUtils.trigger(checkboxes[0], 'click');

            let morningModel = this.instance.model.morning;
            expect(morningModel[0].v).toEqual(true);

            done();

        });         

});