Angular 测试和所需的输入类型="file" 表单验证

Question

我有一个案例，我在 input[type="file].

上使用 NgForm 验证

该代码在真实案例场景（浏览器使用）中运行良好。但是，在测试部分本身，如果 ngForm 中存在错误（通过检查 ngForm.valid），我有一个代码可以阻止实际的表单数据提交（包括文件）。

以下测试认为 ngForm.valid === false 因此测试失败：

it('should do a SubsectionSave save on submit and attach file', async () => {
      const dataTransfer = new DataTransfer();
      dataTransfer.items.add(await testGetExampleFile()); // testGetExampleFile returns a valid File object
      // set file and trigger event
      const inputDebugEl  = fixture.debugElement.query(By.css('input[type=file]'));
      inputDebugEl.nativeElement.files = dataTransfer.files;
      inputDebugEl.nativeElement.dispatchEvent(new InputEvent('change'));
      fixture.detectChanges();
      await fixture.whenStable();

      component.submit(); // this submit function checks the .valid on the ngForm, but does nothing

      // expect(a-backend-save-call).toBeDone();
      // but nothing is done because the submit() stops at the .valid checking
});

从测试用例本身将文件放入输入的方式受到

的启发

我在 ngForm.valid 检查之前检查了 ngForm.controls （在实际实现中）并且有多个必填字段但唯一被标记为无效的字段（原因：必填）是这个需要输入文件。

有没有办法强制 angular 检测新文件的新存在？

我尝试了 fixture.detectChanges(); 的组合，在引发更改事件后等待 1 秒，在设置 nativeElement 文件后在几个地方 await fixture.whenStable();，但没有任何效果。

如何在 angular 组件测试中处理所需的输入文件？

Answer 1

我终于找到了解决方案，基于 DebugElement 的 triggerEventHandler，如下所示：

      const file: File = await testGetExampleFile('pdf');

      // set file and trigger event
      const inputDebugEl  = fixture.debugElement.query(By.css('input[type=file]'));
      inputDebugEl.triggerEventHandler('change',  { target: { files: [file] } });

Angular 测试和所需的输入类型="file" 表单验证

Angular Testing and required input type="file" form validation

angular

unit-testing

testing