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.
Before you begin
Ensure you have:
- Signed into Shippable using your GitHub or Bitbucket account
- Gone through my previous tutorials of configuring Continuous Integration for a Node.js application and configuring a unit test to check for errors on the Node.js app.
- Have an enabled project to follow this tutorial.
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:
I'll use Grunt to run tests (execute mochaTest) against an Express server, then generate reports with Xunit.
I have configured a unit test in the file test.js, which checks the text published in index.js. See the highlighted text below:
In order to setup test result visualization, I have to ensure:
- Run the above tests as part of the CI work flow, configuring the
- Make sure the test results are in junit format.
- 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 node_js: - 0.12 env: - XUNIT_FILE=shippable/testresults/result.xml build: ci: - 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");
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.
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.