使用 Jasmine 为 AngularJS 测试注入 routerProvider

Question

我正在使用 Jasmine 测试 AngularJS 控制器，我正在努力寻找一种将 $routeProvider 注入模块的方法。

这是我的控制器：

var app = angular.module('testApp', []);

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
          when('/smth', {
              templateUrl: 'smth.html',
              controller: 'testController'
          });
  }]);

app.controller('testController', ['$scope', function ($scope) {
    $scope.data = 'GG';
}]);

这是我的测试：

describe('Test Suite', function () {
    var myScope, ctrl;

    beforeEach(module('testApp'));

    beforeEach(inject(function ($controller, $rootScope) {
        myScope = $rootScope.$new();
        ctrl = $controller('testController', {
            $scope: myScope
        });
    }));

    it('data is GG', function () {
        expect(myScope.data).toEqual('GG');
    });
});

当我尝试运行它时，收到以下错误：

Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider

但如果我再次尝试运行 - 我会得到：

TypeError: 'undefined' is not an object (evaluating 'myScope.data')

如果再次运行测试，错误会不断交替出现。我正在使用 Visual Studio 2013 和 Resharper 8 来运行 Jasmine 测试。

Answer 1

将 angular-route bower 组件添加到您的项目中，然后像这样将 ngRoute 注入到您的模块中

var app = angular.module('testApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.
      when('/smth', {
          templateUrl: 'smth.html',
          controller: 'testController'
      });
}]);

app.controller('testController', ['$scope', function ($scope) {
    $scope.data = 'GG';
}]);

Answer 2

首先确保您包含 angular-route.min.js。此模块已从 angularJs 库中分离出来，因此您必须单独包含它

然后确保您已将模块的依赖项添加到 ngRoute 例如angular.module('testApp', ['ngRoute']);

然后在测试中确保你注入 $route 所以它在你的测试中也可用

使用 Jasmine 为 AngularJS 测试注入 routerProvider

Injecting routerProvider for AngularJS test using Jasmine

angularjs

testing

jasmine

provider

inject