http://www.opitz-consulting.com/go/3-4-898 JavaScript is both a very dynamic language and interpreted slightly differently in every browser. Therefore, automatic tests are especially valueable for JavaScript. This talk shows how to develop cross browser tests for JavaScript. We discuss isolated unit tests and especially how to test the user inteface, which uses asynchronous functionalities like AJAX, animations, etc. OPITZ CONSULTING JavaScript Expert Tobias Bosch presented this session at WebTechConference on 17/10/2012 in Mainz, Germany. -- About us OPITZ CONSULTING is a leading project specialist for custom-build applications and individual business intelligence solutions in the German market. The company's ambition is to help organizations to be better than their competitors. To achieve this OPITZ CONSULTING analyses the individual competitive edge the customer has, optimizes business processes for process automation and IT-support, chooses and designs appropriate system architectures, develops and implements solutions and guarantees a 24/7 support and application maintenance. To ensure the necessary skill and qualification OPITZ CONSULTING has established a training center for customers and the internal staff. Since 1990 over 600 customers have a long lasting and successful business relationship with OPITZ CONSULTING. Over 2/3 of the German stock index (DAX) companies rely on services from the 400+ OPITZ CONSULTING consultants. OPITZ CONSULTING maintains offices in Bad Homburg, Berlin, Essen, Gummersbach, Hamburg, Munich, Nuremberg and Kraków (Poland). About us: http://www.opitz-consulting.com/en/about_us Services: http://www.opitz-consulting.com/en/leistungsangebot Career: http://www.opitz-consulting.com/en/career

1. Test Driven JavaScript Development
Tobias Bosch
OPITZ CONSULTING Deutschland GmbH

2. Who am I?
tobias.bosch@opitz-consulting.com
(@tigbro)

3. Mission Markets
The company's ambition is to help  Branchspreading
organizations to be better than their  Over 600 customers
competitors. 29%
Trade / Logistics /
Our services take place in partnership and 29% Supplier
Industry / Services /
are aimed at a co-operation of many years. Telecommunications
42%
Public Clients / Banks and Insurance
Associations and Federations
Portfolio Basic Data
 Business IT Alignment  Founded in 1990
 Business Information Management  400 employees
 Business Process Management  8 offices
 Application Development
 SOA and System Integration
 IT Infrastructure Management
<Präsentationstitel – bitte im Folienmaster ändern> © OPITZ CONSULTING GmbH 2011 Seite 3

5. Who are you?

6. This talk is about...
... automatic tests
... written by developers

7. Why should I test?

8. Why should I test JavaScript code?

9. Runtime environments for
JavaScript
...

10. In this talk
Icon Set by Paul Irish (http://paulirish.com/2010/high-res-browser-icons/)

11. The example

12. Writing tests

13. „Classic style“ with
xUnit asserts
„BDD style“ à la RSpec

14. Demo: BDD with Jasmine

15. Hello Jasmine!
expect(x).toEqual(y);
expect(x).toBe(y);
expect(x).toBeDefined();
expect(x).toBeUndefined();
expect(x).toBeTruthy();
expect(x).toBeFalsy();
...

16. Advanced concepts

17. Spies

18. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

19. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

20. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

21. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

22. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);of 'element' to 'opacity'
// set opacity
var mostRecentCall = util.opacity.mostRecentCall;
util.opacity = function (element, opacity) {
...
expect(mostRecentCall.args[0]).toBe(element);
};
expect(mostRecentCall.args[1]).toEqual(1);
});
});

23. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

24. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

25. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
jasmine.Clock.useMock();
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

26. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
// set opacity of 'element' to 'opacity'
util.opacity = function (element, opacity) {
var element = document.createElement("div");
...
jasmine.Clock.useMock();
};
spyOn(util, 'opacity');
fadein.execute(element);
jasmine.Clock.tick(1000);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});

27. Function The spy should...
spy.andCallThrough() ... call the original function
spy.andReturn(argument) ... return the given argument
spy.andThrow(exception) ... throw the given exception
spy.andCallFake(function) ... call the given function
Functions of spies

28. Function Checks whether the spy...
toHaveBeenCalled() ... has been called
... has been called with the given
toHaveBeenCalledWith(args)
arguments
Matcher for spies
Function Description
spy.callCount Number of calls
spy.argsForCall[i] Arguments of the i-th call
spy.mostRecentCall.args Arguments of the last call
Properties of spies

29. Asynchronous tests

30. Asynchronous tests
it("should eventually set opacity to 1", function() {
var element = document.createElement("div");
spyOn(util, 'opacity');
runs(function() {
fadein.execute(element);
});
waitsFor(function () {
return opacitySpy.mostRecentCall.args[1] === 1;
});
runs(function() {
// some other expectations
expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
});
});

31. Asynchronous tests
it("should eventually set opacity to 1", function() {
var element = document.createElement("div");
spyOn(util, 'opacity');
runs(function() {
fadein.execute(element);
});
waitsFor(function () {
return opacitySpy.mostRecentCall.args[1] === 1;
});
runs(function() {
// some other expectations
expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
});
});

32. Asynchronous tests
it("should eventually set opacity to 1", function() {
var element = document.createElement("div");
spyOn(util, 'opacity');
runs(function() {
fadein.execute(element);
});
waitsFor(function () {
return opacitySpy.mostRecentCall.args[1] === 1;
});
runs(function() {
// some other expectations
expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
});
});

33. Asynchronous tests
it("should eventually set opacity to 1", function() {
var element = document.createElement("div");
spyOn(util, 'opacity');
runs(function() {
fadein.execute(element);
});
waitsFor(function () {
return opacitySpy.mostRecentCall.args[1] === 1;
});
runs(function() {
// some other expectations
// set opacity of 'element' to 'opacity'
expect(opacitySpy.mostRecentCall.args[1]).toEqual(1); {
util.opacity = function (element, opacity)
}); ...
}); };

34. Asynchronous tests
it("should eventually set opacity to 1", function() {
var element = document.createElement("div");
spyOn(util, 'opacity');
runs(function() {
fadein.execute(element);
});
waitsFor(function () {
return opacitySpy.mostRecentCall.args[1] === 1;
});
runs(function() {
// some other expectations
expect(opacitySpy.mostRecentCall.args[1]).toEqual(1);
});
});

35. UI tests with Jasmine UI

36. Jasmine UI
Extension of JS test framework Jasmine
Allows to load, instrument and test a webapp
in the browser
Supports testing asynchronous behaviour

37. Analyse HTML Session Storage Show
specs results
Scripts: Load Scripts:
app
jasmine-ui.js jasmine-ui.js
jasmine-html.js jasmine-html.js
"uiSpec.js" Collect "uiSpec.js"
results
UiSpecRunner.html UiSpecRunner.html
Scripts:
"app.js"
Execute "uiSpec.js"
specs
index.html

38. <html>
<body>
<div id="hello">Hello World!</div>
<button id="fadein">Fade in</button>
</body>
</html>
UI tests with Jasmine-UI

39. describeUi("index", "/js-fadein/index.html", function () {
it("should fade in hello div on button click", function () {
var win, field, button;
runs(function() {
field = document.getElementById('hello');
button = document.getElementById('fadein');
expect(util.opacity(field)).toEqual(0);
simulate(button, 'click');
});
runs(function () {
expect(util.opacity(field)).toEqual(1);
});
});
});
UI tests with Jasmine-UI

40. describeUi("index", "/js-fadein/index.html", function () {
it("should fade in hello div on button click", function () {
var win, field, button;
runs(function() {
field = document.getElementById('hello');
button = document.getElementById('fadein');
expect(util.opacity(field)).toEqual(0);
simulate(button, 'click');
});
runs(function () {
expect(util.opacity(field)).toEqual(1);
});
});
});
UI tests with Jasmine-UI

41. describeUi("index", "/js-fadein/index.html", function () {
it("should fade in hello div on button click", function () {
var win, field, button;
runs(function() {
field = document.getElementById('hello');
button = document.getElementById('fadein');
expect(util.opacity(field)).toEqual(0);
simulate(button, 'click');
});
runs(function () {
expect(util.opacity(field)).toEqual(1);
});
});
});
UI tests with Jasmine-UI

42. describeUi("index", "/js-fadein/index.html", function () {
it("should fade in hello div on button click", function () {
var win, field, button;
runs(function() {
field = document.getElementById('hello');
button = document.getElementById('fadein');
expect(util.opacity(field)).toEqual(0);
simulate(button, 'click');
});
runs(function () {
expect(util.opacity(field)).toEqual(1);
});
});
});
UI tests with Jasmine-UI

43. describeUi("index", "/js-fadein/index.html", function () {
it("should fade in hello div on button click", function () {
var win, field, button;
runs(function() {
field = document.getElementById('hello');
button = document.getElementById('fadein');
expect(util.opacity(field)).toEqual(0);
simulate(button, 'click');
});
runs(function () {
expect(util.opacity(field)).toEqual(1);
});
});
});
UI tests with Jasmine-UI

44. describeUi("index", "/js-fadein/index.html", function () {
it("should fade in hello div on button click", function () {
var win, field, button;
runs(function() {
field = document.getElementById('hello');
button = document.getElementById('fadein');
expect(util.opacity(field)).toEqual(0);
simulate(button, 'click');
});
runs(function () {
expect(util.opacity(field)).toEqual(1);
});
});
});
UI tests with Jasmine-UI

45. Instrument
describeUi("index", "/js-fadein/index.html", function () {
beforeLoad(function() {
mockBackend();
});
...
});

46. Instrument
describeUi("index", "/js-fadein/index.html", function () {
beforeLoad(function() {
mockBackend();
});
...
});

47. Instrument
describeUi("index", "/js-fadein/index.html", function () {
beforeLoad(function() {
mockBackend();
});
...
});

48. Jasmine UI: Roadmap
Support other test runners
(e.g. testacular)
Support other test frameworks
(e.g. QUnit)

49. Present: describeUi
describeUi('todo', '/todo-mobile', function() {
// ...
});

50. Future: loadUi
jasmineui.loadUi('/todo-mobile', function() {
// Jasmine specs
describe('todo', function() {
it('should do smth', function() { ... });
});
// QUnit tests
module("todo");
test("should do smth", function() {
// ...
});
});

51. Automated test execution

52. Pro Examples
Browser from QUnit
Testing in
production YUI Test
the browser
environment Jasmine
Envjs
Easier to automate
Headless PhantomJS
Easier to embed
browser Zombie.js
into CI
HtmlUnit

53. Remote browser control

54. JsTestDriver
http://code.google.com/p/js-test-driver/

55. Demo: JsTestDriver

56. Conclusion
There are a lot of tools for testing JavaScript
code.
Test your code!
Especially test your JavaScript code!
You have no excuse ...

57. Links
Jasmine http://pivotal.github.com/jasmine/
Jasmine UI https://github.com/tigbro/jasmine-ui
js-fadein https://github.com/stefanscheidt/js-fadein
JsTestDriver http://code.google.com/p/js-test-driver/

58. saturated writing
(By Eduordo, http://www.flickr.com/photos/tnarik/366393127/)
Smiley Keyboard
(By ~Prescott, http://www.flickr.com/photos/ppym1/93571524/)
Spyhole, Paris
(By smith of smiths, http://www.flickr.com/photos/hesketh/232015302/)
Sorta synchronised diving
(By Aaron Retz, http://www.flickr.com/photos/aretz/309469339/)

59. Stamp Collector
(By C. Castillo, http://www.flickr.com/photos/carolinedecastillo/2750577684/)
bios [bible]
(By Gastev, http://www.flickr.com/photos/gastev/2174505811/)
Day 276/365: in hot pursuit
(By Tina Vega, http://www.flickr.com/photos/tinavega/3066602429/)

60. Thanks for listening!
@tigbro

61. www.opitz-consulting.com/go_mobile