Create visualizations of your continuous integration test results

- By Abhijit Kini on May 25, 2016

In this tutorial, I'll show you how to configure visualizations of Continuous Integration test results. This visualization not only looks good, but also helps a developer to drill down on tests that failed and find the root cause much quicker.

Here's how a successful Continuous Integration test result would look.

Create visualization for continuous integration test results

Before you begin

Ensure you have:

Feel free to fork this project and follow along.

Configure unit tests

The node.js app when run successfully should have an output of "Welcome to Shippable". You can see this output in the index.js file in the node.js app. as shown below:

nodejs file for showing continuous integration test results

I'll use Grunt to run tests (execute mochaTest) against an Express server, then generate reports with Xunit.


Using grunt for showing continuous integration test results

I have configured a unit test in the file test.js, which checks the text published in index.js. See the highlighted text below:

Unit test for showing continuous integration test results

Configure the shippable.yml file

In order to setup test result visualization, I have to ensure:

  1. Run the above tests as part of the CI work flow, configuring the shippable.yml file.
  2. Make sure the test results are in junit format.
  3. The test results are stored in shippable/testresults folder.

Shown below is my shippable.yml file where, by adding an env variable called XUNIT_FILE, I pipe out the test results to the shippable/testresults folder. You can also see that I have configured the shippable.yml file to run 'npm test' as part of my CI workflow.

language: node_js

  - 0.12

  - XUNIT_FILE=shippable/testresults/result.xml

    - npm install
    - npm test

View Test Results

I'll deliberately add an error so that the unit test fails. This will show you how the visualization is for failed tests. To do this, I changed the text in the index.js file to "Welcome 2 Shippable".  Next, I commit this change to my GitHub repository by running the git add .git commit -m "adding an error deliberately"git push origin master commands. Doing so, triggers a build on Shippable which, in turn executes the unit tests and fails as shown below. In addition to showing the test results in a consumable format, you can also see details of the errors highlighted below. 'test.js:9:25' signifies line 9, character 25 on the file test.js which points to 'equal("Welcome to Shippable");

Failed continuous integration test result

I'll correct this error and commit the code change. This code change will trigger another build on Shippable, which will run the CI process including the unit tests. This time it runs successfully and the test results visualization shows all tests passed.

Successful continuous integration test result

If you are curious to compare how the tests look without the visualization check the "Configuring a unit test to check for errors on a node.js application"

I've successfully configured test results visualization for my Continuous Integration project on Shippable. Next, I'l go over setting up code coverage to visualize the percentage of code used when running tests.

Try Shippable

Topics: continuous integration (CI), nodejs, tutorial, tips, unit test