Gulp and Karma: simple example

Summary: The “editor” (VSC) runs Gulp as a task manager. On a watched file change, Gulp calls Karma (the test runner). Karma calls Jasmine (the test framework).

My first steps getting to grips with Gulp. Gulp is a task runner, and as I edit code in Visual Studio Code (VSC), I want Gulp to watch for file changes, and to get Karma (which is a test runner) to re-execute the test (in Jasmine), if there is any change to the Code Under Test. This is an abuse of VSC, as it is intended to be a lightweight editor, with Visual Studio Full Fat being more appropriate to this kind of heavy lifting. Whatever.

There are useful examples on GitHub of a GulpFile.js, and some Motivation here.

For getting started, I’m just testing for equality 2 literals, “Black” and “White”… because failure you can control is more instructive than success first time.

VSC has a folder-based project. In that project are js files. For this POC, those js files are a single spec.js file with a simple “black equals white” test, and no dependency on other code, that is, this is a self-contained test in a single spec.js file.

From within VSC, you configure the task runner by pressing F1, looking e.g. for the string ‘Task’ and then selecting ‘Configure Task Runner.’ This creates (or loads an existing) tasks.json file. My current one looks like this (based on the GitHub example above):

My karma.conf.js (I have set the logLevel to the more verbose LOG_DEBUG from the default LOG_INFO; the xSpec.js is just to ensure that I only get a single file):


My gulp.js:


and my single file under test, which this for a success:


and this for a failure (yes, I know I’m not doing what is in the It clause):


As I change the toEqual value, then Gulp is watching, and kicks off the test again, giving respectively ref the above tests (see the Watcher kick in):