Angular 5:使用窗口测试服务 [英] Angular 5: Testing a service using window

问题描述

我有一项服务，该服务具有一种检查可用浏览器配额存储并返回Observable的方法:

I have a service that has a method that checks the available browser quota storage and returns an 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.

I want to unit test this service, but I don't know how to get access to the window in the test or to mock the window/webkitTemporaryStorage.

我尝试了以下操作，但随后出现一个错误，即window.webkitTemporaryStorage是只读的，无法分配给它:

I tried the following, but then it gives an error that the window.webkitTemporaryStorage is read only and cannot be assigned to:

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上使用某种间谍程序，但是我看不到我应该如何设置或完成测试.如果有人可以帮助我并提供一些详细示例，那就太好了！ :)

I am expecting that I have to use some kind of spy on the window navigator/queryUsageAndQuota eventually, but I cannot see how I should set up or complete the test in order to do this. It would be great if someone could help me and provide some example in a detail! :)

编辑(在评论后)更改了测试:

EDIT changed test (after comments):

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

此后，测试失败，并显示以下错误:已调用预期的间谍queryUsageAndQuota."

After this, the test fails with the error: 'Expected spy queryUsageAndQuota to have been called.'

推荐答案

在回答完我的评论后，这是我的回答:您的测试不正确.

After your answer to my comment, here is my answer : you are not testing it right.

由于这些方法是本机方法(我假设您不会重写)，因此不应测试它们是否有效.他们是工作的.您应该测试的是是否被呼叫.

Since those methods are native methods (that I assume you don't override), you should not test if they work. They're made to work. What you should test is if they're called.

您的测试应如下所示:

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

现在，您正在测试导航器是否调用了正确的函数，是否对这个函数进行了模拟，返回了一些内容，并且希望该函数已被调用.

Now you are testing if the navigator calls the right function, you mock this function, return something, and you expect the function to have been called.

这应该可以解决问题.

这篇关于Angular 5:使用窗口测试服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！