Recently I have been spending my spare time working on rewriting SimpleStateManager. The project already had a pretty robust series of unit tests however I wanted to improve this further by adding a few more.

In addition to adding new tests, I wanted to improve how the tests were being run. I have already been using TravisCI to run my unit tests in PhantomJS but what I really wanted to do was run my tests across all the browsers I was intending the new version of SimpleStateManager to support. The key benefit being that I will quickly be able to see if I have broken something while implementing a new feature.

In order to do this, I started to look at multiple different solutions such as SauceLabs, Selenium, finally settling on BrowserStack. The reason I chose BrowserStack is that the tooling around it is really good and they also have really awesome documentation around integrating with continuous integration.

For this tutorial we are going to write a single function that determines if a number is even. We will then write a simple unit test with Qunit which will test whether our function works correctly and finally we will setup TravisCI on the project to run our tests on BrowserStack.

There are several prerequisites to this tutorial that you will need:

  • BrowserStack account with automate – Free for open source projects, paid plan needed for private projects. Open source projects should contact BrowserStack using their contact form https://www.browserstack.com/contact.
  • TravisCI account – Available free for open source projects, or paid accounts are available for private repos, see their plans at https://travis-ci.com/plans. The first 100 builds are free anyway so you do have opportunity to test them out before you commit to purchasing.
  • Knowledge of how to use Git (If you don’t know Git or want to learn how to use it better you should have a look at https://try.github.io/)
  • Node.js – Used by the test runner on local machine. To check if you have Node.js enter node -v in the terminal.
  • Ruby – Used to install the travis gem. If you are on a Mac this should already be installed on your system, to check if you have ruby enter ruby -v in the terminal.

To start the project we first need to create a Git repository, in the case of my project I have created it on GitHub and cloned it to my machine. Then in the route of your project we need to create a .gitignore file which will tell Git to ignore the files listed. The two files we don’t want to commit are created by the BrowserStack runner and committing them to the repository will stop TravisCI being able to run the tests. The contents of the .gitignore file should be:

BrowserStackLocal
browserstack-run.pid

Having created our .gitignore file you should commit it and push it to your remote repository, this will prevent you from accidentally committing these files in the future.

The simplest way to find if a number is even is to divide it by two and look at whether there is a remainder. To do this in JavaScript, we simply use % in the place of / which will make the expression return the remainder. For a number to be even, the result of this expression should be 0. The resulting function looks like this:

function isEven(value) {
	return value % 2 === 0;
}

Having created our function we now need to write our unit tests. For this example, I have chosen to use Qunit however you could choose to instead use jasmine, jasmine2 or mocha as these are also supported by the test runner.

To start with we will first create a folder called test in the route of our project. The next step is to download qunit.js and qunit.css from https://qunitjs.com/ and place the files inside the test folder we just created. Having done this, we can now start to write our tests.

The first step in writing out tests is to setup the HTML document which runs the tests in our browser. For this, we will create an index.html file inside our test folder, the contents of which is as follow:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="qunit.css">
        <script src="../src/even.js"></script>
    </head>
    <body>
        <div id="qunit"></div>
        <div id="qunit-fixture"></div>

        <script src="qunit.js"></script>
        <script src="tests.js"></script>
    </body>
</html>

Next we will write the actual tests, to do this we first need to create a test.js file in the tests folder (we already referenced this in our HTML). Upon creating the file we want to first define ours test, this is done by using QUnit’s test method with two parameters, the first being the name of the test and the second being an anonymous function which will wrap our tests. We want to define 2 tests for our isEven function, the first is a test that checks that even numbers return true, the second is a test that checks that odd numbers return false.

test("isEven returns true for even numbers", function(){
});

test("isEven returns false for odd numbers", function(){
});

Inside our test we want to check how our isEven function responds to odd and even numbers, for this we define an assertion. To define our assertion we use the ok method, passing an expression that will return true or false as the first parameter, and a name for the test as the second parameter. In the below example, we have defined two tests, the first testing that 10 is an even number, the second that 5 is not an even number.

test("isEven returns true for even numbers", function(){
    ok(isEven(10), "10 is even");
});

test("isEven returns false for odd numbers", function(){
    notOk(isEven(5), "5 is odd");
});

Having written our tests, we can now test that they work in our browser. If everything is working the page should look like this.

Screen Shot 2015-06-11 at 09.23.34

Now that we are happy our tests work as expected we can now start to configure testing them in browser stack. To do this we first need to install the test runner itself which is installed globally using NPM using this command:

npm -g install browserstack-runner

With the test runner installed the next step is to create the BrowserStack config. This is really simple as all we need to do create a browserstack.json file. Inside this file, we specify the test framework, the path to our HTML file and the browsers we want to support.

{
    "test_framework" : "qunit",
    "test_path": "test/index.html",
    "browsers": [
        "chrome_previous",
        "chrome_latest",
        "firefox_previous",
        "firefox_latest",
        "ie_9",
        "ie_10",
        "ie_11",
        "opera_latest",
        {
            "browser": "safari",
            "browser_version": "latest",
            "os": "OS X",
            "os_version": "Mountain Lion"
        },
        {
            "browser": "safari",
            "browser_version": "latest",
            "os": "OS X",
            "os_version": "Mavericks"
        },
        {
            "browser": "safari",
            "browser_version": "latest",
            "os": "OS X",
            "os_version": "Yosemite"
        }
    ]
}

Before your tests will run you will need to setup your authentication details, in order to do this you will need to add your BrowserStack Automate username and access key to your system’s environment variables so that they can be accessed by the test runner. If you haven’t got these already you can get them from the BrowserStack site.

To add your username and your key to your environment variables you need edit your .bash_profile file, my tool of preference to do this is pico so to open my bash profile file I would run:

pico ~/.bash_profile

Next you need to add the following to the end of the file, replacing <browserstack_username> with your BrowserStack username, and replacing <browserstack_key> with your BrowserStack key.

export BROWSERSTACK_USERNAME="<browserstack_username>"
export BROWSERSTACK_KEY="<browserstack_key>"

To exit pico press ctrl+x and then answer yes when you are asked to save. To reload your environment variables then run:

source ~/.bash_profile

With our environment variables in place we can now check our BrowserStack tests work, to do this we simply open the terminal to the folder of our project and run the runner.

browserstack-runner

Upon running the command, the BrowserStack runner will launch the test environment and run the tests. The results will look as follows:

Now we know our tests work well with BrowserStack we want to be able to run them every time a commit is made to our repository so we know whether any breaking changes have been committed. This is where TravisCI comes in, it gets notified by GitHub if a commit has been made and will then run your tests. The first step to test a repository with TravisCI is to enable it for the repository. To do this log in to TravisCI, sync your GitHub repositories and flip the switch for your project (see screenshot).

Screen Shot 2015-06-11 at 19.30.52

Once enabled we now need to create a .travis.yml file in the root of the repository, this will instruct TravisCI how to run our tests.

language: node_js
node_js:
- 0.10.28
env:
before_script:
  - npm -g install browserstack-runner
script:
  - browserstack-runner

Having created our config file, the next step is to setup the TravisCI environment variables, this involves encrypting our BrowserStack username and key. To do this you will need to install the travis gem.

gem install travis

With the gem installed we can now use it to encrypt the BrowserStack username and key, the reason we are encrypting them is so that they are not publicly accessible. The gem may ask you to confirm the repository that your project uses, check this is correct and type yes.

travis encrypt BROWSERSTACK_USERNAME= –add
travis encrypt </span>BROWSERSTACK_KEY= –add
</span> </p> With this all setup we can now commit everything to our git repository. If you login to the TravisCI website, you will notice a build will appear shortly after you commit to the project. By clicking the build you will be shown a log of what is being run against your repository and you will see your BrowserStack tests running. [Screen Shot 2015-06-12 at 20.23.38](https://i0.wp.com/www.jonathanfielding.com/wp-content/uploads/2015/06/Screen-Shot-2015-06-12-at-20.23.38.png) ## Summary In this tutorial we looked at how you could automate running your unit tests across 12 different browsers every time you make a commit. If you have any questions please post in the comments and I will do the best I can to help you. The code can be found on GitHub at <https://github.com/jonathan-fielding/browserstack-travis-integration-demo> and here is a direct link to the TravisCI page for the repo <https://travis-ci.org/jonathan-fielding/browserstack-travis-integration-demo>. ## Thanks A special thanks to [Phil Nash](https://twitter.com/philnash) who kindly offered to give up time on his Friday night to read through this post instead of enjoying a beer in the pub, therefore that means I probably owe him a beer.

Are you looking for your next role?

I work as an Engineering Manager at Beamly where we are currently looking for both Frontend and Full Stack software engineers based in our London office.

Find out more