Recently I’ve been working on a d3.js project within a narrow time frame, meanwhile the product requirements changes frequently. That lead to messy codes partly because I didn’t have time to refactor or write any tests, just wanted to implement changing features and fix bugs. And I’ve had enough with the “fix this but unexpectedly break that” scenario, this is the first reason why I want to actually integrate TDD into future projects.
The second reason is about d3.js. Once I started to implement multiple charts, the necessity of writing reusable d3.js components became more conspicuous, and this seems to be the perfect timing to integrate unit tests into d3.js projects.
Things I would like to achieve are: 1) Use jasmine to write tests, and let karma take care of automated tests 2) continuously (and conditionally) test the code and deploy them to npm (deploying to services like Heroku is similar, I’m just using npm here for demonstration purpose).
Set Up Karma and Jasmine
Install and Configure Karma
Another thing worth noting is that installing a karma cli (
npm install -g karma-cli) is helpful for running local tests. But in terms of installing dependencies while running tests on Travis, I think using the karma filepath can save some time(
node_modules/karma/bin/karma start my.conf.js).
Now Karma is up, let’s initiate it by creating a config file:
karma init my.conf.js.
All we need to do is to answer those pumped questions to get a karma config file.
There are many other options described here, which you can use to override config file settings in command line.
Write Tests with Jasmine
In previous step, the test source and target filepath is:
tests/*.js. Now let’s create these folders and files with a simple example:
Example source file:
Example tests file:
Now let’s run these two tests locally first:
karma start my.conf.js --single-run.
And this is what we get in terminal:
(Note: To run tests with browser, install firefox launcher instead of chrome launcher)
Set Up Travis
Before delving into the configuration details, we need to sign up Travis with Github so that Travis can run/deploy our open source projects. Once you give access to Travis, it will sync all your github repos(this can take a few minutes depends on how many repos you have). After the syncing, we need to tell Travis to track this repo.
Now let’s add a
.travis.yml file in project root:
Now let’s push updates to github remote origin, meanwhile you refresh your Travis profile page to see running tests and reports.
Deploy to NPM
Travis can also automatically release/deploy your repo, let’s take releasing to NPM as an example. There are two ways to update the travis config file. I prefer to use the travis CLI to add and encrypt api keys for me(Note: if it’s a new repo, you need to update repos in Travis):
Beyond that basic setting, I think it is also necessary to add conditional release settings such as which branch to deploy, or deploy only when there is a tag.
Source code here.