Angular 测试：函数执行后如何调用期望值

Question

我目前正在对我的应用程序进行 Angular 单元测试，但遇到了需要对本地文件使用 http 调用的问题。因此，测试的期望在 http 调用之前和之后被调用，所以它崩溃了。我该如何解决这个问题？

我目前正在尝试在 http 调用的 .subscribe 中调用期望：

fit('should get local file and work with it', (done: DoneFn) => {
        let file: File;

        var blob: Blob;

        httpMockService.get('/assets/testFiles/testImage.png', { 
                      responseType: 'blob' }).subscribe((resp: any) => {
      
    blob = resp
    file = new File([blob], 'logo.png', 
                     { type: 'image/png', lastModified: Date.now() });

    component.submitFile(file); <- get called seecond

    expect(component.canBeProgressed).toEqual(true); <- get called first
    expect(component.submited).toEqual(false);

    done();

});

问题是期望值是错误的，因为 component.submitFile 在期望之后被调用。我用间谍尝试过，但这不起作用。谁能帮帮我？

编辑：在 submitFile() 方法中包含一个 FileReader，它加载图像并使用其像素。我认为这会导致问题

Answer 1

您无需从资产中获取文件即可进行测试。您可以在测试中很好地模拟文件。

    fit('should get local file and work with it', () => {
          let blob = new Blob([""], { type: 'image/png' });
          blob["lastModifiedDate"] = Date.now()
          blob["name"] = "test.png";

          let mockFile = <File>blob;
   
         component.submitFile(mockFile);
    
         expect(component.canBeProgressed).toEqual(true); 
         expect(component.submited).toEqual(false);
    
    
    });