Angular 5：使用本机方法和 .then 测试服务

Question

大约 3 个月前，我问了这个问题 (earlier question) 关于测试服务的问题，该服务具有检查可用浏览器配额存储并返回 Observable 的方法。由于此服务的功能仅适用于 Google Chrome，因此我将其更改为也适用于 Firefox。该服务现在如下所示：

import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import * as bowser from "bowser";

@Injectable()
export class StorageService {
    hasAvailableStorage(): Observable<boolean> {
        if (!bowser.chrome && !bowser.firefox) {
            return Observable.create(obs => obs.next(true));
        }
        if (bowser.chrome || bowser.firefox) {
            return Observable.create(observer => {
                (navigator as any).storage.estimate().then(
                    estimate => {
                        observer.next(estimate.usage <= estimate.quota * 0.8);
                    });
            });
        }
    }
}

我想对该服务进行单元测试，所以我创建了一个包含以下内容的规范文件：

import { Injectable } from "@angular/core";

import { StorageService } from "./storage.service";

@Injectable()
class MockStorage {
    estimate() {
        return { usage: 10, quota: 15 };
    }
}

describe("storage.service", () => {
    let service: StorageService;

    beforeAll(() => service = new StorageService());

    it("should return the result of hasAvailableStorage()", () => {
        const spy = spyOn(navigator["storage"], "estimate").and.callFake(MockStorage);
        service.hasAvailableStorage().subscribe(() => {
            expect(spy).toHaveBeenCalled();
        });
    });
});

运行此测试时，我收到以下类型错误：

Cannot read property 'then' of undefined

我不太明白：

1. 为什么估计（）未定义
2. 如何修复测试

除此之外，我想知道是否有类似的东西也适用于 IE？ （我在互联网上没有找到明确的解释......）

如果有人能帮助我并提供一些详细的例子，那就太好了！ :)

Answer 1

我不知道您对 IE 的问题，但对于您的问题，那是因为您返回的是对象而不是承诺。这很容易看出：您的模拟没有返回then。

因此，有两种解决方案：要么模拟一个承诺，要么模拟返回。我会去第二个。

class MockStorage {
  estimate() {
    return Promise.resolve({ usage: 10, quota: 15 });
  }
}