March 9th, 2018

What I Learned About TravisCI


Continuous Integration






My MEAN stack prototype is the first personal project that uses Continuous Integration (CI). Continuous Integration is great and I will likely use it in all future projects.

So what is CI? Continuous Integration is the practice of merging code in development into a main repository on a regular basis. On each of these merges, testing suites and builds are executed automatically by a tool separate from the main codebase1. This allows for early detection of bugs and helps avoid the nightmare of backtracking through many commits to see where some functionality broke. With CI each time a commit is made the developer knows if any existing code broke. Of course this requires some thorough testing suites to be created (something I often cut corners on admittedly).

So yes, I have a bad habit of thinking about unit/integration testing as an afterthought. Like any bad habit, it is time to start breaking it with small baby steps! The first of those steps includes setting up each project with a CI service, and in this case I chose TravisCI because of how easily it integrates with GitHub repositories!

After signing up for TravisCI and enabling it on for certain repositories, GitHub notifies Travis each time new commits are pushed2! I set up TravisCI for both the client side and server side of my MEAN stack prototype. Let’s take a look at the configuration file (named .travis.yml) and see what it does for each project!

sudo: required dist: trusty addons: apt: source: - google-chrome packages: - google-chrome-stable language: node_js node_js: - '9.2' - '8.0' before_install: - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start before_script: - npm install -g @angular/cli script: - cd web-app - npm install - ng test --single-run --watch=false --code-coverage - npm run build after_script: - cat ./coverage/ | ./node_modules/coveralls/bin/coveralls.js notifications: email: recipients: - on_success: always on_failure: always

Let’s break this file down. I set the language to a Node.js flavor of JavaScript by writing language: node_js. My TravisCI config runs tests on two different Node.js versions. I did this to test out how backwards compatible my project was! Even though the project uses TypeScript and not Node.js, I guess specifying the language as Node.js basically tells Travis "This project uses npm."

The Angular configuration was a bit more complex than the server side config because of some complexities thanks to Angular CLI. For whatever reason, you have to install Chrome in the build in order to get the Karma tests to run properly3.

Accomplishing this requires use of the apt add-on. The apt add-on provides commands to the apt-get package handler for installation4. I specified that I want to install google-chrome from the google-chrome-stable package.

Before the script is run I tell TravisCI to install AngularCLI (npm install -g @angular/cli). This allows TravisCI to use the ng commands. Then I specified that the tests should run and that a build should execute. If both of these commands succeed, TravisCI's success criteria is met. Finally, code coverage statistics are sent to Coveralls , another really cool tool that easily integrates with GitHub.

After TravisCI finishes executing the scripts, there is an option to send notifications about the build details. I decided to have emails sent out each time a build finished, no matter if it succeeded or failed. Notifications are very easily configurable to fit your needs.

language: node_js node_js: - '9.2' - '8.0' script: - npm run test after_success: - npm run coveralls notifications: email: recipients: - on_success: always on_failure: always

Just by glancing at this code you will see that not much changed from the Angular frontend configuration. Node.js is used as the language, a test script is run, and email notifications are sent out on success and failure.

With TravisCI the first baby step has been taken towards a full fledged test suite with continuous integration! I'll be using TravisCI in my projects for the foreseeable future.