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

Question

I made a simple Angular service to interact with local storage. It has a has method that returns true/false, depending on if the key exists in local storage.

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

I'm having trouble mocking out $window in my unit test. The unit test still seems to be accessing the global window object and not accessing the mock.

Here is my unit test for this service. I tried to create a mock $window object, with a getItem function.

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

My test fails, because the test seems to look at the global window object and doesn't find "shape", instead of looking in the mock and finding "shape".

I know it's doing this, because the console.log line in the service shows that it's still referencing the global window object, not the mock.

What am I doing wrong? Why is my mock not working?

Answer 1

I've done something similar and gotten it working. After reviewing my code I believe I have a solution for you.

I think you need to call $provide before you call module('jbLocalStorage') . I believe that what is happening is that the $window service is being injected into your code by the module call, then you are modifying the value after it has already been injected.

So this should work:

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

Answer 2

The $provide should be injected into the module function.

See fiddle here - 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();
  });
});