Web 组件测试器 - gulp 任务以在每个构建中运行测试

Question

我想在 gulpfile 中放入类似：

require('web-component-tester').gulp.init(gulp);
gulp.task('default', function() {
  gulp.watch(['elements/**', 'test/**'], ['test:local']);
});

目的是查看测试文件夹或元素文件夹（带有 Polymer 组件）。如果其中一些会发生变化，请在每个构建中运行测试。

我的 wct.conf.js：

module.exports = {
  root: '.tmp/elements/',
  suites:      ['**/test/'],
  plugins: {
    local: {browsers: ['chrome']},
  }
};

我在某个页面上找到了上面的代码，但是在我添加了一些测试然后在我的终端中输入 gulp 之后，我发现了错误，因为 .tmp 文件夹没有更新并且像 Polymer is not defined 或 ajax.generateRequest 这样的奇怪错误没有一个函数。当我故意在测试中犯错误以使其失败时，我也得到了正确的错误，所以看起来有些事情还可以，但根本不是。

我将测试添加到包含大量文件的现有项目中。当我尝试在空项目上做同样的事情时，我也得到了同样的错误，直到我输入bower install。

这是否有可能是 Bower 依赖项的问题？ 或者你知道出了什么问题吗？ gulpfile 中的这部分代码是否正确执行所需的效果？

非常感谢。

Answer 1

我没有直接回答您的问题，因为我已经有一段时间没有这样做了。但是下面定义了一个子任务来定义一个名为“客户端”的任务，然后在帧缓冲区中运行测试（所以当测试运行时，我不会到处弹出令人不安的窗口——它们只是运行并在控制台窗口中输出。它有效地产生了 wct 的命令行版本，而我根本没有 wct.conf 文件。

(function() {
  'use strict';

  const spawn = require('child_process').spawn;

  module.exports = function(gulp) {
    gulp.task('test:client',['lint:client'], () => {
      var child = spawn('xvfb-run', ['-a', 'wct', '--color'], {cwd: process.cwd()});

      child.stdout.setEncoding('utf8');

      child.stdout.on('data', function(data) {
        process.stdout.write(data);
      });

      child.stderr.setEncoding('utf8');
      child.stderr.on('data', function(data) {
        process.stderr.write(data);
      });
    });

    gulp.task('client',function() {
      gulp.watch([
        'app/index.html',
        'app/src/*.html',
        'app/test/*.html',
        'aoo/mocks/*.html',
        'gulpfile.js',
        'tasks/*.js'
      ],['test:client']);
    });

  };
})();

此文件是任务目录中的一个文件（如您所见，我正在观看）

我的 gulpfile 加载了这个，以及其他类似的任务（我从 angular.js 团队复制了这个，他们用它来加载一些支持 angular 的任务）

(function() {
  'use strict';

  require('dotenv').config(); //load our environment

  var gulp = require('gulp');

  var includeAll = require('include-all');

  /**
   * Loads task modules from a relative path.
   */
  function loadTasks(relPath) {
    return includeAll({
      dirname: require('path').resolve(__dirname, relPath),
      filter: /(.+)\.js$/
    }) || {};
  }
  // *
  //  * Invokes the function from a Gulp configuration module with
  //  * a single argument - the `gulp` object.

  function addTasks(tasks) {
    for (var taskName in tasks) {
      if (tasks.hasOwnProperty(taskName)) {
        tasks[taskName](gulp);
      }
    }
  }
  /**
   * Add all Gulp tasks to the gulpfile.
   * Tasks are in `tasks/`
   */
  addTasks(loadTasks('tasks/'));

  // require('gulp-load-tasks')(__dirname + '/tasks');
  gulp.task('default', ['lint:gulp','client','server']);

})();