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

尝试获取实例中的morningModel.morning $订阅 .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();

        });         

});

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

1 个答案: