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);
                }
            );
        });
    }
}

我想对这项服务进行单元测试，但我不知道如何在测试中访问窗口或模拟window / 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上使用某种间谍，但我无法看到我应该如何设置或完成测试才能执行此操作。如果有人可以帮助我并在细节中提供一些例子，那将是很棒的！：）

编辑更改了测试（评论后）：

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();
    });
});

在此之后，测试失败并显示错误：'已调用spy queryUsageAndQuota已被调用。'

Answer 1

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

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

您的测试应如下所示：

{{1}}

现在您正在测试导航器是否调用了正确的函数，您是否模拟了此函数，返回了某些内容，并且您希望调用该函数。

这应该可以解决问题。

Angular 5：使用窗口测试服务

1 个答案: