13

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

我希望能够更新视图，触发点击事件，然后测试模型是否已正确更新（作为点击的结果），但在测试中，异步管道在其绑定的 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 并返回可观察对象。

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

}
4

1 回答 1

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

        });         

});

于 2020-02-25T14:21:50.803 回答