Wallaby.js Blog
Integrated Continuous Testing Tool for JavaScript

Wallaby.js - Sublime Text integration release, Electron and AVA, Angular 2

Almost 12 months ago we have started to sell first commercial licenses for wallaby.js, so on the 7th of May 2016 we are turning one year as a product. Like every business, we have had some ups and downs, but overall it’s been a great a year for us. We keep growing steadily, adding new features and improving the tool’s quality.

Some exciting and ambitious plans are prepared for the next year, some of them are very close for their first preview. But enough about the future plans, let’s see what we have already implemented in the last couple of months, and that you can use today.

One thing I’d like to mention before jumping to the new features, is our new License Upgrade and Renewal Calculator. Using the form you may quickly upgrade your existing license to ‘Freedom’ or renew your existing license. All you need to do is just to paste your existing license key(s) or an email with the keys, and the form will display pricing options tailored for your case.

Sublime Text integration

Many of you have been eagerly waiting so long for the integration. We have been brushing up the first preview version released earlier this year and finally Sublime Text integration beta program has ended earlier this month, so licenses are available for purchasing.

If you haven’t done it already, check out our tutorial and also make sure to upgrade to the latest version of the package in Sublime Text.

Electron runner support

Being able to run your tests in a headless browser, such as PhantomJs, is awesome for many reasons. Still, sometimes you may want to run your unit tests in a real browser, and not to just occasionally verify that your test suite passes in that browser, but in a continuous testing tool like wallaby.js as well.

For example, you may want to use the latest Chrome/V8 features, possibly without Babel, or use some features that Babel doesn’t support. Or you may want to TDD your way through some of your app features that are using Web Audio API (that PhantomJs doesn’t support). Or you just got tired of using various polyfills in your test environment.

Even though wallaby.js supports the latest PhantomJs builds, up until recently PhantomJs was the only option to run your unit tests in browser environment with wallaby. Now we also have added Electron test runner support.

It’s very simple to use: you just install the electron-prebuilt NPM package, specify kind: 'electron' in your env setting in wallaby config. That’s it, now you are ready to run your tests in the latest Chromium/V8 environment without any opened browsers windows and other related distractions.

AVA support

If you are doing node.js testing, then you have probably heard of, and maybe even are using, AVA testing framework and test runner. As a testing framework, AVA is minimal, has a simple test syntax and supports a few nice ways to write async tests (such as returning a promise or an observable, generator or async functions). As a test runner, AVA does a few cool things that wallaby.js brings to other testing frameworks, such as running tests files in separate processes.

We have started prototyping AVA support in wallaby.js a while ago and a few things changed in AVA since then. Now when the runner looks pretty stable, we are happy to announce that we have added its experimental support in wallaby.js.

Wallaby.js provides AVA tests many super-powers of a continuous test runner, including (but not limited to) reporting realtime code coverage and execution results right into your editor, like JetBrains IDEs (such as WebStorm), Visual Studio, Atom, VS Code and Sublime Text.

AVA itself is pretty fast, but wallaby is making AVA even faster by not only executing affected test files, but individual affected tests. So if you are changing an AVA test or some code covered just by that test, wallaby will only execute that test, not all tests in the test file.

Configuring AVA in wallaby.js is literally one line in addition to the rest of your wallaby.js configuration file:

module.exports = wallaby => ({
    files: [...],
    tests: [...],
    ...
    testFramework: 'ava'
});

If you are using Babel and would like to enable power-assert for AVA, you may configure it as follows:

module.exports = wallaby => ({
  files: [...],
  tests: [...],
  ...
  testFramework: 'ava',

  compilers: {
    '**/*.js': wallaby.compilers.babel({
      presets: ['es2015'],
      plugins: [
        require('babel-plugin-espower/create')(
         require('babel-core'), {
          embedAst: true,
          patterns:require('ava/lib/enhance-assert').PATTERNS
         })
      ]
    })
  }
});

Actually, you may use power-assert with any testing framework that wallaby.js supports. Just need to add babel-plugin-espower to your babel plugins list.

One more thing that is worth noting, is that unlike AVA, that forks a separate process per a test file, wallaby.js uses a pool of processes with a configurable capacity and optional process recycling to execute tests. We believe that wallaby.js approach is generally faster, and using a process per file may negatively affect the performance, especially if you have more than just few test files. Anyway, if you like, you may make wallaby.js to run tests as AVA does by just configuring wallaby to use a large number of processes and to recycle worker processes.

Angular 2 support

Angular 2 release date is approaching, and the framework can be used in many different ways: with TypeScript or ES6, System.js or Webpack/Browserify, JSPM or not. No matter what’s your preferred stack, we’d like to make it as easy as possible for you to test your ng2 apps with wallaby.js.

To help you configuring wallaby.js, we have prepared (and are keeping updated) a few sample projects using Angular 2 with wallaby.js and various combinations of technologies that you may use with it.

Miscellaneous

Don’t get upset if you haven’t found anything interesting for you in the announced features. We are doing a few releases every week, so you are still regularly getting improvements that affect your work with the tool. You may also check out the more detailed list of changes, below are some notable changes and fixes.

  • Function.prototype.bind polyfill for PhantomJs is now shipped with wallaby.js core, so if you are using some packages as polyfills, you may get rid of them. Note that those polyfills may still be required in you are running PhantomJs tests in Karma.
  • TypeScript 1.8 (and 1.9 dev) support.
  • Ongoing support for Webpack 2 beta changes. Also some significant performance improvements for larger Webpack projects (make sure to update wallaby-webpack package to latest).
  • Wallaby.js tests indicator for the Distraction Free mode (and Presentation mode) in JetBrains IDEs.
  • Support for the latest versions of Jest and Jasmine.

That’s it for the post, thanks for reading!