角度测试示例失败

Question

作为JS单元测试和Angular测试的新手,我尝试用Jasmine和Karma编写自己的测试.在尝试编写自己的测试失败后,我决定退后一步检查一切是否正常工作,所以我将示例控制器及其测试从Angular Documentation on Unit测试复制到我的项目中,我甚至无法得到工作..我觉得自己像一个完全白痴,甚至无法让复制粘贴的代码工作..

所以这是我在step1Ctrl.js文件中初始化的控制器:

模块在另一个文件中初始化.

var mainApp = angular.module("mainApp");

mainApp.controller('PasswordController', function PasswordController($scope) {   $scope.password = '';   $scope.grade = function() {
    var size = $scope.password.length;
    if (size > 8) {
      $scope.strength = 'strong';
    } else if (size > 3) {
      $scope.strength = 'medium';
    } else {
      $scope.strength = 'weak';
    }   }; });

以下是居住在里面的测试step1Ctrl.spec.js:

describe('PasswordController', function() {
  beforeEach(module('mainApp'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $controller = _$controller_;
  }));

  describe('$scope.grade', function() {
    var $scope, controller;

    beforeEach(function() {
      $scope = {};
      controller = $controller('PasswordController', { $scope: $scope });
    });

    it('sets the strength to "strong" if the password length is >8 chars', function() {
      $scope.password = 'longerthaneightchars';
      $scope.grade();
      expect($scope.strength).toEqual('strong');
    });

    it('sets the strength to "weak" if the password length <3 chars', function() {
      $scope.password = 'a';
      $scope.grade();
      expect($scope.strength).toEqual('weak');
    });
  });
});

直接从文档中复制粘贴.

因此,运行测试时出现的错误是:

TypeError: undefined is not a constructor (evaluating '$controller('PasswordController', { $scope: $scope })')

这告诉我$controller第二个函数beforeEach失败了,因为$controller未定义.所以看起来第一个beforeEach没有运行,或者确实如此,但是未定义的值会被inject函数注入.

我也在使用browserify,如果那很重要的话.

这是我的karma.conf.js,如果有帮助的话:

module.exports = function(config) {
  config.set({

    basePath: '',

    frameworks: ['browserify', 'jasmine'],

    files: [
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js',
        'https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js',
        'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-mocks.js',
        'test/unit/**/*.js'
    ],

    exclude: [
    ],

    preprocessors: {
        'app/main.js': ['browserify']
    },

    reporters: ['progress'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['PhantomJS'],

    browserify: {
        debug: true,
        transform: []
    },

    plugins: [
        'karma-phantomjs-launcher', 'karma-jasmine', 'karma-bro'
    ],

    singleRun: false,


    concurrency: Infinity
    });
};

Answer 1

我终于弄明白了问题是什么.PhantomJS根本没有描述错误消息.显然,它没有实例化我的主要Angular模块mainApp,因为我没有包含我的主模块所依赖的外部模块的一些源文件(比如ngAnimate等).

所以我将测试浏览器从PhantomJSChrome 切换到了Chrome,它实际上给了我有意义的错误,这些错误很快就指向了正确的方向.