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

В моем приложении 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, и несмотря на то, что статус элемента управления формой НЕДЕЙСТВИТЕЛЕН и имеет ошибку (я проверил путем отладки кода), сообщение об ошибке не отображается во время выполнения теста, поэтому ожидания не оправдываются.


typescript angular angular-forms angular-test
person Francesco Borzi    schedule 02.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что сообщение об ошибке на самом деле не отображается, пока пользователь не выйдет из поля (например, щелкнув в другом месте или нажав клавишу 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.');
});
person Francesco Borzi    schedule 02.01.2019