Question

我是Angular的单元测试的新手，我正在尝试测试sessionstorage和localstorage。

我的代码是：

subscribe(data) {
        sessionStorage.setItem('myProductDetail', JSON.stringify(data));
    }

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

对会话，本地存储和私有类进行单元测试是一种好习惯吗？

我正在尝试按照下面的示例代码来模拟我的localstorage和sessionstorage。

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

您可以将方法1和2结合起来，就像本文的作者对先前的版本https://blog.bradleygore.com/2014/09/17/angular-unit-testing-pt-1-local-storage/所做的那样。

我们如何在Angular中对sessionstorage进行单元测试？

1 个答案: