Проверка формы углового модульного контроля - контроль остается без изменений

Question

У меня есть угловой компонент, который имеет проверку формы.Я провожу модульное тестирование, чтобы убедиться, что при неправильном вводе отображается сообщение об ошибке.

Но когда я пытаюсь изменить значение поля <input>, состояние элемента управления остается untouched, а ошибка не отображается 't display.

Вот код:

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