In this tutorial I’m going to explain how to run javascript tests in a real browser on a ci environment with no display. I’m going to use the following setup:
CI server: Centos7
Browser: Chrome
Testing framework: Jasmine
Testrunner: karma
The interesting part of this setup is the Chrome browser. Most Javascript test setups for CI environments rely on PhantomJS. PhantomJS has it’s pros and cons. It is easy to install on servers with no display but it has a very poor ES6 support. See ES6 browser support
Chrome on the other hand has awesome ES6 support but it does not work out of the box on server systems like Centos. To run it on Centos, Xvfb (virtual frame buffer) is necessary to simulate a display.
Lets start with a virtual Centos7 instance created with vagrant
$ vagrant init centos/7
$ vagrant up
connect to it via ssh
$ vagrant ssh
I ususaly use nano to edit files, so lets install it with the following command
$ sudo yum install nano
To install the Chrome browser we need to enable the google yum repository by creating a file called ‘/etc/yum.repos.d/google-chrome.repo’ and adding the following lines of code to it.
[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
Noe we can install the latest Chrome wth yum install:
$ sudo yum install google-chrome-stable
To test if Chrome was installed properly we can try to start it.
$ google-chrome &
You should see an error message similar to this:
$ [13411:13411:1031/072503:ERROR:browser_main_loop.cc(243)] Gtk: cannot open display:
Now its time to install Xfvb the virtual frame buffer to simulate the display
$ sudo yum install xorg-x11-server-Xvfb
Lets try again to run chrome but now with xvfb
$ xvfb-run google-chrome
We should see some cryptic error messages like:
…
[13870:13870:1031/073247:ERROR:image_metadata_extractor.cc(111)] Couldn’t load libexif.
[14089:14089:1031/073248:ERROR:image_metadata_extractor.cc(111)] Couldn’t load libexif.
[14091:14091:1031/073248:ERROR:image_metadata_extractor.cc(111)] Couldn’t load libexif.
Ok chrome is installed, lets kill it with ‘ctrl+c’.
In the next step we install node, g++, karma and jasmine to run our tests.
Node installation with nvm:
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.13.1/install.sh | bash
$ source ~/.bash_profile
$ nvm install v5.0.0
$ nvm alias default v5.0.0
Some node packages need g++, so lets install that as well
$ sudo yum group install "Development Tools"
Now we preare our test project
$ mkdir testproject
$ cd testproject
$ mkdir test
$ cd test
Create a jasmine test file
$ nano test.spec.js
describe('JavaScript addition operator', function () {
it('adds two numbers together', function () {
expect(1 + 2).toEqual(4);
});
});
$ cd ..
Initialise a node project
$ npm init
Install karma and jasmine
$ npm install karma jasmine-core karma-jasmine karma-chrome-launcher --save-dev
$ npm install -g karma-cli
$ karma init
it will ask you for your testfile location:
What is the location of your source and test files ?
You can use glob patterns, eg. “js/*.js” or “test/**/*Spec.js”.
Enter empty string to move to the next question.
enter
> test/**/*.spec.js
If all the previouse steps worked fine we are able to start the karma test runner with
$ xvfb-run karma start
Done! We should see something like…
related articles:
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-a-centos-7-server
http://tobyho.com/2015/01/09/headless-browser-testing-xvfb/
https://atlas.hashicorp.com/centos/boxes/7
https://karma-runner.github.io/latest/intro/installation.html
http://www.cyberciti.biz/faq/centos-rhel-7-redhat-linux-install-gcc-compiler-development-tools/
http://code.tutsplus.com/tutorials/testing-your-javascript-with-jasmine–net-21229
https://docs.vagrantup.com/v2/getting-started/
http://www.tecmint.com/install-google-chrome-on-redhat-centos-fedora-linux/
ES2015 appetizers 