对使用可观察对象和异步管道的 Angular 2 组件进行单元测试答案

【问题标题】：Unit testing Angular 2 components that are using observables and the async pipe对使用可观察对象和异步管道的 Angular 2 组件进行单元测试
【发布时间】：2016-08-26 23:42:24
【问题描述】：

使用可观察的数据服务，使用异步管道直接在视图中更新数据，这证明很难测试（正常工作）。

我希望能够更新视图，触发点击事件，然后测试模型是否已正确更新（作为点击的结果），但在测试中，异步管道在绑定时不会呈现任何内容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);
    }

}

【问题讨论】：

这个问题你还需要帮助吗？
@AngularFrance 嘿伙计，不，问题最终出在 ion-checkbox 上——它与异步管道无关。 ion-checkbox 不会在单元测试场景中呈现 - 如果我用输入替换 ion-checkbox，一切正常，但使用 ion-checkbox 我只会看到 ng-bindings 注释。

标签： angular unit-testing asynchronous ionic-framework angular2-observables

【解决方案1】：

尝试在instance.morning$ subscribe中获取morningModel .subscribe((morningModel: DoneFn) => 像这样：

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

        });         

});

【讨论】：