-
Notifications
You must be signed in to change notification settings - Fork 1
Home
During our Hack Jam in Brussels and Amsterdam we often use TDD as a leaning tool. I won’t explain here the benefits of using TDD in this post but I’ll highlight the fact that TESTING is more fun with WallabyJS.
WallabyJS is a test runner for JavaScript! That said, most of people would ask why do we need another test runner? WallabyJS is not your average test runner, It’s an intelligent test runner that does** code coverage**, **runs your tests ** **continuously as you change your code. It does that right inside your editor. **No need to switch between your IDE and your console.
_WallabyJS isn’t support by all code editors yet. You can check the list of IDEs _ supported here or vote here if you want them to support yours.
In this short tutorial, we will focus on atom. We will add the atom-wallaby plugin and I’ll show you how to use it to be
more productive today.
You can find an install of atom here
Once you have the latest version of atom installed, open the settings panel: [Image: file:///-/blob/WcSAAAMNzU0/KC-YefUTHzJbHP_P60KWJg]Inside the settings panel, select the install tab and type ‘atom-wallaby’. Just install that package and you’re good to go. :)
[Image: file:///-/blob/WcSAAAMNzU0/JjYWr5eTWkac1m1E-j1_3g] Now let’s open the ES6-Koans project and see how powerful is WallabyJS as a test runner. [Image: file:///-/blob/WcSAAAMNzU0/TdS3Yx1WDpo4jFBca5YzdA]To configure Wallaby inside your project, you need to add a configuration file (wallaby.js or wallaby.config). Inside this file you need to specify few sections:
- files: where are located your source files
- tests: where are located your tests
That’s all you need for a basic usage. For the Hack Jam we use ES6 so I added an extra section for Babel as you can see in the example above.
Now let’s run Babel and see how useful is this tool. Click on the start button at the bottom right corner of your IDE [Image: file:///-/blob/WcSAAAMNzU0/OHXOTEmaR4v7ZNQ7LBQ2kg] Wallaby is now running as you could see below: It gives you inline the results of your assertions. This is fantastic!! [Image: file:///-/blob/WcSAAAMNzU0/Bd607Mz30yvZ-vru69VAQg]Let’s implement our add function right inside this file and see how wallaby gives us some immediate feedback. [Image: file:///-/blob/WcSAAAMNzU0/-Ovc8x_lj8R6l_ll-kf0jw]Few things to notice here:
- The error message is not the same anymore. Wallaby is running our tests as we’re typing
-
console.log(x,y)gives you a feedback inline, so no need to open your console or your browser… That’s neat!!
I let you take from here and finish the implementation of this simple function using ES6 and only ES6… Everything should be green!! :)
Warning: atom-wallaby is still in beta but it works great! If you run into an issue, check the wallaby console or restart it.
WallabyJS is productivity tool you should be have in your tool belt. It’s not free but the value you get from it is way above its price.
Now time to hack a bit and feel free to share with us your experience using this tool.
Happy Hacking!!