如何在角度8中使用FileReader.addEventListener编写单元测试组件?

时间:2019-09-07 11:22:55

标签: karma-jasmine angular8

我使用的是angular 8,我想用FileReader测试我的组件。
我无法在processFile函数中测试FileReader。 也许我的作品写得不好?您能帮我理解吗? 如果我理解正确,则必须在流程函数中测试一个类(Filereader) 我的组件

 processFile(imageInput: any) {

    const file: File = imageInput.files[0];
    const reader = new FileReader();
    let size: number = 2097152
    if (file) {
      if (file.size <= size) {
        this.sharingDataService.setUploadIsOk(true)
        reader.addEventListener('progress', (event:any) =>{
          this.progressValue = this.progressBar(event)
          if (event.lengthComputable) {
            // console.log(event.loaded+  " / " + event.total)
        }

        })
        reader.addEventListener('loadstart', (event:any) =>{
          this.progressValue =0;
          this.textDuringUploadBefore = "No"
          this.textDuringUploadAfter = ''

            // console.log('start');

        })
        reader.addEventListener('loadend', (event:any) =>{
            // console.log('end');

        })


        reader.addEventListener('load', (event: any) => {
          console.log(event);
          this.selectedFile = new ImageSnippet(event.target.result, file);
          this.fileName =  this.selectedFile.file.name;
          this.fileNameExt =this.fileName.split('.').pop(); 
          this.displayAddPhoto = false;
          this.selectedFile.status = 'ok';
          this.getLoadCallBack(file)
          // this.ng2ImgMax.resizeImage(file, 900,600).subscribe(
          //   result =>{
          //     // console.log('compress', );
          //     this.textDuringUploadAfter= "Yes!!!"
          //     this.textDuringUploadBefore= ''

          //     this.fileForm.patchValue({
          //       image: new File([result], result.name)
          //     });
          //     this.imageIsLoad = true
          //     this.sharingDataService.setUploadIsOk(false)


          //   }
          // )

          // this.imageOutput.emit(this.fileForm)
        });



        reader.readAsDataURL(file);
      } else {
        const msg ="This picture is too big."
        + '<br/>' + "Please upload an image of less than 2MB."
        // this.sharedFunctionService.openDialogAlert(msg, 'home')
        this.errorService.openDialogError(msg)

          this.imageIsLoad = false
          this.sharingDataService.setUploadIsOk(false)
      }

    }



  }

  getLoadCallBack(file:File){
            this.ng2ImgMax.resizeImage(file, 900,600).subscribe(
            result =>{
              // console.log('compress', );
              this.textDuringUploadAfter= "Yes"
              this.textDuringUploadBefore= ''

              this.fileForm.patchValue({
                image: new File([result], result.name)
              });
              console.log(this.fileForm);
              this.imageIsLoad = true
              this.sharingDataService.setUploadIsOk(false)


            }
          )



          this.imageOutput.emit(this.fileForm)

  }

我的说明

 it('processFile', () => {
// const mockEvt = { target: { files: [fileInput] } };
// const mockReader: FileReader = jasmine.createSpyObj('FileReader', ['readAsDataURL', 'onload']);
// spyOn(window as any, 'FileReader').and.returnValue(mockReader);
// spyOn(component, 'getLoadCallBack').and.callThrough();

    const file = new File([''], 'test-file.jpg', { lastModified: null, type: 'image/jpeg' });
    const fileInput = { files: [file] };
    const  eventListener = jasmine.createSpy();
    spyOn(window as any, "FileReader").and.returnValue({
      addEventListener: eventListener
    })

    component.processFile(fileInput);

我遇到错误

 TypeError: reader.readAsDataURL is not a function

如何测试我的processFile函数? 我尝试了很多方法但没有成功

0 个答案:

没有答案
相关问题