How do I set up a Grunt task that watches files and continually runs the tests every time a file changes

Question

My starting point is the Yeoman Backbone Generator. I have it set up and running correctly.

Instead of having to manually run grunt test every time I want to test, I'd rather have it running the tests automatically every time a file changes.

I want to be still be able to run grunt server for all the awesomeness it currently give me. Is there a way to add Continuous Integration (is that the right word? I'm kind of new to that) to that grunt task?

Or would it be better to not touch grunt server and essentially eliminate grunt test and replace it with something that runs in a separate terminal like Testem or Karma.

Or could something like Testem or Karma be used through a grunt task without losing useful functionality.

Answer 1

When you use the generator, it should have created a Gruntfile with a watch task.

With a newly generated project, the server task has runs the watch task:

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    } else if (target === 'test') {
        return grunt.task.run([
            'clean:server',
            'coffee',
            'createDefaultTemplate',
            'jst',
            'compass:server',
            'connect:test:keepalive'
        ]);
    }

    grunt.task.run([
        'clean:server',
        'coffee:dist',
        'createDefaultTemplate',
        'jst',
        'compass:server',
        'connect:livereload',
        'open',
        'watch'    // <==== Here
    ]);
});

Watch has the ability to run tasks when files are updated. Add your test task there.

Sample watch config generated by yo backbone:

watch: {
    options: {
        nospawn: true
    },
    coffee: {
        files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
        tasks: ['coffee:dist']
    },
    coffeeTest: {
        files: ['test/spec/{,*/}*.coffee'],
        tasks: ['coffee:test']
    },
    compass: {
        files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        tasks: ['compass']
    },
    livereload: {
        options: {
            livereload: LIVERELOAD_PORT
        },
        files: [
            '<%= yeoman.app %>/*.html',
            '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'
        ]
    },
    jst: {
        files: [
            '<%= yeoman.app %>/scripts/templates/*.ejs'
        ],
        tasks: ['jst']
    }
}

Say you ran the backbone generator to use Mocha as the test framework.

You would have these sections in your Gruntfile.js:

Under connect configure a port that is different from the app port of 9000:

connect: {
    …
    test: {
        options: {
            port: 9090,  // <== Add this here
            middleware: function (connect) {
                return [
                    mountFolder(connect, '.tmp'),
                    mountFolder(connect, 'test'),
                    mountFolder(connect, yeomanConfig.app)
                ];
            }
        }
    },
    …
},

Under the Mocha configuration change the port that it uses to reference connect.test.options.port:

    mocha: {
        all: {
            options: {
                run: true,
/* change ==>*/ urls: ['http://localhost:<%= connect.test.options.port %>/index.html']
            }
        }
    },

As registered Tasks:

grunt.registerTask('test', [
    'clean:server',
    'coffee',
    'createDefaultTemplate',
    'jst',
    'compass',
    'connect:test',
    'mocha'
]);

Under watch add a test target - something like this:

    test: {
        files: [
            '<%= yeoman.app %>/*.html',
            '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'
        ],
        tasks: ['test']
    }

With those changes, anytime a file changes that matches the test.files glob, the test task will be run.

The exact steps to get this working for your code will depend on the test framework and grunt plugins you've chosen. In addition to the Getting Started - installing plugins and Configuring Tasks guides, look through your test plugin documentation to ensure you have a good understanding of how its specific configuration works.

You did mention two test frameworks in your answer. I haven't used either of these but both have grunt plugins available.

• Karma plugins
• Testem plugin

If these general steps still don't help, it would be helpful if you could provide more specifics about your project including your Gruntfile.js, test framework of choice, what you have tried and errors/failures you are seeing.