Angular 7: Unit test file upload with reactive form control

1

I would like to unit test file upload feature that uses angular 7 reactive-form. In fact, I have an HTML file input as follow:

HTML

======

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

Typescript Method

===================

This is the method to processPhoto:

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

And here I am having a handleSubmit() method called on form submission

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;
  }

Finaly, here is the way I am trying to test the handleSubmit() method

Unit Test case

================

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

But let focus on the line

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

I am trying to create a file and pass it to the form control.

I am getting this error instead

DOM Exception 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

The question is what is the suitable way to pass the image file to the input value??