Angular 7：带有反应形式控件的单元测试文件上传

Question

＃HTML

我想对使用angular 7反应形式的文件上传功能进行单元测试。实际上，我输入的HTML文件如下：

<input
   type="file"
   class="form-control"
   id="diagnosisPhoto"
   formControlName="photo"
   (change)="processPhoto($event)"
/>

＃打字稿方法

这是处理照片的方法：

processPhoto(event) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      if (file) {
        if ((/\.(jpg|jpeg|png)$/i).test(file.name) && file.size <= 2000000) {
          this.form.controls['photo'].setErrors(null);
          this.file = file;
        } else {
          this.form.controls['photo'].setErrors({invalid: true});
        }
      }
    }
  }

在这里，我有一个handleSubmit()方法，用于表单提交

handleSubmit() {
    this.submitted = true;
    if (this.form.valid) {
      const { value } = this.form;
      value['photo'] === null ? delete value['photo'] : null;
      const formData = new FormData();

      Object.keys(value).forEach(inputKey => {
        if (inputKey === 'photo' && this.file) {
          formData.append(inputKey, this.file);
        } else {
          formData.append(inputKey, value[inputKey]);
        }
      });
      this.postDiagnosis(formData);
    }
    return;
  }

最后，这就是我尝试测试handleSubmit()方法的方式

＃单元测试用例

fit('should execute handleSubmit', () => {
    expect(component.form.valid).toBeFalsy();

    const fileList = { 0: { name: 'foo', size: 500001 } };

    const onPostDiagnosis = spy(component, 'postDiagnosis');
    component.form.controls['name'].setValue('diagnosis name');
    component.form.controls['cause'].setValue('diagnosis cause');
    component.form.controls['crop'].setValue('diagnosis crop');
    component.form.controls['photo'].setValue({ target: { files: fileList }});
    component.form.controls['control'].setValue('diagnosis control');
    component.form.controls['explanation'].setValue('diagnosis explanation');

    //expect(component.form.valid).toBeTruthy();

    //component.handleSubmit();
    // fixture.detectChanges();
    // expect(component.submitted).toBe(true);
  });

但是让我们专注于线上

const fileList = { 0: { name: 'foo', size: 500001 } };
component.form.controls['photo'].setValue({ target: { files: fileList }});

我正在尝试创建一个文件并将其传递给表单控件。

我收到此错误

＃DOM异常11

InvalidStateError: InvalidStateError: DOM Exception 11 in http://localhost:9876/_karma_webpack_/vendor.js (line 86743)
    setProperty@http://localhost:9876/_karma_webpack_/vendor.js:86743:11
    setProperty@http://localhost:9876/_karma_webpack_/vendor.js:75699:34
    writeValue@http://localhost:9876/_karma_webpack_/vendor.js:78915:35
    http://localhost:9876/_karma_webpack_/vendor.js:80176:37
    http://localhost:9876/_karma_webpack_/vendor.js:81331:73
    forEach@[native code]
    setValue@http://localhost:9876/_karma_webpack_/vendor.js:81331:35
    http://localhost:9876/_karma_webpack_/main.js:2034:50
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:20860:31
    onInvoke@http://localhost:9876/_karma_webpack_/vendor.js:237892:45
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:20859:60
    run@http://localhost:9876/_karma_webpack_/polyfills.js:20619:49
    runInTestZone@http://localhost:9876/_karma_webpack_/vendor.js:238113:37
    http://localhost:9876/_karma_webpack_/vendor.js:238128:33
    http://localhost:9876/_karma_webpack_/vendor.js:238429:35
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:20860:31
    onInvoke@http://localhost:9876/_karma_webpack_/vendor.js:237892:45
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:20859:60
    run@http://localhost:9876/_karma_webpack_/polyfills.js:20619:49
    http://localhost:9876/_karma_webpack_/vendor.js:238428:32
    http://localhost:9876/_karma_webpack_/vendor.js:238260:45
    invokeTask@http://localhost:9876/_karma_webpack_/polyfills.js:20892:36
    runTask@http://localhost:9876/_karma_webpack_/polyfills.js:20664:57
    invokeTask@http://localhost:9876/_karma_webpack_/polyfills.js:20967:41
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:20956:52
    timer@http://localhost:9876/_karma_webpack_/polyfills.js:22750:34

问题是将图像文件传递给输入值的合适方法是什么？