How to test a front-end JavaScript library and integrate with Travis?

Question

I have already experimented testing NodeJS libraries using Jasmine or Mocha, but I don't know how to test front-end projects. I have found tutorials online, but everything includes a task manager in the workflow and I would like to know how to do this without one.

I found the following question close to what I am asking:

Using Travis-CI for client-side JavaScript libraries?

In my case, I am using Jasmine and have already set up the Jasmine SpecRunner.html, Jasmine library and spec/mylibSpec.js. The tests pass when I run the SpecRunner.html on my browser.

Now, how do I integrate this with Travis, without Grunt/Gulp/Brunch/etc?

I have heard the words "PhantomJS" and "Selenium" and I think this has to do with what I am trying to accomplish. Is there a "hello, world"-like project with tests and Travis integration one can learn from?

Answer 1

The Travis documentation lists three basic ways to accomplish this:

1. the PhantomJS headless browser
2. running Firefox with a virtual display or
3. using the Saucelabs browser VM service

Testing with PhantomJS is the fastest, since it does not simulate a display (it still allows you to create screenshots, though). PhantomJS comes with a run-jasmine example.

The phantom test script can then be executed directly, simply by running

script: phantomjs run-jasmine.js

in your .travis.yml, without the additional overhead of a build system such as Grunt.

If testing your project requires a real browser GUI, that leaves you with options 2 or 3.

Saucelabs browser VMs have the advantage of real cross-browser testing; if your project is open source, they offer a free plan. They also provide an in-depth tutorial for your specific use case: Travis + Jasmine + Saucelabs, which however does require Grunt in order to run.