Web Component Tester - gulp task to run test with each build

Question

I want to put inside gulpfile something like:

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

The purpose is to watch test folders or elements folders (with Polymer components). If some of them will change, run test with each build.

my wct.conf.js:

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

I found the code above on some page but after I add some tests and then type gulp in my terminal I found error, because .tmp folder is not updated and strange errors like Polymer is not definedor ajax.generateRequest is not a function. I got also right errors when I intentionally made a mistake in a test to fail it, so it looks like something is ok, but not at all.

I add the tests to the existing project with lots of files. When I tried to do the same thing on empty project I also got the same error until I type bower install.

Is there any chance that this is the problem with bower dependencies? Or have you any idea what is wrong? Is this part of code in gulpfile right to perform the desired effect?

Thanks a lot.

score 0 · Answer 1 · answered Oct 06 '16 at 17:37

I am not answering your question directly, because its been a while since I've done it that way. But the following defines a sub task from among others to define a task called 'client' which then runs the tests in a frame buffer (so I don't have disturbing windows popping up all over the place when the tests run - they just run and output in a console window. Its effectively spawning a command line version of wct and I don't have a wct.conf file at all.

(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']);
    });

  };
})();

This file is one file within the tasks directory (which as you can see I am watching)

My gulpfile loads this, and other tasks like so (I copied this from the angular.js team who used it to load some of there tasks supporting 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']);

})();

Web Component Tester - gulp task to run test with each build

1 Answers1