如何使用 $location 服务对 angularjs 控制器进行单元测试答案

【问题标题】：How to unit test angularjs controller with $location service如何使用 $location 服务对 angularjs 控制器进行单元测试
【发布时间】：2012-11-19 18:59:02
【问题描述】：

我正在尝试创建一个简单的单元测试来测试我的显示功能。

我收到以下错误：

TypeError: Object #<Object> has no method 'show'

好像$rootScope不是控制器的作用域？

这是我的控制器：

function OpponentsCtrl($scope, $location) {
    $scope.show = function(url) {
        $location.path(url);
    }
}
OpponentsCtrl.$inject = ['$scope', '$location'];

这是我的控制器单元测试：

describe('OpponentsCtrl', function() {
    beforeEach(module(function($provide) {
        $provide.factory('OpponentsCtrl', function($location){
            // whatever it does...
        });
    }));

    it('should change location when setting it via show function', inject(function($location, $rootScope, OpponentsCtrl) {
        $location.path('/new/path');
        $rootScope.$apply();
        expect($location.path()).toBe('/new/path');

        $rootScope.show('/test');
        expect($location.path()).toBe('/test');
    }));
});

【问题讨论】：

“单元测试”是两个字，只是想指出来。很高兴您找到了解决方案。

标签： unit-testing angularjs

【解决方案1】：

你为什么不简单地使用一个 spyOn 函数？

describe('OpponentsCtrl', function() {

    var location;

    beforeEach(module(function($provide) {
        $provide.factory('OpponentsCtrl', function($location){
            location = $location;
        });
    }));

    it('should change location when setting it via show function', inject(function() {    
        spyOn(location, 'path');    
        expect(location.path).toHaveBeenCalledWith('/new/path');
    }));
});

希望这会有所帮助！

【讨论】：

如果你不使用它，为什么你在测试中有注入？我想这只是你做的时候剩下的吗？
@Katana24，我已经移除了注入。如果您愿意，请对更改进行同行评审。

【解决方案2】：

我更喜欢模拟位置和服务，因为它是一个单元（不是集成）测试：

'use strict';
describe('flightController', function () {
  var scope;
  var searchService;
  var location;

  beforeEach(module('app'));
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    mockSearchService();
    mockLocation();
    createController($controller);
  }));

  it('changes location to month page', function () {
    searchService.flightToUrl.and.returnValue('Spain/Ukraine/December/1');
    scope.showMonth();
    expect(location.url).toHaveBeenCalledWith('search/month/Spain/Ukraine/December/1');
  });

  function mockSearchService() {
    searchService = jasmine.createSpyObj('searchService', ['flightToUrl']);
  }

  function mockLocation() {
    location = jasmine.createSpyObj('location', ['url']);
  }

  function createController($controller) {
    $controller('flightController', {
      $scope: scope,
      searchService: searchService,
      $location: location
    });
  }
});

干杯

【讨论】：

【解决方案3】：

这就是我的测试结果。

describe('OpponentsCtrl', function() {
    var scope, rootScope, ctrl, location;

    beforeEach(inject(function($location, $rootScope, $controller) {
        location = $location;
        rootScope = $rootScope;
        scope = $rootScope.$new();
        ctrl = $controller(OpponentsCtrl, {$scope: scope});
    }));

    it('should change location when setting it via show function', function() {
        location.path('/new/path');
        rootScope.$apply();
        expect(location.path()).toBe('/new/path');

        // test whatever the service should do...
        scope.show('/test');
        expect(location.path()).toBe('/test');

    });
});

【讨论】：

顺便说一句，您可以随意接受自己的答案。看起来，到目前为止，它已经帮助了 20 人 :-)。
你不必模拟 $httpBackend 吗？我收到“错误：意外请求：GET 没有更多请求”。我需要模拟它。
我第二个 mgilson -- 接受这个作为正确答案。经过彻底的搜索，这就是它对我有用的原因！非常感谢！
你真的应该接受正确的答案，它对我帮助很大。