Angular 带有（事件：HttpEvent<any>）参数的文件上传单元测试无法覆盖完整代码

Question

我正在使用 angular 版本 9。在我的应用程序中，我使用文件上传方法来显示文件上传进度。

代码覆盖了第一个 switch case ( case HttpEventType.Sent )，无法覆盖其余代码。

ts:

uploadFile() {
    
    this.up.uploadFileModel(this.file, this.selectedModel)
      .subscribe((event: HttpEvent<any>) => {
        switch (event.type) {
          case HttpEventType.Sent:
            console.log('Request has been made!');
            break;
          case HttpEventType.ResponseHeader:
            console.log('Response header has been received!');
            break; 
          case HttpEventType.UploadProgress:
            this.progress = Math.round(event.loaded / event.total * 100);
            console.log(`Uploaded! ${this.progress}%`);
            break;
          case HttpEventType.Response:
            console.log('File successfully uploaded !', event.body, event);
            if (event.status == 200) {
              this.uploadMsg = event.body;
              this.uploadStatus = true;
            } else {
              this.uploadMsg = 'File upload failed! some thing went wrong'
              this.uploadStatus = false;
            }
          setTimeout(() => {
            this.uploadStatus = true;
            console.log("testing correction", "uploadMsg:",  this.uploadMsg, "uploadStatus: ", this.uploadStatus);
            this.router.navigate(['/home'], {state: {data: {uploadMsg: this.uploadMsg, uploadStatus: this.uploadStatus} }});
          }, 1000); 
        }
      }, err => {
        this.uploadMsg = err;
        this.progress = 0;
        this.uploadStatus = false;
        console.log(err);
      });
  }

spec file

it('should create upload template', () => {
    //component.selectedModel = { id: 2, name: 'NER', code: 'NER' };
    const mockFile = [ { 0: { name: 'foo', size: 500001 }, 1: { name: 'foo', size: 500001 } }];

    spyOn(component, 'uploadFile').and.callThrough();
    
    component.uploadFile();
    fixture.detectChanges();
    spyOn(service, 'uploadFileModel').and.returnValue(of(
      {
        result : {
           httpStatus : 200
        }
      }
    ));
    fixture.detectChanges();
    expect(component.uploadFile).toHaveBeenCalled();
    expect(service.uploadFileModel).toBeTruthy();
  });

Answer 1

您的订单似乎不正确，您必须 spyOn 服务 uploadFileModel 才能致电 component.uploadFile。

it('should create upload template', () => {
    //component.selectedModel = { id: 2, name: 'NER', code: 'NER' };
    const mockFile = [ { 0: { name: 'foo', size: 500001 }, 1: { name: 'foo', size: 500001 } }];

    // spyOn(component, 'uploadFile').and.callThrough(); // get rid of this line
    spyOn(service, 'uploadFileModel').and.returnValue(of( // move this here
      {
        // mock the return here
        type: HttpEventType.Sent, // This time Sent will be traversed.
        body: {}
        status: 200,
        loaded: 0,
      }
    ));
    component.uploadFile();
    fixture.detectChanges();
    // expect(component.uploadFile).toHaveBeenCalled(); // get rid of this line, we explicitly called it so obviously it was called.
    expect(service.uploadFileModel).toBeTruthy();
  });

要遍历其他情况，请编写另一个单元测试（it 块）并更改 mock 的类型 return。

Angular 带有（事件：HttpEvent<any>）参数的文件上传单元测试无法覆盖完整代码

Angular file upload unit test with ( event: HttpEvent<any> ) parameter couldn't cover full code

jasmine

karma-jasmine

angular