在 Angular 6 中使用 HTTP 请求测试服务方法答案

【问题标题】：Testing a service method with an HTTP request in Angular 6在 Angular 6 中使用 HTTP 请求测试服务方法
【发布时间】：2018-12-20 19:53:21
【问题描述】：

我的一个单元测试有问题，而包含 HTTP 发布请求的函数在应该返回的时候没有返回字符串。这是有问题的服务功能：

public getAnonToken(prev?: string): string {
        if (this.tokens[prev]) {
            return this.tokens[prev]
        }

        if(prev) {
            this.tokens[prev] = prev;
        }        

        this.http.post<any>(HttpUrl.ANON_TOKEN, {})
            .subscribe((response) => {
                this.saveAuthToken(response.data);
                this.tokens[prev] = response.data;

                // analytics!!!
                // Global.internalAnalytics.getAnonToken();
                return response.data;
            });            
    }

如您所见，向令牌生成端点发出的请求返回一个可观察对象，然后我订阅并从 getAnonToken() 函数返回令牌。

这是我的测试：`

fit("should call the token endpoint and save then return a new token if old token has expired", () => {
    const mockTokenResponseData = {
        data: "i am a token"         
    }
    spyOn(httpClient, "post").and.returnValue(Observable.of(mockTokenResponseData));

    expect(authService.getAnonToken()).toEqual("i am a token");        

});`

如您所见，我正在创建一个模拟响应（一个可观察的），然后在使用 spy 发出发布请求时将其设置为返回值。而不是“我是一个令牌”，我没有定义。我有一种感觉，这是因为测试不是在等待 observable 返回，但我不确定这是如何解决的。谁能看到这里发生了什么？谢谢

【问题讨论】：

标签： angular unit-testing jasmine observable karma-jasmine

【解决方案1】：

您缺少在函数中返回this.http.post，此外，您需要将expect 放入subscription。

回电到http.post

return this.http.post<any>(HttpUrl.ANON_TOKEN, {})
    .subscribe((response) => {
        this.saveAuthToken(response.data);
        this.tokens[prev] = response.data;

        // analytics!!!
        // Global.internalAnalytics.getAnonToken();
        return response.data;
    });

请不要在this.http.post前面的return

把expect放在subscription里面

authService.getAnonToken().subscribe((data) => {
    expect(data).toEqual("i am a token");
});

希望对你有帮助

【讨论】：