我们如何在 Angular 中对会话存储进行单元测试?

Question

我是Angular单元测试的新手，我正在尝试测试会话存储和本地存储。

我的代码是：

subscribe(data) {
sessionStorage.setItem('myProductDetail', JSON.stringify(data));
}
subscribe(data) {
LocalStorage.setItem('dummyname', data[0].name);
}

对会话、本地存储和私有类进行单元测试是否是一种好的做法？

我正在尝试按照下面的示例代码来模拟我的本地存储和会话存储。

beforeEach(function () {
var store = {};
spyOn(localStorage, 'getItem').andCallFake(function (key) {
return store[key];
});
spyOn(sessionStorage, 'setItem').andCallFake(function (key, value) {
return store[key] = value + '';
});
spyOn(localStorage, 'clear').andCallFake(function () {
store = {};
});
});

任何指导都非常感谢。

Answer 1

有关浏览器差异的更多详细信息，请参阅线程 https://github.com/jasmine/jasmine/issues/299。

方法 0：

保持原样。Firefox 或 phantomjs 将设置存储，您可以在之后检查存储中的值。 如果您仍然需要自定义反应，您可以在beforeEach部分中监视它。

方法1：只是监视sessionStorage。
适用于 phantomjs，可能是 chrome，但在 FF 中没有。

const store = {};
spyOn(sessionStorage, 'getItem').and.callFake((key) => {
return store[key];
});
spyOn(sessionStorage, 'setItem').and.callFake((key, value) => {
console.log(key);
return store[key] = value + '';
});

方法2：更换sessionStorage。
可以在Firefox中工作，但在phantomjs中不能工作，因为它禁止sessionStorage替换。 但是 phantomjs 允许监视它，因此方法 1 将起作用。

const mock = (() => {
let store = {};
return {
getItem: (key) => {
return store[key];
},
setItem: (key, value) => {
console.log(key);
store[key] = value + '';
},
clear: () => {
store = {};
}
};
})();
Object.defineProperty(window, 'sessionStorage', { value: mock, writable: true });

方法3：监视Storage.prototype。
将适用于所有实现，但替换所有存储。

spyOn(Storage.prototype, 'setItem').and.callFake((key, value) => {
console.log(key);
// some logic like in prev examples
});
// other spyOn

您可以像本文的作者对上一个版本 https://blog.bradleygore.com/2014/09/17/angular-unit-testing-pt-1-local-storage/所做的那样组合方法 1 和 2。