无法在业力单元测试中实例化角度控制器

时间:2016-03-09 10:41:39

标签: angularjs unit-testing gulp karma-jasmine

我在生成的项目(由yoeman)面临一些问题并且正在测试。

我想要的是建立一个完全自动化的测试环境。我使用Gulp,Karma,Jasmine和角嘲讽。

TypeError: undefined is not an object (evaluating 'controller.awesomeThings')

在'gulp test'之后的我的控制台中,它会抛出此错误消息。但这对我没有任何意义。

看看我的测试规范:

'use strict';

describe('Controller: AboutCtrl', function() {

  // load the controller's module
  beforeEach(function() {
    module('evoriApp');
  });

  var controller;
  var scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function($controller, $rootScope) {
    scope = $rootScope.$new();
    controller = $controller('AboutCtrl', {
      '$scope': scope
    });
  }));

  it('should attach a list of awesomeThings to the scope', function() {
    console.log(controller);
    expect(controller.awesomeThings.length).toBe(3);
  });
});

业力应该有它需要的任何文件(karma.conf.js):

files: [
      // bower:js
      'bower_components/angular/angular.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-aria/angular-aria.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-messages/angular-messages.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-material/angular-material.js',
      // endbower
      'app/scripts/**/*.js',
      'test/mock/**/*.js',
      'test/spec/**/*.js'
    ],

这就是生成的gulp方法的样子:

gulp.task('test', ['start:server:test'], function () {
  var testToFiles = paths.testRequire.concat(paths.scripts, paths.mocks, paths.test);
  return gulp.src(testToFiles)
    .pipe($.karma({
      configFile: paths.karma,
      action: 'watch'
    }));
});

我不知道失败的地方。我检查了所有路径并多次重写了测试文件...但错误没有改变。

有没有人知道,错误可能是由什么造成的?

1 个答案:

答案 0 :(得分:1)

好的,伙计们,我明白了。

我尝试在jasmine独立环境中运行测试,以尽量减少错误根所在的区域。

这就是我的控制器的样子:

angular.module('evoriApp')
  .controller('AboutCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.testVariable = 2;
  });

我将'this.awesomeThings'改写为'$ scope.awesomeThings'并没有得到它,这是不同的东西。无论...

这是现在正在运行的规范:

describe('Controller: AboutCtrl', function() {

  // load the controller's module
  beforeEach(function() {
    module('evoriApp');
    console.log("1");
  });

  var controller;
  var scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function($controller, $rootScope) {
    scope = $rootScope.$new();
    controller = $controller('AboutCtrl', {
      $scope: scope
    });
  }));

  it('sollte instanziert worden sein', function() {
    expect(controller).toBeDefined();
  });

  it('sollte ein Object "awesomeThings" besitzen', function() {
    expect(scope.awesomeThings).toBeDefined();
  });

  it('should attach a list of awesomeThings to the scope', function() {
    expect(scope.awesomeThings.length).toBe(3);
  });
});

我学到的东西:在测试中你必须自己生成传递给控制器​​的作用域,然后你必须使用$ scope.variables传递的作用域变量。