测试无效表单时不显示角度错误文本

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来调度模糊事件：

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.');
});