使用 karma/jasmine 对 Angular 服务调用进行单元测试

Question

当我尝试在我的应用程序中对服务调用返回进行单元测试时，出现以下 service undefined 错误。我在这上面花了几个小时，但我无法真正找出问题出在哪里。感谢是否有人可以帮助我解决这个问题。

Firefox 38.0.0 (Windows 8.1) companyService should return a promise for getCompany function FAILED
        minErr/<@C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:63:12
        loadModules/<@C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:4138:15
        forEach@C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:323:11
        loadModules@C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:4099:5
        createInjector@C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:4025:11
        workFn@C:/Users/user1m/Documents/mycompany/WebApiRole/node_modules/angular-mocks/angular-mocks.js:2409:44
        TypeError: companyService is undefined in C:/Users/user1m/Documents/mycompany/WebApiRole/test/company/Compa
nyServiceSpec.js (line 15)
        @C:/Users/user1m/Documents/mycompany/WebApiRole/test/company/CompanyServiceSpec.js:15:16
Firefox 38.0.0 (Windows 8.1): Executed 1 of 1 (1 FAILED) ERROR (0.031 secs / 0.014 secs)    

我的 karma.conf.js 文件

 // Karma configuration

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: [
            'node_modules/requirejs/require.js',
            'bower_components/angular/angular.js',
            'node_modules/angular-mocks/angular-mocks.js',
            'bower_components/ng-file-upload/**/*.js',
            'bower_components/angular-ui-router/release/**/*.js',
            'bower_components/angular-bootstrap/**/*.js',
            'bower_components/angular-translate/**/*.js',
            'bower_components/angular-translate-loader-static-files/**/*.js',
            'bower_components/angular-pnotify/src/**/*.js',
            'bower_components/angular-local-storage/**/*.js',
            'bower_components/angular-loading-bar/build/**/*.js',
            'app/app.js',
            'app/**/*.js',
            'test/**/*Spec.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
        hostname: 'localhost',
        port: 44555,


    // 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
  });
};

CompanyServiceSpec.js 文件

'use strict';

describe('companyService', function() {

    var $httpBackend, companyService;

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

    beforeEach(angular.mock.inject(function(_$httpBackend_, _companyService_) {
        $httpBackend = _$httpBackend_;
        companyService = _companyService_;
    }));

    it('should return a promise for getCompany function', function() {
        expect(typeof companyService.getCompany('foobar').then).toBe('function');
    }); 

});

CompanyService.js 文件

angular.module('mycompany').factory('companyService',
    function($http, mycompanyApiProvider, $upload) {
        'use strict';

        var _company = null;

        function getCompany(companyId) {
            return $http.get(mycompanyApiProvider.url('companies/' + companyId));
        }
    });

app.js 文件

angular.module('mycompany', [
    'ui.router',
    'ui.router.util',
    'angularFileUpload',
    'pascalprecht.translate',
    'jlareau.pnotify',
    'LocalStorageModule',
    'angular-loading-bar',
    'ui.bootstrap',
    'angularMoment',
    'frapontillo.bootstrap-switch'
]);

angular.module('mycompany').run(function (mycompanyApiProvider, $state, userService, localStorageService,
    $translate, $rootScope, $window, $timeout) {
    'use strict';

    mycompanyApiProvider.setEndpoint('/api/');
    mycompanyApiProvider.loginUrl = '/home/login';

});

mycompanyApiProvider.js 文件

'use strict';

angular.module('mycompany')
    .provider('mycompanyApiProvider', function($httpProvider, $provide) {

        $provide.factory('jsonHeaderInterceptor', function() {
            return {
                'request': function(config) {
                    // config.headers['Content-Type'] = 'application/json';
                    return config;
                }
            };
        });

    });

文件夹结构

Folder structure : 
    |WebApiRole/Karma.Conf.js
    |WebApiRole/app/app.js
    |WebApiRole/app/company/CompanyService.js
    |WebApiRole/app/common/services/mycompanyApiProvider.js
    |WebApiRole/test/company/CompanyServiceSpec.js

Answer 1

companyService 工厂不返回任何内容，因此它被视为已返回 undefined。测试似乎是在测试它返回一个带有getCompany 函数的对象，所以你可以改变它：

angular.module('mycompany').factory('companyService', function($http, mycompanyApiProvider, $upload) {
  'use strict';

  var _company = null;

  function getCompany(companyId) {
    return $http.get(mycompanyApiProvider.url('companies/' + companyId));
  }

  return {
    getCompany: getCompany
  };
});