Category Archives: Web

ES6+ code coverage with Babel plugin

babel-logo

Running unit tests against an ES6+ source code base has now become an almost trivial task, thanks to Babel and all the ecosystem around it. There are a lot of good resources explaining how to do that, with different tools and frameworks.

On the other hand, code coverage on this kind of tests is a rather less covered subject …

If you apply regular code coverage solutions to that case, you end up with reports based on the transpiled code, not your original source code in ES6+, which isn’t really relevant …

Here comes isparta

This problem was solved by isparta, a code coverage tool for ES6+, using Babel, which provides code coverage reports using istanbul (which is also a code coverage tool … 😉 more infos here).

Using isparta, you can generate code coverage from unit tests on ES6+ source code base, directly against your original source code (not the transpiled one). This works great, combined with tools like karma-coverage, you can output coverage reports under any format (html, lcov … that can be processed by various tools/services like Jenkins or coveralls.io …).

isparta not maintained anymore

No Maintenance Intended

About two weeks ago, @duglasduteil added the “No Maintenance Intended” badge to his module. This should remind us that behind every open source project there are developers maintaining them (most of the time on there free time).

So, now may be the time to find a replacement for isparta … I was looking for an alternative for a few days when I eventually ended up on twitter with @kentcdodds who mentionned dtinth/babel-plugin-__coverage__.

ES6+ code coverage using a Babel plugin

Since Babel v6, you can make your very own plugins that can do much more than simply transpile ES6+ to ES5.

Babel is a generic multi-purpose compiler for JavaScript. More than that it is a collection of modules that can be used for many different forms of static analysis.

Babel Plugin Handbook

That’s what @dtinth has done with babel-plugin-__coverage__. He made a babel plugin that instrument your code, injecting metadata that will be processed by istambul (which is used under the hood by karma-coverage and other coverage report tools).

The great thing is that, since you go through Babel anyway to transpile your source code, the only thing you have to do to get those infos to feed tools like karma-coverage (or any istambul-based coverage reporter) is to activate this plugin in your .babelrc file …

Using a babel plugin for coverage is a no-brainer.

@kentcdodds

You won’t have to add complex configuration or tools anymore. @dtinth‘s plugin is 300 LOC, it’s his first babel plugin that he made over two nights. As far as I have tested it, it works very well.

This is clear that using a babel plugin for that kind of purpose is the right way to proceed. Since it’s becoming easier to setup, we might see more projects using ES6+ including code coverage reports in a near futur.

You can see an example of setup on my project topheman/react-es6-redux.

Checkout it out

How I became a JavaScript developer …

javascript-logo

I’ve been doing JavaScript for some time now, and like a lot of us, until a few years ago, it was mostly limited to jQuery … Till I watched this podcast of Paul Irish where he takes the source code of jQuery (1.4.2 :D) and breaks it down explaining things like closures, IIFEs, module pattern …

That’s when I realised I wasn’t writing JavaScript at all but jQuery and I chose to really learn the language. At that time, I was mainly developing in php (Zend framework) / MySQL & jQuery.

I really enjoyed discovering this whole new part of JavaScript. I remember giving a talk to the developers in my company about JavaScript (I did some livecoding of a plugin in jQuery, explaining every bits of the code). My co-workers were always teasing me about how JavaScript was not even a real language, that it had no concepts of inheritence or object oriented programming and that I was insane to waste my own time learning it …

But then, NodeJS came along … and some other cool stuffs …

I eventually quit this company (I learned a lot on web development there and met great people, but it was time to change) to work on a full-js job.

Since then, I never stopped learning, experiencing new stuff on personal projects … At some point I started publishing some code on github, posting articles on my blog, answering questions on stackoverflow (giving back to the community) …

For the last three years, I’ve seen a lot of changes within the JavaScript ecosystem. With the new ECMAScript standards and everything, it’s not going to stop. I’ll do my best to keep up to date, not only because I have to but because I enjoy it !

And you, how did you become a JavaScript developer ?…

Tophe

Related:

First post

Welcome to my new blog. On my previous one, I was mostly talking about roller skating (I made a bunch of cartoons about that), unicycling, juggling … but it didn’t feel right to post about development (that would have been boring for my friends and readers 😉 ), so I decided to make a whole new blog, only focused on web development.

I will share with you my projects as well as the latest tips & tricks I found while coding or reading around the web.

See you soon !

Tophe