javascript - Karma/Jasmine 没有找到 AngularJS Controller (说它是未定义的)

Question

这是我的karma/karma.conf.js:

// Karma configuration
// Generated on Mon Jan 04 2016 16:17:18 GMT-0500 (EST)

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

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      '../angular.js',
      'node_modules/angular-mocks/angular-mocks.js',
      '../post.js',
      'tests/test_post.js'
    ],



    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

这是我的karma/tests/test_post.js:

describe('Controller: MainCtrl', function() {
    beforeEach(module('PostPageApp'));

    var ctrl;

    beforeEach(inject(function($controller) {
        ctrl = $controller('MainCtrl');
    }));

    it('Show have an add and logout function', function() {
        expect(ctrl.add).toBeDefined();
    });
});

这是../post.js:

angular.module("PostPageApp", ["BaseApp"])
    .controller("MainCtrl", ["$http", "$window", "BaseService", function($http, $window, BaseService) {

        var self = this;

        self.add = function() {
            BaseService.add.post(self.post, function() {
                self.cerrorMessages = BaseService.cerrorMessages;
            });
        };

        self.logoutUser = function() {
            BaseService.logout();
        };

    }]);

现在，当我执行 karma start 时，它会返回:

TypeError: Cannot read property 'add' of undefined
        at Object.<anonymous> (/home/user/Documents/CMS/CMSApp/static/js/karma/tests/test_post.js:11:20)
Chromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) (0 secs / 0.075 seChromium 47.0.2526 (Ubuntu 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.118 secs / 0.075 secs)

即使我有 ctrl = $controller('MainCtrl'); 这行，它也无法读取未定义的属性 add。知道为什么它说 Controller 未定义吗？

Answer 1

您编写 Controller 的方式与编写服务的方式非常相似(使用“this”而不是“$scope”)。我从未真正见过以这种方式编写的 Controller ，这可能会使对其进行单元测试变得更加困难。

我在您的测试中看到的主要问题是 ctrl 变量未分配给语句中的任何范围，

beforeEach(inject(function($controller) {
    ctrl = $controller('MainCtrl');
}));

如果您使用 $scope 而不是 this，测试通常如下所示:

describe('Controller: MainCtrl', function() {
    beforeEach(module('PostPageApp'));

    var ctrl, scope;

    beforeEach(inject(function($controller, $scope) {
        scope = $rootScope.$new();
        ctrl = $controller('MainCtrl', {
            scope: $scope
        });
    }));

    it('should have an add function', function() {
        expect(scope.add).toBeDefined();
    });
});

并且 Controller 本身将使用 $scope 而不是 this。

angular.module("PostPageApp", ["BaseApp"])
    .controller("MainCtrl", ["$http", "$window", "$scope", "BaseService", function($http, $window, $scope, BaseService) {

        var scope = $scope;

        scope.add = function() {
            BaseService.add.post(scope.post, function() {
                scope.cerrorMessages = BaseService.cerrorMessages;
            });
        };

        scope.logoutUser = function() {
            BaseService.logout();
        };

    }]);

这是一种实现方法，但您似乎不想使用 $scope。我猜这是因为您只是不想在全局范围内公开您的 Controller ，这很好。你的方式甚至可能比传统方式更好。我用 Google 搜索了一下，发现 Unit testing with 'this' .它看起来很有帮助，读起来很有趣；尽管我希望他已经包含了他正在测试的源代码。看起来他只是使用了 vanilla JavaScript，在我看来这比 Angular 更容易测试。

我知道我没有为您编写 Controller 的方式提供完整的测试解决方案，但我希望我能帮助您查明问题并让您更好地理解一般的单元测试 Angular Controller 。