First you need to install wallaby.js package for Sublime Text, if you haven’t done it yet. Note that when you start wallaby.js package for the very first time, it will take a minute to install required dependencies.

For this tutorial I will use this sample calculator repository. You can clone it to try locally:

git clone https://github.com/wallabyjs/calculator-sample.git

Once you have the source code locally, open the project folder in Sublime Text.

There you will find a simple calculator project there with wallaby.js configuration file. Wallaby configuration file is a simple JavaScript file in your project root folder with just a couple of mandatory settings. The configuration file includes a list of files and tests of your application as well as some settings for various technologies that you may be using to build your project, such as Webpack or Browserify configuration Babel/CoffeeScript/TypeScript compiler options, etc.

Wallaby supports lots of technologies and scenarios, we have a collection of sample projects with configuration files for different tools, frameworks and languages, such as Webpack, Browserify, ES6 and ES7 via Babel, TypeScript and CoffeeScript, React and Angular, node.js and io.js, etc.

Note that the tutorial config is using PhantomJs 2 to run tests. You may also use Chrome, Electron, or node.js as an environment to run your tests.

First steps

Selecting wallaby.js config file

Wallaby.js for Sublime Text needs to know what configuration file to use to run your tests. If you only have one file named wallaby.js/wallaby.conf.js in your project root, wallaby will automatically select it.

However, if you have multiple configuration files, use different naming convention or have the config file not in the root folder, you may select the config file using Select as Wallaby.js Config context menu item in your editor Side Bar.

Wallaby.js Command Palette

As you surely know, you may press Ctrl/Cmd + Shift + P in Sublime Text to get the editor Command Palette in case if you’ve forgotten some shortcuts or just like invoking commands this way. There you may search for wallaby and use the found commands.

Also, for your convenience wallaby.js adds the way to display on wallaby.js commands in the Command Palette. You may display just wallaby.js commands by pressing Ctrl/Cmd + Shift + .. It’s a fast and easy way to explore and quickly use various wallaby features.

Now let’s have some fun.

Let’s try starting wallaby.js: to do that you need to invoke wallaby Start command. You may do it by using the Ctrl/Cmd + ., Ctrl/Cmd + R shortcut, or using wallaby part of the Command Palette.

To stop wallaby.js, you may use the Stop command.

Wallaby.js in action

Once you have started wallaby.js, at the bottom left corner of the editor you’ll see wallaby status indicator. It’s job is pretty simple: when it displays a spinner - your tests are running, when it shows a cross - you have some failing tests, when it shows a tick - some of your tests are passing. It also shows the number of failing and passing tests.

Now, let’s open the sample calculator project spec (test/calculatorSpec.js).

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

Try jumping 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, or try breaking the code covered by the test. Right after the change wallaby.js automatically runs your tests and displays the result inline and in the status bar.

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

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

This is a great way to quickly inspect any objects without having to leave your editor, without switching to any other console. Think how cool it is - your code editor is your console with all the required context.

We also recommend reading about some more powerful ways to log things and measure code performance with wallaby.js.

Watch expressions in action

Watch performance in action

Coverage indicators

Let’s have a look at the editor gutter where you may see some indicators. Here is what these coverage indicators mean:

Failing tests

Wallaby.js Tests View 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 so you can navigate (with Enter or Cmd/Ctrl + Shift + double click) to different places, for example to the exact error line, or a line where something is logged to console. To quickly show and focus the panel you may use the Focus Tests View wallaby command (Ctrl/Cmd + 0), or, if you’d like just to show it without focusing, press Ctrl/Cmd + . two times.

Commands

To help you writing/navigating your code and tests more efficiently, wallaby.js provides a few commands. You may see the full list in the wallaby.js Command Palette (Ctrl/Cmd + Shift + .).

These commands include:

Inline messages

You may turn off inline error and console messages by using the inlineMessages setting in your User/Wallaby.sublime-settings file

{
	"inlineMessages": false
}

Troubleshooting

If you encounter any issues with configuring or using wallaby.js and not sure why it happens, check out our troubleshooting docs section or search our public repository issues to see if someone else have been experiencing something similar.

Another very useful technique is to run wallaby.js with the debug flag set to true. In this case wallaby outputs a lot of additional information about the test execution progress which may help you to understand what’s going on if something goes wrong. The output can be viewed in the Wallaby.js Console (Wallaby.js: Show Console command or Ctrl/Cmd + ., Ctrl/Cmd + , shortcut).

Trial version

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