使用'Controller as'语法的Karma茉莉花和角度控制器（代替$ scope） [英] Karma jasmine and angular controller using 'Controller as' syntax (this instead of $scope)

问题描述

我正在尝试设置因果关系以进行一些单元测试，但是我无法使其在一个基本示例上起作用：

I'm trying to set up karma to make some unit tests but I can't manage to make it work on a basic example :

这是控制器文件：

angular.module('balrogApp.requests', [
  /* Dependancies */
])
  // Routes configuration
  .config(['$routeProvider', function($routeProvider) {
    /* $routeProvider configuration */
  }])
  .controller('requestsController', function(Requests, Users, Projects, RequestsComments, CostEstimations,
                                             Regions, growl, $route, $rootScope, $scope, $location) {
    this.test = 'test42';

/* ... */

});

这是测试文件：

describe('requestsController', function() {
  beforeEach(module('balrogApp.requests'));

  var ctrl;
  beforeEach(inject(function($controller) {
    ctrl = $controller('requestsController');
  }));

  it('should have test = "test42"', function(){
    expect(ctrl.test).toBe("test42");
  });
});

但是会引发此错误：

Chrome 43.0.2357（Windows 7 0.0.0）requestsController应该已经测试了
= test42失败
错误：[$ injector：unpr]未知提供程序：$ scopeProvider< -$ scope<-requestsController
http://errors.angularjs.org/1.4.7 / $ injector / unpr？p0 =％24scopeProvider％20％3C-％20％24scope％20％3C-％20requestsController
在C：/ Users / aazor102115 / Desktop / Dev / Balrog / bower_components / angular / angular.js：68：12
在C：/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js：4289：19 Object.getService处的
[获取] （C：/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js：4437：39）
在C：/ Users / aazor102115 / Desktop / Dev / Balrog / bower_components / angular / angular。 js：4294：45
在getService（C：/ Users / aazor10 2115 / Desktop / Dev / Balrog / bower_components / angular / angular.js：4437：39）调用时
（C：/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js：4469： 13）Object.instantiate（C：/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js：4486：27）中的
在C：/ Users / aazor102115 / Desktop / Dev / Balrog / bower_components / angular / angular.js：9151：28
在C：/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular-mocks/angular-mocks.js：1882：12 $ b对象的$ b。 （C：/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js：6：12）
错误：在window.inject.angular.mock.inject处的声明位置
（C：/ Users / aazor102115 / Desktop / Dev / Balrog / bower_components / angular-mocks / angular-mocks.js：2409：25）
在Suite上。 （C：/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js：5：14）
在C：/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js：1： 1
TypeError：无法读取对象中未定义
的属性 test。 （C：/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js：10：16）
Chrome 43.0.2357（Windows 7 0.0.0）：执行1中的1（1失败）错误
（0.108秒/​​ 0.087秒）

Chrome 43.0.2357 (Windows 7 0.0.0) requestsController should have test = "test42" FAILED Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- requestsController http://errors.angularjs.org/1.4.7/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20requestsController at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:68:12 at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4289:19 at Object.getService [as get] (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4437:39) at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4294:45 at getService (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4437:39) at invoke (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4469:13) at Object.instantiate (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:4486:27) at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular/angular.js:9151:28 at C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular-mocks/angular-mocks.js:1882:12 at Object. (C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:6:12) Error: Declaration Location at window.inject.angular.mock.inject (C:/Users/aazor102115/Desktop/Dev/Balrog/bower_components/angular-mocks/angular-mocks.js:2409:25) at Suite. (C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:5:14) at C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:1:1 TypeError: Cannot read property 'test' of undefined at Object. (C:/Users/aazor102115/Desktop/Dev/Balrog/tests/requests.js:10:16) Chrome 43.0.2357 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.108 secs / 0.087 secs)

推荐答案

$ scope （您的控制器所依赖的）是所谓的本地，即它特定于控制器的实例，并且不存在于依赖项注入容器中。您必须自己提供它，例如如：

The $scope (on which your controller depends on) is a so-called "local", i.e. it is specific to the instance of the controller and does not live in the dependency injection container. You have to provide it yourself, e.g. as:

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

由于您正在创建新的示波器，因此在测试后销毁它会是一件好事：

Since you are creating a new scope, it would be good to destroy it after the test:

var scope;

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

afterEach(function() {
    scope.$destroy();
});

这篇关于使用'Controller as'语法的Karma茉莉花和角度控制器（代替$ scope）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！