browserify / karma / angular.js" TypeError:无法读取属性' $ injector' of null"当第二次测试使用" angular.mock.inject"," currentSpec"一片空白

时间:2015-07-14 07:53:37

标签: karma-runner browserify karma-jasmine angular-mock

我有一个Angular.js应用程序,我正在尝试将其与Browserify一起使用。该应用程序工作,但我也想运行测试,我有两个茉莉花测试,我与业力运行。我使用browserify来让我访问angular.js和angular-mocks.js以及测试中的其他测试装置。

版本是: -

"angular": "^1.4.0",
"angular-mocks": "^1.4.0",
"browserify": "^10.2.3",
"karma": "^0.12.32",
"karma-browserify": "^4.2.1",
"karma-chrome-launcher": "^0.1.12",
"karma-coffee-preprocessor": "^0.2.1",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4",

如果我单独运行测试(通过在karma.conf文件中注释一个或另一个),它们都可以正常工作。 (yey!)

但如果我同时运行它们,我会收到此错误

    TypeError: Cannot read property '$injector' of null
    at Object.workFn (/tmp/3efdb16f2047e981872d82fd8db9c0a8.browserify:2272:22 <- node_modules/angular-mocks/angular-mocks.js:2271:0)

查看angular.mocks.js的第2271行。它读取

if (currentSpec.$injector) {

很明显,currentSpec现在已经无效了。

当我调用&#34; angular.mock.inject&#34;时,我已将问题隔离开来。在第二次测试中。

beforeEach(angular.mock.inject(function (_GridUtilService_) {
  gridUtilService = _GridUtilService_;
}));

如果我对此进行评论有效,但显然我无法在我的gridUtilService中运行测试。

有没有人知道如何使用karma和browserify运行两个(或更多:-) angular-mock jasmine测试?

下面是我的测试,karma.conf文件。 Angular服务在部署时可以正常工作,但为了这个目的,它们可以简单地成为无效的愚蠢服务。

karma.conf: -

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

    // list of files / patterns to load in the browser
    files: [
      'src/main/assets/js/**/*.js',
//      'src/test/**/*.js'
      'src/test/services/SettingUtil*.js',
      'src/test/services/GridUtil*.js'
    ],


    // list of files to exclude
    exclude: [
        'src/main/assets/js/**/app-config.js'
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/main/assets/js/**/*.js': ['browserify'],
      'src/test/**/*.js': ['browserify']
    },

    browserify: {
        debug: true,
        extensions: ['.js', '.coffee', '.hbs']
    },

    // 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_DEBUG,

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

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

的src /测试/服务/ SettingUtilServiceTest.js:

'use strict';

describe("SettingUtilServiceTest.", function() {
  it("contains spec with an expectation", function() {
    expect(true).toBe(true);
  });

  require('angular');

  require('angular-mocks'); 

  // can't do below see error at https://github.com/xdissent/karma-browserify/issues/10
  //beforeEach(module('dpServices'));

  //so need todo this
  beforeEach(angular.mock.module('dpServices'));

  var fixtures = require('./serviceFixtures.js');

  var sus = fixtures.settingUtilServiceTestFixtures;
  var ts1 = sus.tablesetting1;
  var ts2 = sus.tablesetting2;

  var settingUtilService;

  beforeEach(angular.mock.inject(function (_settingUtilService_) {
      settingUtilService = _settingUtilService_;
    }));

    it('should return an object containing mins and maxs from function minMaxes()', function() {
        expect(ts1).toBeDefined();
        expect(ts2).toBeDefined();
        var minMaxs = settingUtilService.minMaxs(ts1);
        var mins = minMaxs.mins;
        expect(mins).toBeDefined();
        var maxs = minMaxs.maxs;
        expect(maxs).toBeDefined();
    });

});

的src /测试/服务/ GridUtilServiceTest.js:

'use strict';

describe("GridUtilServiceTest.", function() {
  it("is a set of tests to test GridUtilService.", function() {
    expect(true).toBe(true);
  });

  require('angular');

  require('angular-mocks');

  // can't do below see error at https://github.com/xdissent/karma-browserify/issues/10
//  beforeEach(module('dpServices'));

  //so need todo this
  beforeEach(angular.mock.module('dpServices'));

  var fixtures = require('./gridFixtures.js');

  var gridFix = fixtures.gridUtilServiceTestFixtures;

  var ts1 = gridFix.tablesetting1;
  var ts2 = gridFix.tablesetting2;
  var ts3 = gridFix.tablesetting3;

  var gridUtilService;

  beforeEach(angular.mock.inject(function (_GridUtilService_) {
    gridUtilService = _GridUtilService_;
  }));

  it('should return an object containing mins and maxs from function minMaxes()', function() {
        expect(ts1).toBeDefined();
        expect(ts2).toBeDefined();
        expect(ts3).toBeDefined();
    });

});

如果你需要访问角度设置,我可以提供它(使用browserify的require()函数拆分成多个文件并使用gulp构建...但正如我所说,应用程序运行正常,测试只会失败当有两个测试时,我认为问题在于karma-jasmine和angular-mocks或覆盖currentSpec变量。

如果有人知道如何将我的角度测试分成多个测试(我不想要单片角测试)而没有错误消息,那么所有的帮助都会受到赞赏。感谢。

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,对我来说问题是因为我需要角度和角度模拟,就像你在每个描述块里面一样。我移动了两行

require('angular');
require('angular-mocks');

在describe块之上,并确保只调用一次。