單元測試中的 Angular 1.x 服務注入

Question

我一直在根據現有信息嘗試不同的變體，但還沒有找到可行的解決方案。

我正在嘗試將服務注入單元測試進行測試。

我目前的實現如下。 問題是，該服務不是： ReferenceError: Can't find variable: SerializationService - 我也試過在 beforeeach 中使用inject()也無濟於事。

規范.js

'use strict';

describe('SerializationService', function () {

  var SerializationService;

  beforeEach(function () {

    module('app');

    inject(function (_SerializationService_) {
      SerializationService = _SerializationService_;
    });
  });

  it('should have a SerializationService', function () {
    expect(SerializationService).toBeDefined();
  });
});

我嘗試過的其他事情：

• 使用單獨的模塊包含在 app 模塊之間，並使用下划線表示法在另一個 foreach 中注入服務

業力配置文件

// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2016-08-15 using
// generator-karma 0.8.3

module.exports = function (config) {
  'use strict';

  config.set({
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // 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_components/angular/angular.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-touch/angular-touch.js',
      'bower_components/json3/lib/json3.js',
      'bower_components/es5-shim/es5-shim.js',
      'bower_components/jquery/dist/jquery.js',
      'bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-touch/angular-touch.js',
      'bower_components/angular-route/angular-route.js',
      'bower_components/angular-ui-router/release/angular-ui-router.js',
      'bower_components/angular-audio/app/angular.audio.js',
      'bower_components/socket.io.client/dist/socket.io-1.3.5.js',
      'bower_components/angular-socket-io/socket.js',
      'bower_components/angular-local-storage/dist/angular-local-storage.js',
      'bower_components/moment/moment.js',
      'bower_components/angular-moment/angular-moment.js',
      'bower_components/angular-scroll-glue/src/scrollglue.js',
      'bower_components/angular-gravatar/build/angular-gravatar.js',
      'bower_components/angular-socialshare/dist/angular-socialshare.min.js',
      'bower_components/clipboard/dist/clipboard.js',
      'bower_components/ngclipboard/dist/ngclipboard.js',
      'bower_components/color-thief/src/color-thief.js',
      'bower_components/ngColorThief/angular-colorthief.js',
      'bower_components/hashids/dist/hashids.js',
      'bower_components/ngEmbed/src/ng-embed.js',
      'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
      'bower_components/ngEmbed/src/ng-embed.js',
      'app/scripts/**/*.js',
      'test/unit/mock/**/*.js',
      'test/unit/spec/**/*.js'
    ],

    // list of files / patterns to exclude
    exclude: [],

    // web server port
    port: 8081,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: [
      'PhantomJS'
    ],

    // Which plugins to enable
    plugins: [
      'karma-phantomjs-launcher',
      'karma-jasmine'
    ],

    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,

    colors: true,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO

    //// Uncomment the following lines if you are using grunt's server to run the tests
    // proxies: {
    //   '/': 'http://localhost:9000/'
    // },
    // //URL root prevent conflicts with the site root
    // urlRoot: '_karma_'
  });
};

Answer 1

我在 plunker 上創建了一個小示例： Plunker example

它使用 angular-mocks 和 jasmine 進行測試。 主要部分：

describe('TestService', function(){
  beforeEach(module('test'));

  var TestService;
  beforeEach(inject(function(_TestService_) {
    TestService = _TestService_;
  }));

  it('returns 42', function(){
    expect(TestService.testMethod()).toEqual(42);
  });
});

您必須使用在 angular-mocks 中定義的inject 。 它注入服務、控制器等。下划線會自動去除，能夠將變量命名為TestService只是語法糖

Answer 2

問題出在我的模擬模塊中

我使用的是 crate 方法而不是 get：

這是錯誤的：

angular
  .module('meow-mock', [])
  .factory('somemock', function () {
  //code
  });

這是對的：

angular
  .module('meow-mock')
  .factory('somemock', function () {
  //code
  });