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

我想对这个服务进行单元测试，但我不知道如何在测试中访问窗口或模拟窗口/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 更改测试(评论后):

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.

你的测试应该是这样的:

Your test should look like this :

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屋！