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)

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

Answer 1

您编写控制器的方式与编写服务的方式非常相似（使用＆＃39;此＆＃39;而不是＆＃39; $ scope＆＃39; ）。我从来没有真正看到过以这种方式编写的控制器，并且可能会使单元测试变得更加困难。

我在测试中看到的主要问题是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();
    });
});

控制器本身将使用$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。我猜这是因为你不想全局公开你的控制器，这很好。你的方式甚至可能比传统方式更好。我用Google搜索了一下，发现Unit testing with 'this'。它看起来很有帮助，是一个有趣的阅读;虽然我希望他已经包含了他正在测试的源代码。看起来他只是使用了vanilla JavaScript，在我看来比Angular更容易测试。

我知道我没有为您编写控制器的方式提供完整的测试解决方案，但我希望我可以帮助您查明问题并让您更好地了解单元测试角度控制器

Karma / Jasmine没有找到AngularJS控制器（说它未定义）

1 个答案: