Текст угловой ошибки не отображается при тестировании неверной формы

Question

В моем приложении Angular у меня есть простой компонент, который содержит форму с полем ввода текста.

В эти поля ввода допускается только строка длиной менее 255 символов.Когда пользователь вставляет текст длиной более 255 символов, отображается сообщение об ошибке:

Это тестовый пример, который я написал:

it('should display error when the inserted description text is too long', () => {
  const inputElement: HTMLInputElement = hostElement.querySelector('.input-element');

  inputElement.value = getRandomString(256);
  inputElement.dispatchEvent(new Event('input'));
  fixture.detectChanges();

  const errorElement: HTMLElement = hostElement.querySelector('.error-element');

  expect(errorElement).toBeTruthy();
  expect(errorElement.innerText).toContain('Please enter no more than 255 characters.');
});

Однако, несмотря на то, что я использую fixture.detectChanges() после отправки события input, и, несмотря на то, что состояние управления формой имеет значение INVALID и имеет ошибку (я проверил отладку кода), сообщение об ошибке не отображаетсяво время теста, поэтому ожидания не удаются.

Answer 1

Проблема в том, что сообщение об ошибке фактически не отображается, пока пользователь не уйдет из поля (например, щелкнув где-нибудь еще или нажав клавишу TAB).

Итак, чтобы это исправить, нам нужно inputElement для отправки события blur :

inputElement.dispatchEvent(new Event('blur'));

Теперь тест выглядит так:

it('should display error when the inserted description text is too long', () => {
  const inputElement: HTMLInputElement = hostElement.querySelector('.input-element');

  inputElement.value = getRandomString(256);
  inputElement.dispatchEvent(new Event('input'));
  inputElement.dispatchEvent(new Event('blur')); // this line has been added
  fixture.detectChanges();

  const errorElement: HTMLElement = hostElement.querySelector('.error-element');

  expect(errorElement).toBeTruthy();
  expect(errorElement.innerText).toContain('Please enter no more than 255 characters.');
});