javascript - Jasmine 监视 Angular 服务

Question

我正在尝试使用 jasmine 和 karma 在 Angular Controller 上设置测试。我无法将所有代码放在这里，因为它很大，但这里有一些我的代码示例:

CompilerController.js(这是我要测试的 Controller )

(function() {
    angular.module('webcompiler')
        .controller('CompilerController', ['templateService', 'compilationService', CompilerController] );

    function CompilerController(templateService, compilationService) {
        var vm = this;

        /// Initialization
        (function() {
            vm.template = 'c_basic.c';
            ...
        })();

        /// Public members
        vm.loadTemplate = loadTemplate;

        /// Implementation
        function loadTemplate() {
            templateService.get(vm.template, function(source) {
                vm.sourcecode = source;
            });
        }
    }
})();

CompilerController.spec.js

  describe('CompilerController', function() {
    var CompilationService, TemplateService, controller;

    beforeEach(function() {
      module('webcompiler');
    });

    beforeEach(function() {
      inject(function(_$controller_, _TemplateService_, _CompilationService_) {
        CompilationService = _CompilationService_;
        TemplateService = _TemplateService_;
        spyOn(TemplateService, 'get').and.callFake(function(code, callback) {
          callback('c_basic_content');
        });
        controller = _$controller_('CompilerController');
      });
    });

    it('starts with default template as source', function() {
      expect(controller.template).toBe('c_basic.c');
      expect(controller.sourcecode).toBe('c_basic_content');
    });

    describe('loadTemplate function', function() {
      it('changes the content of the source area when called', function() {

        spyOn(TemplateService, 'get').and.callFake(function(code, callback) { // Does this work ? Changing the spy after injection ?
          if(code == 'c_parameters.c') { callback('c_parameters_content'); }
        });
        controller.template = 'c_parameters.c';
        controller.loadTemplate();
        expect(controller.sourcecode).toBe('c_parameters_content');
      });
    });
  });

尽管我什至不确定这是否有效(在创建 Controller 后更改 spy ，请参阅我的注释行)，此文件中的所有测试都失败并出现以下错误:

PhantomJS 1.9.8 (Windows 7 0.0.0) CompilerController loadTemplate function changes the content of the source area when called FAILED Error: [$injector:unpr] Unknown provider: TemplateServiceProvider <- TemplateService

这是我的 karma.conf.js 的一部分:

module.exports = function (config) {
    config.set({
        // base path, that will be used to resolve files and exclude
        basePath: '../../',
        // testing framework to use (jasmine/mocha/qunit/...)
        frameworks: ['jasmine'],
        // list of files / patterns to load in the browser
        files: [
            // bower:js
            'main/webapp/bower_components/jquery/dist/jquery.js',
            'main/webapp/bower_components/angular/angular.js',
            'main/webapp/bower_components/angular-cache-buster/angular-cache-buster.js',
            'main/webapp/bower_components/bootstrap/dist/js/bootstrap.js',
            'main/webapp/bower_components/angular-mocks/angular-mocks.js',
            // endbower
            'main/webapp/js/webcompiler.module.js',
            'main/webapp/js/TemplateService.js',
            'main/webapp/js/CompilationService.js',
            'main/webapp/js/CompilerController.js',
            'test/javascript/**/*.coffee' // I use coffeescript for the specs. The file I showed in this question are the compiled version.
        ],
        // Browser on which to test
        browsers: ['PhantomJS'],
        // Compile coffeescript specs
        preprocessors: {
          'test/javascript/**/*.coffee': ['coffee']
        },
        coffeePreprocessor: {
          options: {
            bare: true,
            sourceMap: false
          },
          transformPath: function(path) {
            return path.replace(/\.coffee/, '.js')
          }
        }
    });
};

Answer 1

在 Controller 中，您使用小写字母注入(inject)服务“templateService”，但它在 beforeEach 函数中以大写字母注入(inject)。可能会有帮助。