Question

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

所以这是我在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等）。

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

Answer 2

检查是否

安装了测试框架，测试条件属于您正在使用的测试框架。
为您的框架配置了“karma.config.js” 安装。
使用浏览器测试代替Headless PhantomJS测试来获得明确的指示。

在大多数情况下，上述错误。

角度测试示例失败

2 个答案: