javascript - 类型错误 : $httpBackend is undefined

Question

我正在开发一个 Angular 应用程序。我的应用程序运行时只有很少的 Controller 和服务。现在我想开始对服务和 Controller 进行单元测试。但是不知道我做错了什么，我什至无法为一项服务正确运行测试。当我尝试使用 karma 运行测试时:
业力启动 karma.conf.js

我收到以下错误:

Firefox 38.0.0 (Windows 7 0.0.0) service: MyCategoryService should send a request to MyCategoryService FAILED
    minErr/<@c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:68:12
    loadModules/<@c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:4458:15
    forEach@c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:340:11
    loadModules@c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:4419:5
    createInjector@c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:4344:11
    workFn@c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/libs/angular-mocks.js:2797:44
    angular.mock.inject@c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/libs/angular-mocks.js:2777:30
    @c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/tests/services/preferenceCategoryService.test.js:18:9
    TypeError: $httpBackend is undefined in c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/tests/services/preferenceCategoryServi
ce.test.js (line 33)
    @c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/tests/services/preferenceCategoryService.test.js:33:9
Firefox 38.0.0 (Windows 7 0.0.0): Executed 13 of 13 (1 FAILED) (0.016 secs / 0.039 secs)

我不确定我哪里出错了。我试着关注 this stackoverflow question但毫 headless 绪。

任何帮助或建议都会很棒!!

这是我的应用程序:

'use strict';

/* App Module */

var app = angular.module('myApp', [ 
'ngRoute', // uri routing
'controllers', // controllers
'services', // services
'ngMock'

]);

// module controllers
var appCtrl = angular.module('controllers', []);

// module services
var appServices = angular.module('services', [ 'ngResource' ]);

这是我的服务:

'use strict';

appServices.factory('MyCategoryService', ['$resource', 'REST_RESOURCE',
function ($resource, REST_RESOURCE) {
    return $resource(REST_RESOURCE.PREFERENCE, {}, {
        query: {
            method: 'GET',
            params: {},
            isArray: false
        }
    });
}]);

这是我的服务规范:

describe('service: MyCategoryService', function () {
    var $httpBackend;
    var $rootScope;
    var MyCategoryService;
    var REST_RESOURCE;

    beforeEach(function () {
        angular.mock.module('myApp');
        angular.mock.inject(function ($injector) {
            $httpBackend = $injector.get('$httpBackend');
            $rootScope = $injector.get('$rootScope');
            MyCategoryService= $injector.get('MyCategoryService');
            REST_RESOURCE = $injector.get('REST_RESOURCE');
        });
    });

    it('should send a request to MyCategoryService', function () {
        //TODO
        var mockdata = {
            items: {
            }
        };

        $httpBackend.expect('GET', REST_RESOURCE.PREFERENCE).respond(200, mockdata);

        MyCategoryService.query(function (response) {
            $rootScope.data = response.items;
        });
        $httpBackend.flush();

        expect($rootScope.data).toEqual(mockdata);
    });

});

这是我的 karma.conf.js 文件:

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: [
      //dependencies
      'bower_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-bootstrap/ui-bootstrap.js',
      'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'js/app.js',
      'js/libs/*.js',
      'js/directives/*.js',
      'js/routes.js',
      'js/resource_uri.js',
      'js/services/*.js',
      'js/controllers/*.js',
      //test files
      'js/tests/*.test.js',
      'js/tests/*/*.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: {
    },


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


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

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

Answer 1

在对一些文件进行了一些更改后，我终于让我的测试运行起来了。我不知道确切的原因是什么，但我通过以下更改让它工作。以下是我的更改:

我删除了 ngMocks 依赖项。更改后，我的 app.js 文件如下所示。

 'use strict';

 /* App Module */

 var app = angular.module('admintool', [ 'ngRoute', // uri routing
 'controllers', // controllers
 'services', // services
 'angularUtils.directives.dirPagination', // pagination service
 'ui.bootstrap', // angular ui bootstrap
 'ui', // ui sortable
 'uiSwitch', // on of switch service
 'ngMessages', // for form validation
 'xeditable', // for table edit
 'ngCookies'
 // messages
 ]);

 // module controllers
 var appCtrl = angular.module('controllers', []);

 // module services
 var appServices = angular.module('services', [ 'ngResource' ]);

service.js 看起来像:

'use strict';

//appServices.factory('PreferenceCategory', ['$resource', 'REST_RESOURCE',
angular.module('services').factory('PreferenceCategory', ['$resource', 'REST_RESOURCE',
function ($resource, REST_RESOURCE) {
    return $resource(REST_RESOURCE.PREFERENCE_CATEGORY, {}, {
        query: {
            method: 'GET',
            params: {},
            isArray: false
        }
    });
}]);

serviceSpec.js 看起来像:

describe('Preference Category Service',
    function() {

        beforeEach(angular.mock.module("admintool"));

        var httpBackend, pc;

        beforeEach(inject(function($httpBackend, PreferenceCategory) {
            httpBackend = $httpBackend;
            pc = PreferenceCategory;
        }));

        afterEach(function() {
            httpBackend.verifyNoOutstandingExpectation();
            httpBackend.verifyNoOutstandingRequest();
        });

        it(
                'Check GET Request',
                function() {

                    httpBackend
                            .expectGET(
                                    'http://jboss-pmadmin-tool-dev.ose-core.optum.com/pmadmin-tool/v1/preference_categories')
                            .respond({
                                username : 'test'
                            });

                    // call the function on our service instance
                    var response = pc.query();

                    httpBackend.flush();

                    expect(response.username).toEqual('test');
                });
    });

karma.conf.js 文件，我删除了 'js/libs/*' 并添加了应用程序中使用的单个文件。

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

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

        // 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.min.js', 
                  'bower_components/angular-mocks/angular-mocks.js', 
                  'js/libs/angular-resource.js', 
                  'bower_components/angular-route/angular-route.js',
                  'bower_components/angular-bootstrap/ui-bootstrap.js',
                  'js/libs/pagination.js',
                  'js/libs/angular-ui.js',
                  'js/libs/angular-ui-switch.min.js',
                  'js/libs/angular-messages.js',
                  'js/libs/xeditable.min.js',
                  'bower_components/angular-cookies/angular-cookies.js',

                  'js/app.js',
                  'js/resource_uri.js',

                  'js/services/*.js',
                  'js/controllers/*.js',

                  'js/tests/**/*.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 : {},

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

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

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