Angular.js 单元测试 - 模拟 $window 的麻烦

Question

我制作了一个简单的 Angular 服务来与本地存储进行交互。它有一个 has 方法返回真/假，具体取决于密钥是否存在于本地存储中。

angular.module("jbLocalStorage", [])
.service("localStorageService", ["$window", function($window){

  this.has = function(key){
    console.log($window); //added to see what $window is referencing in unit test
    if ($window.localStorage.getItem(key) !== null){
      return true;
    } else {
      return false;
    }
  };
}]);

我在单元测试中模拟出 $window 时遇到了麻烦。单元测试似乎仍在访问全局窗口对象，而不是访问模拟。

这是我对此服务的单元测试。我尝试使用getItem 函数创建一个模拟$window 对象。

describe("Has function", function(){
  var localStorageService;

  beforeEach(module('jbLocalStorage'), function($provide){
    $provide.value('$window', {
      localStorage : {
        getItem : function(key){
          if (key === "shape") {return "triangle";} else {return null;}
        },
      },
    });
  });

  beforeEach(inject(function(_localStorageService_){
    localStorageService = _localStorageService_;
  }));

  it("should return true if key is found in local storage", function(){
    expect(localStorageService.has("shape")).toEqual(true);
  });
});

我的测试失败了，因为测试似乎在查看全局 window 对象并没有找到“形状”，而不是查看模拟并找到“形状”。

我知道它正在这样做，因为服务中的 console.log 行表明它仍在引用全局 windowobject，而不是 mock。

我做错了什么？为什么我的模拟不起作用？

Answer 1

$provide 应该被注入到模块函数中。

在这里查看小提琴 - http://jsfiddle.net/eitanp461/bvsp41yz/

describe("Has function", function(){
  var localStorageService;

  beforeEach(module('jbLocalStorage', function($provide){
    $provide.value('$window', {
      localStorage : {
        getItem : function(key){
          if (key === "shape") {return "triangle";} else {return null;}
        },
      },
    });
  }));

  beforeEach(inject(function(_localStorageService_){
    localStorageService = _localStorageService_;
  }));

  it("should return true if key is found in local storage", function(){
    expect(localStorageService.has("shape")).toEqual(true);
    expect(localStorageService.has("wat?")).toBeFalsy();
  });
});

Answer 2

我做了类似的事情并让它发挥作用。在查看了我的代码后，我相信我有一个适合您的解决方案。

我认为您需要先致电$provide，然后再致电module('jbLocalStorage')。我相信正在发生的事情是$window 服务正在通过module 调用注入到您的代码中，然后您正在修改已经注入的值。

所以这应该有效：

beforeEach(function() {
    module(function($provide) {
        $provide.value('$window', {
            localStorage : {
                getItem : function(key){
                    if (key === "shape") {return "triangle";} else {return null;}
                },
            },
        });
    });
    module('jbLocalStorage');
});