角度测试示例失败

Angular Testing Example Fail

本文关键字:失败 测试      更新时间:2023-09-26

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

所以这是我在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 })')

这告诉我第二个beforeEach中的$controller函数失败了,因为$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
    });
};

我终于设法弄清楚问题是什么。PhantomJS根本没有描述错误消息。显然,它无法实例化我的主 Angular 模块mainApp,因为我没有包含我的主模块所依赖的外部模块的一些源文件(如ngAnimate等(。

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

检查是否

  • 测试框架安装完毕,测试条件属于您正在使用的测试框架。

  • "karma.config.js"是为框架配置的安装。

  • 使用浏览器测试而不是无头PhantomJS测试来获得明确的方向。

在大多数情况下,以上是错误。