Optimize your Ionic Testing with Wallaby.js, Bard.js, and WebStorm

Coming from a .NET background one tool I sorely missed when switching primarily to JavaScript was NCrunch, the continuous testing extension for Visual Studio. While Webstorm’s support for Karma is top notch, nothing beats being able to witness instantly, parallel to your code, when a test passes or fails. This increased visibility not only makes development and refactoring a breeze, it also offers the side benefit of not so subtly encouraging you when your test coverage is lacking.

With this in mind, I was extremely excited to hear about Wallaby.js, a continuous test runner plugin for Webstorm and the JetBrains line of code editors (more to come!). Similar to NCrunch, Wallaby gives you instantaneous test feedback within your development environment. For TDD, BDD, or anyone who tests their code in any capacity, this article will show you how to get up and running with Wallaby.js and Webstorm, using an Ionic framework application as an example. We will also discuss using Bard.js, an Angular testing helper library written by Ward Bell, to make your Angular tests much easier to write and maintain.

Install the WallabyJS Plugin
1.) Visit the Wallaby website and sign up for the (currently) free download.

Wallaby Signup

Wallaby Signup

2.) Navigate to the ‘Preferences’ tab under WebStorm’s main menu.

WebStorm > Preferences

WebStorm > Preferences

3.) In the left menu, select ‘Plugins’ then select ‘Install plugin from disk’.

Install Plugin

Install Plugin

4.) Select the ‘wallaby-intellij’ zip file that you downloaded via the email link.

Wallaby Plugin Zip

Wallaby Plugin Zip

Setup your Ionic Project
Before we can continue we need to first set up the Ionic project we are going to use for this article. Let’s utilize the Ionic CLI and a few common commands to make this quick and easy. In addition to the core Ionic dependencies, we are also going to bring in angular-mocks for our Angular testing base, Bard.js for more concise, easier to read test setup, and Sinon.js as Bard uses Sinon spies under the covers for it’s mock service functionality.
*Please note the base Sinon package from Bower will not work correctly. For more information, please visit this article on the subject.

We now have our base Ionic starter project and file structure ready to go, let’s proceed to our WallabyJS project configuration!

WallabyJS Project Configuration

Now that we have created our Ionic shell, let’s configure the project to utilize Wallaby for continuous testing.

1.) Create a file named wallaby.js at the root of your Ionic project. Please note that in the majority of cases this will be a wallaby.json file. In this particular instance, Bard.js use of Function.prototype.bind has to be polyfilled due to a lack of support from PhantomJS (which Wallaby uses under the covers as a headless browser).

2.) In the top right corner of your WebStorm window, select ‘Edit Configurations’.

Edit Configurations

Edit Configurations

3.) Next, select Wallaby.js and click ‘Add New Configuration’.

Add New Configuration

Add New Configuration

4.) Specify the path of your wallaby.js file and click ‘Apply’.

Apply Config

Apply Config

5.) Last, click on the run button in the top right corner of WebStorm.

Run Wallaby

Run Wallaby

If all went correctly you will notice a short download as Wallaby completes a one-time install of it’s dependencies. The console will then open at the bottom of your IDE and Wallaby is now watching our project and spec files!

Wallaby up and running!

Wallaby up and running!

Putting Wallaby to Work!
The application we are building to demonstrate Wallaby is a small, one screen Ionic application to quickly look up the details of your friend’s GitHub repositories. This will consist of one controller for our only view and a service to talk to the GitHub public API. Let’s begin by writing an initial spec for both our service and controller and see what Wallaby gives us!

As you write these tests you will notice two code-level additions to your normal WebStorm experience. First, any code evaluation that causes a test failure will be annotated next to the test line in red. This gives quick visibility into why a particular test is failing. Next, to the left of each line of code you will find a red or green box indicating whether the line was executed successfully. Clicking on these boxes gives additional details as to why a test failed, even linking to the particular line of code where the exception occurred. Using this, you can quickly diagnose bugs, correct issues, and immediately be informed when your tests begin to pass or fail. As you can imagine, this tight feedback loop proves invaluable when debugging and refactoring your code base.

WebStorm Integration

WebStorm Integration

Additional Test Details

Additional Test Details

Test Coverage
Now that we have written some failing tests, let’s implement our controller and service and see what sort of information Wallaby provides inside our code. For the sake of brevity I am going to show the controller and service in their completed form. Optimally, with the sort of feedback Wallaby offers, a test-first approach would be extremely beneficial.

First, let’s write our service to communicate with the GitHub API. Our service will have one public member, allowing the user to enter a search term and receive details regarding that users contributions. If the user entered does not exist we will return an error message.

Before we update our tests, you can see Wallaby informing us that we have no coverage of this service.

GitHub Service No Coverage

GitHub Service No Coverage

As you can see, Wallaby lets us know next to each service method that we do not have tests covering these lines. Let’s update our specs and watch these indicators turn green.

GitHubService Passing

GitHubService Passing

Let’s now add our GitHubController and specs to complete the core functionality of our Ionic application.

Notice how Bard.js makes the test setup process near trivial. Without Bard, Angular test setup has a tendency to become complicated to understand and overly verbose. Bard eliminates this pain and makes mocking services as easy as a few lines of code.

Create our View
Now that our controller and service is complete and our tests are passing, all that’s left is to add a view to display our GitHub data.

Let’s see our final product!

Final App

Final App

Conclusion
In conclusion, introducing Wallaby and continuous testing to your development process can greatly increase test visibility, feedback, and your overall coding experience. I highly suggest giving it a try on a current or new project! Please drop me a message on Twitter or in the comments and let me know what you think. The entire codebase for this article can be found on GitHub. Until next time, happy coding!

Next ArticleRedux Middleware: Behind the Scenes