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

我创建了一个堆栈闪电来演示该问题：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();

角度单元测试表格验证-控件保持不变

1 个答案: