Question

我已经尝试了几个教程并查看了此处提供的许多解决方案。我是Angular的新手，目前正在尝试为一个相当大的SPA设置测试。

在this教程之后，我完成了：

Angularjs应用程序设置
Karma setup
我们的第一次测试

karma配置文件基本上是默认内容，文件中包含一些引用并排除：

// list of files/patterns to load in the browser
 files: [
    'bower_components/angular/angular.js',
    'bower_components/angular-mocks/angular-mocks.js',
    'app/app.js',
    'JavaScript.spec.js'
],

我重新安装了整个测试实现，现在再次进行简单的测试。但是尝试为控制器编写测试不起作用：

这是错误消息

我更改了引用karma配置文件中的bower_components和app文件的路径。现在运行karma的shell从app.js文件返回一条错误消息，说：

   Uncaught ReferenceError: Logging is not defined

编写与doucmentation中的测试相同的测试，会出现以下错误：

这是测试代码：

describe('nyKladdController', function () {
    beforeEach(module('app'));

    var $controller; 
    beforeEach(inject(function (_$controller_) {
        $controller = _$controller_; 
    }));


    describe('$scope.mixTable', function () {
        it('is false', function () {
            var $scope = {};
            var controller = $controller('nyKladdController', { $scope: $scope }); 
            expect($scope.mixTable).toBeFalsy();
        });
    }); 
});

从错误消息中可以看到：在app模块之后，测试文件开始加载应用程序依赖项。这是app.js文件：

(function () {
    'use strict';
    angular.module('app', [
        'ngAnimate', 'ngRoute', 'ngSanitize', 'ngResource', 'ngMessages',
        'AdalAngular', 'config', 'angular.filter',
        'ui.bootstrap', 'ui.mask', 'ui.select', 'ui.validate',
        'angular-loading-bar', 'ui.tree', 'ui.tree-filter', 'checklist-model'
    ]);
})();

换句话说：我怎样才能让我的测试加载应用程序依赖项。

Answer 1

我不得不将app.js中的所有app依赖项加载到karma.config文件中。现在karma配置中的files数组如下所示：

// list of files / patterns to load in the browser
files: [
    //bower modules
    './bower_components/angular/angular.js',
    './bower_components/angular-mocks/angular-mocks.js',
    './bower_components/angular-ui-mask/src/mask.js',
    './bower_components/angular-ui-select/dist/select.js',
    './bower_components/angular-ui-tree-filter/dist/angular-ui-tree-filter.js',
    './bower_components/angular-ui-tree/dist/angular-ui-tree.js',
    './bower_components/angular-ui-validate/dist/validate.js',
    './bower_components/angular-loading-bar/build/loading-bar.js',
    // node modules
    './node_modules/angular-animate/angular-animate.js',
    './node_modules/angular-route/angular-route.js', 
    './node_modules/angular-sanitize/angular-sanitize.js',
    './node_modules/angular-resource/angular-resource.js', 
    './node_modules/angular-messages/angular-messages.js',
    './node_modules/adal-angular/dist/adal-angular.min.js',
    './node_modules/angular-filter/dist/angular-filter.js',
    './node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js', 
    './node_modules/bower-config/lib/Config.js',
    './node_modules/checklist-model/checklist-model.js',
    //app file
    './app/app.js',
    './app/common/config/config.js',
    //test files etc..
    'JavaScript.spec.js',
    './app/produkt/ny/controllers/*.js' // tester å hente inn controller som refereres i test filen
],

Answer 2

这可能是因为Karma以错误的顺序加载源文件。要使Angular正常工作，必须在与该模块关联的任何组件，服务等之前加载每个模块。

要解决此问题，您可以更改您的Karma配置以确保首先加载模块文件。

// list of files / patterns to load in the browser
files: [
    '../../bower_components/angular/angular.js',
    '../../bower_components/angular-mocks/angular-mocks.js',
    'app/**/*.module.js',
    'app/**/*.js'
],

这假设您正在为角度模块使用某种命名约定（如上例中的* .module.js）。否则，您必须单独列出模块的路径。

Answer 3

添加beforeEach(module("your-module-name")); =＆gt;来自app.js“

的角度应用程序名称

describe('check a controller', function () {

    beforeEach(module("your module name")); // I think you missed this.

    var scope, checkController; 

    beforeEach(inject(function ($rootScope, $controller) {
        scope = $rootScope.new(); 

        checkController = function () {
            return $controller('nyKladdController', {
                '$scope': scope
            });
        }; 
    }));

    it('has a dummy spec to test 2 + 2', function () {
        // An intentionally failing test. No code within expect() will never equal 4.
        expect(2 + 2).toEqual(4);
    });

});

karma.conf

files: [     // sample order. Include your files accordingly
            'src/bower_components/angular/angular.min.js',
            'src/bower_components/angular-mocks/angular-mocks.js',
             // some sample libraries 
            'src/bower_components/angular-cookies/angular-cookies.min.js',
            'src/bower_components/angular-ui-router/release/angular-ui-router.min.js',
            'src/bower_components/angular-resource/angular-resource.min.js',
            'src/bower_components/angular-sanitize/angular-sanitize.min.js',
            'src/bower_components/angular-loading-bar/build/loading-bar.min.js',

            'src/app/app.js',
            'src/app/**/*.js',
            'tests/unit/**/*.spec.js'
        ],
exclude: []

无法为Angularjs设置Karma和Jasmine

3 个答案: