Question

我有以下测试。它聚焦一个html元素，设置它的值然后触发模糊事件处理程序。模糊事件会触发验证检查，如果无效则应禁用保存按钮。

目前在测试运行期间，这是失败的，但是如果我设置了一个断点并遍历它，它将在保存按钮上正确设置disabled属性并工作。

基于此我的猜测是whenStable承诺不等待元素完全重新渲染。所以我在检查按钮状态之前扔了一个setTimeout来等待一秒钟，但仍然没有为我工作。

ComponentFixture类上是否有一个函数会在触发回调或解析promise之前等待元素完全重新呈现？

fixture.whenStable().then(() => {
                inputHomePhone.nativeElement.focus();
                setInputValue(inputHomePhone, "123");
                inputHomePhone.nativeElement.blur();
                fixture.detectChanges();
                return fixture.whenStable();
            })
            .then(() => {
                setTimeout(() => {
                    expect(btnSave.classes['disabled']).toBe(true);
                    expect(btnSave.nativeElement.disabled).toBe(true);
                    debugger;
                }, 1000)
            })

此处按钮的Html。当表单上的任何输入值无效时，它将被禁用。

 <button *ngIf="!loading"
                    id="btn-save"
                    [class.disabled]="!(profileForm?.valid)"
                    class="btn primary top-space uppercase"
                    [disabled]="!(profileForm?.valid)"
                    (click)="saveChanges()">
                SAVE
            </button>

Answer 1

好吧，我想出了一种触发模糊的方法，对我有用。

通过nativeElement属性执行此操作使其随机工作。我确信这是因为Angular 2正在管理DOM事件。通过更改行

False

到

Select Case

保存按钮立即禁用，每次都会通过测试。

我认为通常你应该使用inputHomePhone.nativeElement.blur();函数来测试在Angular 2中使用DOM事件。

如何在Angular 2单元测试中等待DOM元素完成渲染

1 个答案: