Open Source Tools from Let’s Code JavaScript

Let’s Code JavaScript is coming up on its third anniversary, and in that time, we’ve released some useful open source tools. In general, these are modest tools that I’ve used to solve genuine problems. I hope you find them useful as well.

In order of popularity:

karma-commonjs

Test your CommonJS code in Karma without running Browserify, Webpack, or a similar tool. This results in faster test runs and better stack traces.

Our JavaScript Workflow 2015 video demonstrates how to use karma-commonjs, and the Front-End Modules Lessons Learned episode goes into more detail about the what and why of CommonJS.

Object Playground

This online visualization tool runs real JavaScript and draws a diagram showing all your objects and how they relate to each other. There’s also a much-lauded video about how objects work in JavaScript.

automatopia

A seed project for JavaScript applications. Clone this repository and get an automated build, automated continuous integration support (the real deal), and automated deployment to Heroku. The automated build includes linting with JSHint, Node.js testing with Mocha, front-end CommonJS modules with Browserify and karma-commonjs, and cross-browser testing with Karma and Mocha. The automation scripts use Jake.

Our JavaScript Workflow 2015 video discusses several of the ideas supported by automatopia.

test-console

Sometimes, you just need to test console output. This npm module is a simple and useful way of doing it.

var stdout = require("test-console").stdout;

var output = stdout.inspectSync(function() {
    console.log("foo");
});
assert.deepEqual(output, [ "foo\n "]);

simplebuild-jshint

If you want to run JSHint in code without a JSHint plug-in available, use this npm module instead. It’s easier than spawning a process or using the JSHint API. (I also think the output is prettier, but that’s me.)

var jshint = require("simplebuild-jshint");

jshint.checkFiles({
    files: [ "*.js", "src/**/*.js", "test/**/*.js" ],
    options: {
        bitwise: true,
        curly: false,
        eqeqeq: true
        // etc
    }
}, callback, errback);

quixote

CSS testing, for real. This npm module is basically an assertion library for your front-end design. It’s fairly young but already works very well for testing layout and responsive design. Its most unique feature is that you can make assertions about how elements relate to each other on the page, so your tests are robust to changes in design. It’s fast and has great assertion failure messages.

menu.assert({
  top: logo.bottom.plus(10)   // menu is 10px below logo
});

Quixote uses a lot of deep magic to work and we figured a lot of it out right here on the Let’s Code JavaScript Recorded Live channel. The work started with chapter 31, “The Test-Driven CSS Experiment,” and you can see us put the production version of Quixote into practice in chapter 43, “Quixote.”

big-object-diff

When you need it, you need it. This npm module compares two objects (or arrays) and only displays the differences. I used it for comparing DOM trees in the Legacy Code Challenge series. Normal “deepEqual” assertion libraries don’t work well with objects that large.

comments powered by Disqus