Angular Jasmine - 模拟 HttpClient ArrayBuffer 响应答案

【问题标题】：Angular Jasmine - Mocking HttpClient ArrayBuffer ResponseAngular Jasmine - 模拟 HttpClient ArrayBuffer 响应
【发布时间】：2022-11-02 02:35:53
【问题描述】：

我正在为我不愿意更改的旧 Angular 代码编写 Jasmine 单元测试。许多对 HttpClient.get 的调用使用转换为any 的选项对象对其进行重载，因此编译器让它返回一个 Observable<ArrayBuffer>。同时，组件代码处理这样的调用的方式与处理 Observable<Object> 的方式相同。

import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({...})
export class ApiService {
    options: any;
    constructor(httpClient: HttpClient) {
        let httpHeaders = new HttpHeaders()
            .set('Content-Type', 'application/x-www-form-urlencoded')
            .set('Cache-Control', 'no-cache')
            .set('Cache-control', 'no-store')
            .set('Expires', '0')
            .set('Pragma', 'no-cache');
        this.options = {
            headers: httpHeaders
        };
    }
    public getUser(userId) {
        return this.httpClient.get("https://service.com/getUser/" + userId, this.options); // compiler shows returning Observable<ArrayBuffer>
    }
}

// component code
@Component({...})
export class UserComponent {
    userName: string = "";
    constructor(private serv: ApiService) {}
    loadUser() {
        this.serv.getUser(this.userId).subscribe(result => {
            console.log("getUser", result);
            this.userName = result.userName; // directly accessing fields as if result were an Object
        });
    }

我遇到的问题是模拟 ArrayBuffer 响应以通过规范文件中的间谍对象。我正在使用Buffer.from(JSON.stringify({... 来模拟正确类型的响应，但是模拟服务返回充满整数的 Buffer 对象，我无法在组件代码中转换它。

describe("component") {
    let component: UserComponent;
    let fixture: ComponentFixture<UserComponent>;
    let fakeServ: jasmine.SpyObj<ApiService>;
    beforeEach(() => {
        fakeServ = jasmine.createSpyObj<ApiService>("ApiService", ["getUser"]);
        fakeServ.getUser.and.returnValue(of(Buffer.from(JSON.stringify({ // getUser returns Observable<Buffer>, compiler is OK
            "userName": "TESTUSER"
        }))));
        
        TestBed.configureTestingModule({
            declarations: [UserComponent],
            providers: [
            { provide: ApiService, useFactory: () => fakeServ },
        }).compileComponents();
        
        fixture = TestBed.createComponent(UserComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });
    it("should load user", () => {
        component.loadUser("TESTID");
        expect(component.userName).toBe("TESTUSER") // fails
    });
}

安慰：

LOG: 'getUser', Buffer{0: 123, 1: 34, 2: 117, 3: 115, 4: 101, 5: 114, 6: 78, 7: 97, 8: 109, 9: 101, 10: 34, 11: 58, 12: 34, 13: 84, 14: 69, 15: 83, 16: 84, 17: 85, 18: 83, 19: 69, 20: 82, 21: 34, 22: 125}

有没有办法可以正确地将包含实际响应的 ArrayBuffer 传递给 spy 对象？

【问题讨论】：

标签： angular unit-testing jasmine angular-httpclient arraybuffer

【解决方案1】：

HttpClient.get 有 15 个重载，Observable<ArrayBuffer> 只是其中的 #1。

在您的情况下，模拟应该返回所需的对象，同样真实的HttpClient 将读取并解析ArrayBuffer（overlodas #14 和 #15）。

只需将其更改为：

  fakeServ.getUser.and.returnValue(of({
    "userName": "TESTUSER"
  }));

【讨论】：