如何在內部對使用localStorage的AngularJS服務進行單元測試

Question

如何使用Jasmine和ngMock在內部對使用$window.localStorage的工廠進行單元測試？

這是類似於我的東西：

myApp.factory('myData',function ($window) {
    return { 
        message: $window.localStorage['stuff'] 
    }
});

謝謝你！

Answer 1

以下適用於Jasmine 2.4：

angular.module('MyModule', []).factory('myData',function ($window) {
    return { 
        message: function(){
          return $window.localStorage['stuff'] ;
        }
    }
});

describe("TestName", function() {
  beforeEach(module('MyModule'));
  var myData, store;
  beforeEach(inject(function(_myData_) {
    myData = _myData_;
    store = {};
    var localStorage = window.localStorage;
    spyOn(localStorage, 'getItem').and.callFake(function (key) {
      return store[key];
    });
    spyOn(localStorage, 'setItem').and.callFake(function (key, value) {
      return store[key] = value + '';
    });
    spyOn(localStorage, 'clear').and.callFake(function () {
      store = {};
    });
  }));

  it("feature desc", function() {
    localStorage['stuff'] = 'hello';
    expect(myData.message()).toEqual('hello');
  });
});

注意使用_myData_下划線技巧（ 參見docs ）。

Answer 2

小澄清：如果localStorage不包含鍵，則此mock返回undefined ，但real返回null

getItem（key）方法必須返回與給定鍵關聯的當前值。 如果與對象關聯的列表中不存在給定鍵，則此方法必須返回null。 https://www.w3.org/TR/webstorage/

  spyOn(localStorage, 'getItem').and.callFake(function (key) {
    return store[key] !== undefined ? store[key] : null;
  });

注意：在前面的示例方法中， removeItem未被模擬

  spyOn(localStorage, 'removeItem').and.callFake(function (key, value) {
    delete store[key];
  });

PS我發現了另一種用本地存儲編寫測試的方法而不用模擬它，可能它是有道理的，使用原語和localStorage可能很棘手。

afterEach(() => {
  localStorage.removeItem(testTokenKey);
});