Wallabyjs

Disclaimer: I have not been paid or asked to write this. I just love the product.

Test Automation is an essential tool in software development these days. There are very few situations where you are building a piece of software where you will not need to write some tests to go along side it. There are even hugely popular methodologies, such as TDD where the idea is to write your tests before implementing your functionality.

With automation being so pervasive, it is important to have great tools to keep things rapid as writing good tests is not a quick thing.

A few key things that I want out of my testing tools:

1. They need to be super fast
2. They must be easy to integrate with existing tools
3. They must make my work life easier

My number 1 tool for this is Wallaby.

What is it?

Wallaby is a productivity tool for test developers in Javascript and Typescript. It is a test runner, debugger, logger, profiler, and coverage tool all in one. It is especially good at Test Driven Development.

It works with all major testing frameworks for both frontend and backend code with little to no setup required.

Features

I think the main feature that makes the product worthwhile is its inline reporting. Once Wallaby has started it will show 3 important things for each line in the code:

• Errors and Failing Test lines
• Code coverage
• Runtime Values

Here is an example of the realtime line coverage.

I have created a function sayHi and a test for it which expects the output Hi Ben. On the left of the screen next to the line numbers you have the line and error coverage. When the test is failing it shows as a pale red for passing lines in a failed test, and a deeper red for lines that actually have errors.

As I type you can see the expected value change right up until the test passes. Then the coverage turns green and the output it removed.

The best part was that it was happening in real time as I wrote my implementation!

Runtime Values

When your tests are running your code is run on any updates you write. This allows wallaby to know the state of you code as soon as you change it.

Using this it gives you a way to log the state of data at any location that has run. The most powerful way to log this information is Live Comments.

Using the syntax //? or /*?*/ will display the value of the expression defined just before the comment. Lets check that out with the sayHi function from before. I have added a second test in which passes Simon as the name.

Now without even going to our test we can see that the function is called twice, once with Ben and once with Simon.

You can also explore the properties of the object you are inspecting. Lets check the length of our strings.

Performance

You can also performance test your functions with another live comment - //?. or /*?.*/. This will give you the run time of your code, and will give more detailed metrics if it is run multiple times.

Putting that syntax into out sayHi function shows 4 bits of information.

• Σ - Total execution time
• µ - Average execution time
• - Minimum execution time
• - Maximum execution time

Debugger

Wallabyjs comes with its own debugger named the Time Travel Debugger. You can use it while coding to see values without having to stop and start your program after making changes. You can step forwards and backwards through your program, make changes wherever you want, and see the changes that occur live.

You can see the time travel debugger in effect below with code clip. Try use the different debugger options to see how it works for yourself. Note Wallabyjs has the same debugger, but you can also edit the values in real time.

Web App

Another great feature of Wallaby is the web app that gives an easy to read summary of what the state of your tests are. This includes details on:

• Coverage
• Performance
• Failures

It also gives you a quick way to filter tests to view or edit the ones you are interested in. I do use this less than the other features but it is a really nice view of coverage reports that is a lot more usable than CLI coverage reporting.

Conclusion

WallabyJS is is huge time save for automated testing in javascript for both backend and frontend development. It may be a bit costly but the time saving will quickly make up for that initial cost.

Check it out here: https://wallabyjs.com/

What to read more? Check out more posts below!