Wallaby is an Integrated Continuous Testing Tool for JavaScript that continuously runs your tests. It reports code coverage and other results directly to your code editor, immediately as you change your code.

Wallaby is really fast, because it only executes tests affected by your code changes and runs your tests in parallel. The tool is great if you are doing TDD/BDD. It is not free, but you can use it in the trial mode to try it out.

Visual Studio Code plugin

To use Wallaby, you can add it to your IDE as a plugin. We will install it in Visual Studio Code, so let’s go under the Extensions tab and search for: wallabyjs. Install it and reload the window.

Once installed, Wallaby will install the core and you can use number of command using the Ctrl+Shift+= command. Let’s start it by calling the Start command. Select to try out with trial or enter your licence key.

Angular CLI project with Wallaby

We will use Wallaby in our Angular CLI generated project, so open command line and create new project.

ng new ng2wallaby

cd ng2wallaby

If you don’t have @angular/cli installed, please watch first video of Tour of heroes series on my Youtube channel, where I show you how to get started. Once our project is scaffolded, cd to the folder.

Since @angular/cli uses webpack, let’s install wallaby-webpack via npm.

npm install wallaby-webpack --save-dev

Also install angular2-template-loader, which WallabyJS uses to inline all html and style’s in Angular2 components.

npm install angular2-template-loader --save-dev

To use Wallaby with @angular/cli project, just add the wallaby.js config file (wallaby.js) to the root of generated project. You can find the file here in the ngCliWebpackSample repo on Github. Second, add wallaby.js test bootstrap file (wallabyTest.ts) to the src/ folder of the project.

Starting Wallaby and modifying tests

Let’s start our Wallaby plugin again by Ctrl+Shift+P and clicking on the Wallaby-Start. It can take a minute, once it is done, you should see a passing and failing test icons in the bottom right toolbar.

Navigate to src/app/app.component.spec.ts and you can see our 3 precreated tests all passing. The second test expects the title to equal app works. Let’s open app.component.ts on the side and change this title variable.

Now the Wallaby immediately tells us that our test is failing, let’s change it back to correct value again and our test is passing.

Great. Now go and write your tests!