使用Gulp-mocha测试Angular:"窗口未定义"

Question

我正在与Gulp建立一个项目,用Mocha运行单元测试,包括Angular测试.我有基本设置工作(indexOf等),但是当我包含角度模拟时,我得到此错误或节点模块错误:

ReferenceError in 'gulp-mocha': "Window is not defined"

我尝试使用gulp-mocha-phantomjs包括角度模块模拟......但结果是一样的.(使用mocha-phantomjs我的错误是'初始超时'.)我已经看到很多配置Mocha和Angular或Gulp和Karma的例子,但还没有找到Gulp,Mocha和Angular的解决方案.

我正在考虑类似于这个Karma解决方案,通过在配置文件中指定它并强制Gulp加载它来正确加载角度模拟(使用Karma进行角度测试:"模块未定义").但是,即使这样可行,似乎gulp-mocha也不支持加载配置文件(mocha.opts - https://github.com/sindresorhus/gulp-mocha/issues/26).我很乐意听到一个更直接的解决方案.

我正在使用角度模拟1.2.22和gulp-mocha 1.1.0.

代码片段:

var mocha = require('gulp-mocha');

gulp.task('test', function () {
    return gulp.src('test/*.js', {read: false})
        .pipe(mocha({reporter: 'nyan', timeout: 400}));
});

测试/ test.js

var assert = require('assert');

var angular_mocks = require('angular-mocks'); //Fails only when this line is present

//tests

Answer 1

Gulp/Browserify/Mocha最终对我有用的是Karma和Mocha的结合.

具体来说,我使用了gulp-karma,并在karma.config.js中定义了配置,并使用了gulp.src的虚拟文件,正如其他人所做的那样:

gulp.task('test', function () {
  return gulp.src('./foobar.js').pipe(karma({      
    configFile:'karma.config.js',
    action: 'run'
  }))
  .on('error', handleErrors);

});

然后我使用了这个karma.config.js文件.我需要npm模块karma-mocha,karma-chai和karma-bro.(只有前两个,我得到'要求没有定义'.当然我尝试包括karma-requirejs,但这对Browserify不起作用.然后我尝试了karma-commonjs,但仍然没有用.然后我试图果报browserify,并得到了包括包(),没有人似乎已经解决了(一个奇怪的错误https://github.com/xdissent/karma-browserify/issues/46).噶兄弟做的把戏.)

我还需要预处理测试中引用的每个文件以及测试本身.(因为使用phantomJS还包括karma-phantomjs-launcher.我使用的是角度模拟的bower版本,因为它更新近:v1.2.25与npm的1.2.22相比 - 但是npm版本可能有效.)

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

  basePath: '',
  // frameworks to use
  frameworks: ['browserify', 'mocha', 'chai'],

  // list of files / patterns to load in the browser
  files: [
    'node_modules/angular/lib/angular.min.js',
    'bower_components/angular-mocks/angular-mocks.js',
    'source/javascript/controllers/*.js',
    'source/javascript/*.js',
    'test/*.js'
  ],

  reporters: ['progress'],

  port: 9876,

  colors: true,

  autoWatch: true,

  browsers: ['PhantomJS'],

  preprocessors: {
    'source/javascript/controllers/*.js': ['browserify'],
    'source/javascript/*.js': ['browserify'],
    'test/*.js': ['browserify']
  }

  });
};

最后这个测试通过了.最后,我需要确保我的模块和控制器的名称是一致的(大写等)来解决'模块未定义'错误.为了调试,我用文件中的node_modules/angular/lib/angular.js替换了node_modules/angular/lib/angular.min.js.

describe('Angular', function() {

  describe('App Controllers', function() {

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

    describe('MessageCtrl', function() {

      it('should retrieve the correct amount of messsages', angular.mock.inject(function($controller) {
        var scope = {},
        ctrl = $controller('MessageCtrl', {$scope:scope});
        assert.equal(scope.messages.length, 2);
      }));
    });
  });
});

我确实得到了这个:'警告:尝试不止一次加载角度.我可以忍受它.