Angular 单元测试表单验证 - 控制保持不变

Question

我有一个具有表单验证功能的 Angular 组件。我正在进行单元测试，以确保在输入无效时显示错误消息。

但是当我尝试更改<input> 框的值时，控件的状态仍然是untouched，并且不显示错误。

代码如下：

<form #zipForm="ngForm">
<label>
    <input type="text" id="postalCode" [(ngModel)]="postalCode" #postalCodeElem="ngModel" name="postalCode" [pattern]="validationPattern" required>
    <button type="button" (click)="click(postalCodeElem.value)">Enroll</button>
    <div *ngIf="postalCodeElem.invalid && postalCodeElem.touched">
    <span id="required-postal-code" *ngIf="postalCodeElem?.errors?.required">
        zip/postal code is required
    </span>
    <span id="invalidPostalCode" *ngIf="postalCodeElem?.errors?.pattern">
        zip postal code is invalid
    </span>
    </div>
</label>
</form>

测试文件：

it('should show error in case of invalid postal code', () => {
    const elem: HTMLElement = fixture.nativeElement;
    const inputElem: HTMLInputElement = elem.querySelector('input');

    inputElem.value = 'L5L2';
    inputElem.dispatchEvent(new Event('input', { bubbles: true }));

    fixture.detectChanges();

    const invalidErrorElem: any = elem.querySelector('span');

    console.log('elem', elem);
    console.log('invalidErrorElem', invalidErrorElem);

    expect(invalidErrorElem).not.toBeNull();
});

我创建了一个 stackblitz 来演示这个问题：https://stackblitz.com/edit/angular-testing-45zwkn?file=app%2Fapp.component.spec.ts

知道我做错了什么吗？

Answer 1

您需要集中注意力并模糊您的输入：

inputElem.focus();
fixture.componentInstance.postalCode = 'L5L2';
inputElem.blur();
fixture.detectChanges();