‘Seamless JavaScript Testing with Wallaby.js’ course

Before (or after) you finish the tutorial, it’s highly recommended to check out the ‘Seamless JavaScript Testing with Wallaby.js’ Pluralsight course by Wes Higbee. It’s a great and easy way to quickly learn how wallaby.js and how it can make you more productive.

First steps

First you need to install wallaby.js extension for Visual Studio, if you haven’t done it yet.

For this tutorial I will use this sample from our public GitHub repository. You can clone it to try locally:

git clone https://github.com/wallabyjs/public

or just download the zip file with the source code.

Once you have the source code locally, open the sample/visualstudio/Wallaby-Sample.sln solution.

You will find a simple calculator project there and a few wallaby configuration files for different testing frameworks. Wallaby configuration file is a simple JSON or JavaScript file in your project root folder with just a couple of mandatory settings.

If you have your tests and source code in different projects, then the recommended approach is to make your wallaby.js configuration file one of your Solution Items.

In this sample we will be using plain vanilla JavaScript. Let’s try starting wallaby.js: right click the wallaby-jasmine-2.1.json configuration file in the Solution Explorer and select Start Wallaby.js from the context menu. Wallaby will start with selected configuration file.

start

To stop wallaby.js, you may use the Stop Wallaby.js context menu item.

The very first time you run it, wallaby.js may take a minute or two to install all the dependencies it needs, such as node.js and PhantomJs. It only does this once and then uses the saved dependencies. The dependencies are updated automatically when required.

Now let’s have some fun.

Code coverage

Once you have started wallaby.js, in the bottom right-hand corner of the screen you’ll see the wallaby status indicator. Its job is pretty simple: when it displays a spinner, your tests are running; when red, you have some failing tests; when green, all of your tests are passing.

Let’s open the sample calculator Jasmine spec.

main

When wallaby.js is running, you can see the code coverage in the source files that it tracks (specified in the configuration file). As you can see, there are various colored squares displayed for each line of your source code.

Jump to any of the passing tests and break it, for example try changing the 2 plus 2 expectation result to 5 in the should add numbers test. Right after the change wallaby.js automatically runs your tests and displays the result in Visual Studio, right where you need to see it.

Also, try editing some console.log arguments or just console.log any object you like.

The code coverage and inline messages are automatically updated, right as you type.

Here is what coverage indicators mean:

You may also inspect wallaby.js output in the Output tool window. In the tool window you may view output from the Failing Tests tab and Console.

console

The Failing Tests output source displays all tests that are currently failing along with the error stacks and registered console.log calls. Some bits of the displayed information are hyperlinks that you can use with your mouse (Ctrl + mouse click) or keyboard (F12) to navigate to different places, for example to the exact error line, or a failing test, or a place where something is logged to console.

The Console output source displays some additional information about test execution progress. The tab can also be useful for troubleshooting wallaby.js issues.

Smart actions

To help you write your code and tests more efficiently, wallaby.js provides a few smart actions available by clicking wallaby smart actions icon or pressing Alt + Shift + F10 on any line.

actions

The actions include:

All of the described actions can also be mapped to any keyboard shortcuts you prefer for extra productivity. You can do so in Tools - Options - Environment - Keyboard (search for wallaby in the keymap settings).

Fonts and colors

If some wallaby.js default colors don’t fit your theme, they are very easy to adjust.

fonts

Trial version

Note that trial version of wallaby.js (the one without a valid license) will be displaying prompts and stopping after some time, so you will need to restart the tool or your editor. Please contact us if you would like to arrange a trial period for yourself or your team without activation prompts and restarts.