Angular 5：使用窗口测试服务

Question

我有一个服务，它有一个检查可用浏览器配额存储并返回 Observable 的方法：

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

@Injectable()
export class StorageService {
    hasAvailableStorage(): Observable<boolean> {
        const nav: any = navigator;

        return Observable.create(observer => {
            nav.webkitTemporaryStorage.queryUsageAndQuota(
                (usedBytes, grantedBytes) => {
                    observer.next(usedBytes <= grantedBytes * 0.8);
                }
            );
        });
    }
}

我想对该服务进行单元测试，但我不知道如何在测试中访问窗口或模拟窗口/webkitTemporaryStorage。

我尝试了以下方法，但是它给出了一个错误，即 window.webkitTemporaryStorage 是只读的并且无法分配给：

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

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

@Injectable()
class MockWebkitTemporaryStorage {
    queryUsageAndQuota(cb) {
        return cb(10, 15);
    }
}

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

    const nav: any = window.navigator;
    nav.webkitTemporaryStorage = MockWebkitTemporaryStorage;

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

    it("should return the result of hasAvailableStorage()", () => {
        const result = service.hasAvailableStorage();
        expect(result).toBeDefined();
    });
});

我预计我最终必须在窗口导航器/queryUsageAndQuota 上使用某种间谍，但我看不出我应该如何设置或完成测试才能做到这一点。如果有人可以帮助我并详细提供一些示例，那就太好了！ :)

EDIT 更改测试（在 cmets 之后）：

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

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

    it("should return the result of hasAvailableStorage()", () => {
        const spy = spyOn(navigator["webkitTemporaryStorage"], "queryUsageAndQuota").and.callFake(MockWebkitTemporaryStorage);
        const result = service.hasAvailableStorage();
        expect(spy).toHaveBeenCalled();
        expect(result).toBeDefined();
    });
});

此后，测试失败并出现错误：'Expected spy queryUsageAndQuota to have been called。'

Answer 1

在您回答我的评论后，这是我的回答：您没有正确测试它。

由于这些方法是本机方法（我假设您不会覆盖），因此您不应该测试它们是否有效。它们是用来工作的。您应该测试的是它们是否被调用。

你的测试应该是这样的：

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

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

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

现在你正在测试导航器是否调用了正确的函数，你模拟这个函数，返回一些东西，你期望这个函数被调用。

这应该可以解决问题。