如何在 Angular 测试用例中模拟来自 API 的 blob 响应

Question

在我的角度应用程序中，我有一个 REST API 调用，它返回一个 Blob 数据，该数据最终在新选项卡中打开。 我试图在我的 jasmine 测试用例中创建一个模拟 Blob 对象，并监视服务调用并返回 Blob。 我无法将其分配给响应，也无法验证我的模拟 blob。

规格ts

it('should call open doc ', () => {        
    spyOn<any>(component['docService'], 'getDoc');
    component['getDOC']('mypdf');
    let obj  = Object({ responseType: 'blob' });       
    component['docService']['getResponse'] = obj;
    expect(component['docServicee']['getDoc']).toHaveBeenCalled();
});

组件.ts

public getDOC(file: string): void {
    this.docService.getDoc('mypdf); 
    this.docService.getResponse.subscribe((response) => {
        if (response) { // Test case not covered
            // open the file 
        }
    });      
}

DocService.ts

public getDoc(val): void {
        apiEndpointcall.subscribe({
        next: (res: Blob) => {
        
        },
        error: (error: Error) => {
          
        }
    });
}

Answer 1

要在 Angular 测试用例中模拟来自 API 的 Blob 响应，您可以使用 RxJS 来创建具有所需 Blob 值的可观察对象。以下是如何修改测试用例的示例：

规格：

从 'rxjs' 导入 { of };

it('应该调用打开文档', () => {
const docServiceSpy=spyOn(component['docService'], 'getDoc').and.returnValue(of(new Blob())); // 将 'new Blob()' 替换为您的模拟 Blob 数据 组件'getDOC';

expect(docServiceSpy).toHaveBeenCalled();

});

要在 Angular 测试用例中模拟来自 API 的 Blob 响应，您可以使用 RxJS 来创建具有所需 Blob 值的可观察对象。以下是如何修改测试用例的示例：

规格：

打字稿 复制代码 从 'rxjs' 导入 { of };

it('应该调用打开文档', () => {
const docServiceSpy=spyOn(component['docService'], 'getDoc').and.returnValue(of(new Blob())); // 将 'new Blob()' 替换为您的模拟 Blob 数据 组件'getDOC';

expect(docServiceSpy).toHaveBeenCalled();

}）； 此示例假设 getDoc 方法返回一个 observable。如果您的 getDoc 方法不直接返回可观察值，您可能需要相应地调整代码。

此外，您的代码中似乎存在拼写错误。在expect 语句中，您有组件['docServicee'] 而不是组件['docService']。我已在上面的示例中更正了它。

请记住将 new Blob() 替换为实际的模拟 Blob 数据。如果需要自定义 Blob 内容或模拟特定行为，可以使用 Blob 构造函数和数据数组创建 Blob，如下所示：

const mockBlob = new Blob(['模拟数据'], { type: 'application/pdf' });

根据需要调整内容和类型。