javascript - Angular Testing Example Fail - Stack Overflow

admin管理员组

文章数量:1415484

Being new to JS unit testing and Angular testing in particular, I tried writing my own tests with Jasmine and Karma. After numerous failed attempts at writing my own tests, I decided to step back and check whether everything is working properly, so I copied the example controller and its tests from the Angular Documentation on Unit testing into my project and I am unable to get even that to work.. I feel like a plete idiot that can't even get the copy-pasted code to work..

So here is the controller that I have initialized in the step1Ctrl.js file:

Module is initialized in another file.

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';
    }   }; });

And here's are the tests that live inside 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');
    });
  });
});

Literally copy-pasted from the documentation.

So the error that I get upon running the tests is:

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

Which tells me that the $controller function in the second beforeEach is failing, as $controller is undefined. So it looks like the first beforeEach doesn't run, or it does but an undefined value gets injected with the inject function.

I am also using browserify, if that matters.

Here is my karma.conf.js, if that helps, as well:

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

    basePath: '',

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

    files: [
        '.js/1.5.0-beta.1/angular.js',
        '.2.15/angular-ui-router.js',
        '.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
    });
};

Being new to JS unit testing and Angular testing in particular, I tried writing my own tests with Jasmine and Karma. After numerous failed attempts at writing my own tests, I decided to step back and check whether everything is working properly, so I copied the example controller and its tests from the Angular Documentation on Unit testing into my project and I am unable to get even that to work.. I feel like a plete idiot that can't even get the copy-pasted code to work..

So here is the controller that I have initialized in the step1Ctrl.js file:

Module is initialized in another file.

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';
    }   }; });

And here's are the tests that live inside 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');
    });
  });
});

Literally copy-pasted from the documentation.

So the error that I get upon running the tests is:

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

Which tells me that the $controller function in the second beforeEach is failing, as $controller is undefined. So it looks like the first beforeEach doesn't run, or it does but an undefined value gets injected with the inject function.

I am also using browserify, if that matters.

Here is my karma.conf.js, if that helps, as well:

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

    basePath: '',

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

    files: [
        'https://cdnjs.cloudflare./ajax/libs/angular.js/1.5.0-beta.1/angular.js',
        'https://cdnjs.cloudflare./ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js',
        'https://cdnjs.cloudflare./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
    });
};

• javascript
• angularjs
• unit-testing
• browserify
• karma-jasmine

Share Improve this question Follow asked Feb 1, 2016 at 15:02 user2255226user2255226 20433 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I have finally managed to figure out what the problem was. PhantomJS wasn't descriptive with the error messages at all. Apparently, it was failing to instantiate my main Angular module mainApp, because I didn't include some source files for external modules that my main module depends on (like ngAnimate, etc.).

So I switched my testing browser from PhantomJS to Chrome and it actually gave me meaningful errors that quickly pointed in the right direction.

Check whether

• The testing framework is installed, The test conditions belongs to the testing framework you are using.

• The "karma.config.js" is configured for the framework you installed.

• Use Browser testing instead of Headless PhantomJS testing to get clear directions.

In most cases above are the errors.

本文标签： javascriptAngular Testing Example FailStack Overflow