Just married: Joomla and Jasmine

Written by | 06 June 2016 | Published in 2016 June
The set of custom JavaScript libraries in Joomla currently does not have any tests written for it. This summer, as a project done under Google Summer of Code 2016, over 90% test coverage will be achieved over those libraries and this article tells the story of how that is happening.
Just married: Joomla and Jasmine Just married: Joomla and Jasmine http://www.freepik.com/free-vector/just-married-couple-on-a-bike_822369.htm

Testing everywhere

Just as the meme says, testing is a major requirement in any software system. My job for this summer with Joomla! as a Google Summer of Code student is to write JavaScript tests. Joomla CMS uses a collection of custom written JavaScript libraries. I intend to introduce testing for those libraries targeting a test coverage of over 90%. Achieving this would provide a solid foundation for future enhancements on these libraries. I am using Jasmine as the testing framework and Karma as the test runner. So in this article I will be sharing with you the story of Joomla and Jasmine.

It is with great excitement I write my first article on my GSoC project with Joomla! I will start off with a bit of an introduction to myself before running into the details of the project.

I'm Thanuditha Ruchiranga Wickramasinghe, currently a final year undergraduate at the Department of Computer Science and Engineering at University of Moratuwa, Sri Lanka. This is my second time as a GSoC student and last year’s GSoC helped me learn a lot of new things which I had never been exposed to and I am pretty sure it is going to be an even better experience this time around with my mentors Ashan Fernando and Yves Hoppe.

Moving onto the story of Joomla and Jasmine, before I got selected to do the project as a GSoC student, I did some preliminary research on some potential JavaScript testing frameworks. I compared the pros and cons in them with regard to the project requirement. Discussing with my mentors on the observations made, we decided Jasmine as the perfect match for Joomla! Next we went in search of a test runner and Karma was the obvious choice.

The advantage of using Karma is that it is specifically developed to save the developer from the hassles of configuring the testing environment. Joomla! Uses Travis continuous integration service to run tests on GitHub. Every code push or PR made to the repository triggers all the tests to be run. Travis is watching you!


Depending on the test results from Travis, GitHub indicates whether the changes made broke the existing functionality or not. Karma makes setting all these configuration a very simple task. So finally Karma became the matchmaker that stood between Joomla and Jasmine. Following is a simple diagram which elaborates on the idea of the test execution flow.

Jasmine karma exec flow

Going into a bit detail on the implementation aspects, the first and probably the most difficult task in the project implementation was to lay the foundation and setup the testing environment with the first couple of test cases to work on it. We decided to use RequireJS along side of Karma so that it is possible to dynamically load the necessary JavaScript code as modules whereever needed. Configuring the tests to run on Travis was not that hard since Karma was there for the rescue. The jasmine-jquery library also was used to make test writing simpler as it provides a comprehensive set of custom matchers for jQuery framework. A couple of other plugins like Karma coverage reporter, Karma verbose reporter and RequireJS text plugin were used in adding some touch of professionalism to the work and its outputs. Right now we have a PR waiting to be merged to the gsoc16_js-unit-tests repository with a comprehensive set of test cases written for the first chosen JavaScript library, ‘JCaption’.

Following is a screenshot of the Travis build log with all the test cases for the JCaption library passing along with a summary on the test coverage over the set of libraries so far.

Capture 1

An extract of the SPEC code that ran this set of test cases is shown below. The DOM setup happens in a separate file which is dynamically loaded as a dependency here.

Spec code


This article basically described about how the JavaScript testing environment was build from scratch. In my next article I will be sharing with you on some challenges that came up when writing the javascript tests for different libraries and how they were overcome. So see you till the next time!

P.S: Special thanks go to Elisa Foltyn for helping me with this cool article cover image. :)

Read 5122 times Tagged under Google Summer of Code, English