用Gulp摩卡测试Angular:“;窗口未定义”;

Testing Angular with Gulp-mocha: "Window is not Defined"

本文关键字：窗口 未定义 Gulp 摩卡 测试 Angular      更新时间：2023-09-26

我正在用Gulp建立一个项目，用Mocha运行单元测试，包括Angular测试。我有基本的设置工作（indexOf等），但当我包括角度模型时，我会得到这个错误或节点模块错误：

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

我试过使用gullow mocha phantomjs包含angular模块mock。。。但是结果是一样的。（在mocha phantomjs中，我的错误是"初始化超时"。）我见过很多mocha和Angular或Gulp和Karma的配置示例，但还没有找到单独针对Gulp、mocha和Angular的解决方案。

我正在考虑类似于Karma的解决方案，通过在配置文件中指定角度模型并强制Gulp加载它来正确加载角度模型（Karma的角度测试："模块未定义"）。然而，即使这样做有效，gulp-mocha似乎也不支持加载配置文件（mocha.opts-https://github.com/sindresorhus/gulp-mocha/issues/26)。我很乐意听到一个更直接的解决方案。

我使用的是棱角分明的mock 1.2.22和gullow 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/test.js

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

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

具体来说，我使用了gull-carma，并在karma.config.js中定义了配置，并像其他人一样为gull.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模块因果报应摩卡、因果报应柴和果果报应兄弟。（只有前两个，我得到了"require is not defined"。然后我当然尝试了包含karma requirejs，但这对Browserify不起作用。然后我尝试了karma commonjs，仍然不起作用，然后我尝试karma Browserify，得到了一个涉及bundle（）的奇怪错误，似乎没有人解决(https://github.com/xdissent/karma-browserify/issues/46)因果报应兄弟成功了。）

我还需要对测试中引用的每个文件以及测试本身进行预处理。（对于使用phantomJS，还包括因果报应phantomJS启动器。我之所以使用bower版本的角度模型，只是因为它更新：与npm的1.2.22相比，v1.22.5版本，但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.min.js替换为node_modules/angular/lb/angular.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);
      }));
    });
  });
});

我确实明白："警告：试图加载角度不止一次。"我可以接受它。

相关文章：