angularjs - Fuse Angular APP 注入(inject)模块时的 karma+jasmine 测试问题

Question

y 在我的 Fuse 应用程序(withinpixels[dot]com/themes/fuse)中设置了 karma+jasmine 测试，基于 AngularJS+Gulp 项目，使用下一个配置文件:

karma.conf.js:

// Karma configuration
// Generated on Tue Oct 25 2016 11:50:38 GMT+0200 (CEST)

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 : [
            'bower_components/angular/angular.js',
            'bower_components/angular-mocks/angular-mocks.js',
            'src/app/**/*.json',
            'src/app/**/*.js',
            'test/*.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 : {
            'src/app/**/*.json' : ['json_fixtures'],
            'src/app/**/*.js' : ['coverage']
        },

        coverageReporter : {
            type : 'text-summary',
            dir : 'coverage/'
        },

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

        // 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 : ['PhantomJS'], //['Chrome'],


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

        plugins: [
            'karma-jasmine',
            'karma-coverage',
            'karma-phantomjs-launcher',
            'karma-json-fixtures-preprocessor'
        ],


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

测试/测试.js:

describe("Index/Module", function () {
    var rootScope, scope, ctrl;

    beforeEach(angular.mock.module('fuse'));

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

        ctrl = $controller("IndexController", {
            $scope: scope
        });
    }));

    it("exists", function() {
        expect(ctrl).not.toBeUndefined();
    });
});

当我执行测试时，我得到了下一条错误消息:

[PhantomJS 2.1.1 (Mac OS X 0.0.0)] ERROR: Error: [$injector:nomod] Module 'app.core' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.5.7/$injector/nomod?p0=app.core at http://localhost:9876/base/bower_components/angular/angular.js?628a6cd3a27859d17a9a4ee87e62c9b6996ba4cb:2077

Uncaught errors occured. Full output can be verified in Output window.

¿有什么想法吗？

Answer 1

我遇到了同样的问题。我通过将 app.core 添加到 我的 Controller 依赖项。

这是必需的，因为我的模块使用了 ui-router，它是一个熔断核心依赖项。

此外，您可能需要在 beforeAll Hook 中声明 Controller 的模块: angular.moodule('my.module')

我的 Controller :

 (function ()
 {
 'use strict';

 angular
     .module('app.notifs', ['app.core'])
     .config(config);

 /** @ngInject */
 function config($stateProvider, msNavigationServiceProvider)
 {
     // State
     $stateProvider.state('app.notifs', {
         url      : '/notifications',
         views    : {
             'content@app': {
                 templateUrl: 'app/main/apps/notifs/notifs.html',
                 controller : 'NotifsCtrl as vm'
             }
         }
     });

     // Navigation
     msNavigationServiceProvider.saveItem('apps.notifs', {
         title : 'Notifications',
         icon  : 'icon-alert-box',
         state : 'app.notifs',
         weight: 2
     });

 }

 })();

我的测试:

describe('Controller: Notifs', function () {
var $scope, $rootScope, $controller;

it('Expect True to be True', function () {
    expect(true).toBe(true);
});


beforeEach(function () {
    module('app.notifs');
});


beforeEach(inject(function (_$controller_, _$rootScope_) {
    $rootScope  = _$rootScope_;
    $controller = _$controller_;
}));

it('can be instantiated', function() {
    $scope = $rootScope.$new();
    var ctrl =  $controller('NotifsCtrl', { $scope: $scope });
    expect(ctrl).not.toBe(null);

});


it('must have boolean set to false', function() {
    $scope = $rootScope.$new();
    var ctrl =  $controller('NotifsCtrl', { $scope: $scope });
    expect(ctrl.officialPriceMissing).toBe(false);
});
});

希望这对您有所帮助。