Some of the current javascript testing technologies are reviewed (as december 2015): jasmine, karma, protractor, phantomjs

1. Javascript Testing
Tools of the trade

2. Juanma Orta
Front/Back end developer
at Ulabox.com
@JuanmaOrta

3. The Tools

4. Jasmine
The testing framework

5. Karma
The test runner

6. ĥ
The headless browser

7. Protractor
The E2E framework

8. Jasmine
Suite and spec based testing framework. Allows dependency mocking and
custom matchers.

9. The suite
(function (rps) {
‘use strict’;
describe(‘when playing rock-paper-scissors’, function() {
});
}(RockPaperScissors)); // the module under test

10. Setup and tear down
describe(‘when playing rock-paper-scissors’, function() {
var foo = ‘’;
beforeEach(function() {
foo = ‘bar’;
});
afterEach(function() {
foo = ‘’;
});
});

11. The specification (spec)
describe(‘when playing rock-paper-scissors’, function() {
it(‘will show that rock wins scissors’, function() {
var result = rps.whoWins(‘rock’, ‘scissors’);
expect(result).toEqual(1);
})
});

12. “Suites and specs are just plain JS functions”
- From an expert

13. Mocking dependencies
it(‘will show that rock wins scissors’, function() {
var choice = ‘rock’;
spyOn(rps, ‘validate’).and.callFake(function() { // Jasmine 2.0 syntax
return choice;
});
spyOn(rps, ‘whoWins’).andCallFake(function() { // Jasmine 1.x syntax
$(document).trigger(‘score:user1’);
});

14. Matchers
Common matchers
expect(true).toBe(true);
expect(true).not.toBe(fase);
.toEqual
...
jQuery matchers
Using jasmine-jquery module
expect($(‘#info’)).toBeVisible();
expect($(‘#info’)).toHaveClass();
expect($(‘#myField’)).toHaveValue(‘123’);

15. Custom Matchers
var customMatchers = {
toBeActive: function() {
return {
compare: function(item) {
...
}
}
}
};
beforeEach(function() {
jasmine.addMatchers(customMatchers);
});
expect($(‘#element’)).toBeActive();
expect($(‘#element’)).not.toBeActive();

16. Enter the Karma
“Karma is essentially a tool which spawns a web server that executes source code against test code for each of the
browsers connected. The results for each test against each browser are examined and displayed via the command line to
the developer such that they can see which browsers and tests passed or failed.”
$ karma start

17. The browsers
● Google Chrome
● Mozilla Firefox
● Safari (only on OS X)
● Internet Explorer (yes, IE too, but only on Win machines)
and
● Phantom JS -> the headless one

18. Protractor: End to end testing (e2e)
Designed basically for AngularJS e2e testing,
runs tests in a real browser.
Simulates user interactions
Can use any test framework,
but works smoothly with Jasmine
It can also be used to test
non-angularjs applications

19. Example protractor test
beforeEach(function () {
browser.ignoreSynchronization = true;
browser.get(‘http://localhost:9000’);
});
it(‘should show …’, function() {
element(by.id(‘myChoice’))
.sendKeys(‘stone’);
element(by.css(‘.btn’)).click();
alert = element.all(by.css(‘.alert’))
expect(alert.count()).toBe(1);
});

20. Resources
The repo of this tests and exercises:
https://github.com/juanmaorta/rockpaperscissors.git
Jasmine: http://jasmine.github.io/
Karma: http://karma-runner.github.io/0.13/index.html
Protractor: https://angular.github.io/protractor/#/

21. Thanks!
Contact me:
Juanma Orta
Ulabox.com
juanma.orta@ulabox.com
@JuanmaOrta