如何在 Karma/jasmine 中模拟 window.location 函数

Question

我想模拟 Karma 中的一个功能，点击下载按钮后 returns 一个文件。我有以下 AngularJS 控制器：

var secure = angular.module('secure', []);
secure.controller('ProcedureController', ProcedureController);
ProcedureController.$inject = ['$controller', '$rootScope', '$scope', '$http'];

function ProcedureController($controller, $rootScope, $scope, $http) {

  ... // Controller does more stuff

  var href = window.location.href.split('/');
  var baseUrl = href[0] + '//' + href[2];
  var url = baseUrl + "/secure/regulations";

  $http.get(url)
    .success(function (data) {
        $scope.questions = data[0];
    })

  $scope.download = function (msg) {
    window.location = url + "/" + msg + "/attachment";
  }
}

window.location 对象只是调用一个 RESTful 服务，该服务直接向他提供所需的文件。这基本上是我的尝试：

describe('ProcedureController', function () {
  beforeEach(module('secure'));

  beforeEach(inject(function ($rootScope, $http, $controller, $injector) {
    scope = $rootScope.$new();
    ProcedureController = $controller('ProcedureController', {
        $scope: scope,
        $http: $http
    });
  }));

  it ('should download something', function() {
    expect(scope.download(1)).toBeDefined();
  });

 });

所以，我的想法是检查什么时候调用了scope.download函数，如果它returns正确url，即当我尝试 scope.download(1)，预期的答案大致是 /secure/regulations/1/attachment。

我应该如何模拟它？感谢您的帮助！

Answer 1

我想这里有很多变数，但让我们从测试开始吧。首先，您实际上并不需要 "mock it"，因为您正在通过正在加载某种形式的浏览器的 Karma 运行进行 Jasmine 测试。我希望你用的是PhantomJS而不是Chrome.

但是，让我们从 PhantomJS 开始吧。您的测试代码可能看起来像这样：

it ('should download something', function() {
  scope.download(1);
  expect(window.location).toBeDefined();
  expect(window.location).toBe('some static URL that it should be');
});

但是，您需要修复控制器的初始化。你需要确保你能满足这一行的需要：

var href = window.location.href.split('/');

这意味着当您在此处构建控制器时：

ProcedureController = $controller('ProcedureController', {

在执行 $controller 之前，您需要将 window.location 设置为 ，以便正确构建 url 变量.

现在，如果您使用的是 Chrome，那么您可能会在浏览器中看到真正的移动。我不认为这会导致任何问题，但这只是没有必要。最好使用 PhantomJS 以便您可以运行在控制台中进行这些测试。

Answer 2

改用$window：

var secure = angular.module('secure', []);
secure.controller('ProcedureController', ProcedureController);
ProcedureController.$inject = ['$controller', '$rootScope', '$scope', '$http', '$window'];

function ProcedureController($controller, $rootScope, $scope, $http, $window) {

  ... // Controller does more stuff

  var href = $window.location.href.split('/');
  var baseUrl = href[0] + '//' + href[2];
  var url = baseUrl + "/secure/regulations";

  $http.get(url)
    .success(function (data) {
        $scope.questions = data[0];
    })

  $scope.download = function (msg) {
    $window.location = url + "/" + msg + "/attachment";
  }
}

describe('ProcedureController', function () {
  var windowObj = {location: {href: ''}};

  beforeEach(mock.module(function($provide) {
     $provide.value('$window', windowObj);
  }));
  beforeEach(module('secure'));

  beforeEach(inject(function ($rootScope, $http, $controller, $injector) {
    scope = $rootScope.$new();
    ProcedureController = $controller('ProcedureController', {
        $scope: scope,
        $http: $http
    });
  }));

  it ('should download something', function() {
    expect(scope.download).toBeDefined();
    scope.download(1);
    expect(windowObj.location.href).toEqual('/secure/regulations/1/attachment');
  });

 });

如何在 Karma/jasmine 中模拟 window.location 函数

How to mock a window.location function in Karma/jasmine

unit-testing

angularjs

karma-jasmine