JavaScript ist eine sehr dynamische Sprache und verhält sich zudem je nach Browser unterschiedlich. Daher sind automatisierte Tests besonders wertvoll. Dieser Vortrag von Tobias Bosch und Stefan Scheidt (OPITZ CONSULTING) zeigt, wie Cross-Browser-Tests für JavaScript entwickelt werden können.

1. Tobias Bosch & Stefan Scheidt/ OPITZ CONSULTING GmbH Test-Driven JavaScript Development

2. Wer sind wir? tobias.bosch@opitz-consulting.com (@tigbro) stefan.scheidt@opitz-consulting.com (@beezlebug)

4. Wer sind Sie?

5. In diesem Vortrag geht‘s um... ...automatisiertes Testen ...durch Entwickler

6. Warum testen?

7. Warum JavaScript-Code testen?

8. Laufzeitumgebungen für JavaScript ...

9. In diesem Vortrag: Icon Set by Paul Irish (http://paulirish.com/2010/high-res-browser-icons/)

10. Tests formulieren

11. „Klassisch“ mit xUnit-Asserts „BDD-Style“ à la RSpec

12. Demo: BDD mit Jasmine

13. describe("parseFloat", function() { it("shouldreturnundefinedforundefined", function () { expect(util.parseFloat(undefined)).toBeUndefined(); }); it("shouldreturn 0 foremptystring", function () { expect(util.parseFloat('')).toEqual(0); }); it("shouldreturnnumberfornumberstrings", function () { expect(util.parseFloat('1.5')).toEqual(1.5); }); // ... }); Hello Jasmine!

14. describe("parseFloat", function() { it("shouldreturnundefinedforundefined", function () { expect(util.parseFloat(undefined)).toBeUndefined(); }); it("shouldreturn 0 foremptystring", function () { expect(util.parseFloat('')).toEqual(0); }); it("shouldreturnnumberfornumberstrings", function () { expect(util.parseFloat('1.5')).toEqual(1.5); }); // ... }); Hello Jasmine! Suite

15. describe("parseFloat", function() { it("shouldreturnundefinedforundefined", function () { expect(util.parseFloat(undefined)).toBeUndefined(); }); it("shouldreturn 0 foremptystring", function () { expect(util.parseFloat('')).toEqual(0); }); it("shouldreturnnumberfornumberstrings", function () { expect(util.parseFloat('1.5')).toEqual(1.5); }); // ... }); Hello Jasmine! Specs

16. describe("parseFloat", function() { it("shouldreturnundefinedforundefined", function () { expect(util.parseFloat(undefined)).toBeUndefined(); }); it("shouldreturn 0 foremptystring", function () { expect(util.parseFloat('')).toEqual(0); }); it("shouldreturnnumberfornumberstrings", function () { expect(util.parseFloat('1.5')).toEqual(1.5); }); // ... }); Hello Jasmine! Matcher

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

18. Hello Jasmine! Spec Runner

19. Fortgeschrittene Konzepte

20. Spies

21. Spies describe("execute fadein", function() { it("should eventually set opacity to 1", function () { varelement = document.createElement("div"); spyOn(window, 'setTimeout').andCallFake( function(callback) { callback(); }); spyOn(util, 'opacity'); fadein.execute(element); expect(util.opacity.mostRecentCall.args[1]).toEqual(1); }); });

22. Spies describe("execute fadein", function() { it("should eventually set opacity to 1", function () { varelement = document.createElement("div"); spyOn(window, 'setTimeout').andCallFake( function(callback) { callback(); }); spyOn(util, 'opacity'); fadein.execute(element); expect(util.opacity.mostRecentCall.args[1]).toEqual(1); }); });

23. Spies describe("execute fadein", function() { it("should eventually set opacity to 1", function () { varelement = document.createElement("div"); spyOn(window, 'setTimeout').andCallFake( function(callback) { callback(); }); spyOn(util, 'opacity'); fadein.execute(element); expect(util.opacity.mostRecentCall.args[1]).toEqual(1); }); }); Arrange

24. Spies describe("execute fadein", function() { it("should eventually set opacity to 1", function () { varelement = document.createElement("div"); spyOn(window, 'setTimeout').andCallFake( function(callback) { callback(); }); spyOn(util, 'opacity'); fadein.execute(element); expect(util.opacity.mostRecentCall.args[1]).toEqual(1); }); }); Arrange // waitsfor 'delay' seconds // thencallscallback window.setTimeout = function (callback, delay) { ... };

25. Spies describe("execute fadein", function() { it("should eventually set opacity to 1", function () { varelement = document.createElement("div"); spyOn(window, 'setTimeout').andCallFake( function(callback) { callback(); }); spyOn(util, 'opacity'); fadein.execute(element); expect(util.opacity.mostRecentCall.args[1]).toEqual(1); }); }); Arrange // setopacityof 'element' to 'opacity' util.opacity = function (element, opacity) { ... };

26. Spies describe("execute fadein", function() { it("should eventually set opacity to 1", function () { varelement = document.createElement("div"); spyOn(window, 'setTimeout').andCallFake( function(callback) { callback(); }); spyOn(util, 'opacity'); fadein.execute(element); expect(util.opacity.mostRecentCall.args[1]).toEqual(1); }); }); Act

27. Spies describe("execute fadein", function() { it("should eventually set opacity to 1", function () { varelement = document.createElement("div"); spyOn(window, 'setTimeout').andCallFake( function(callback) { callback(); }); spyOn(util, 'opacity'); fadein.execute(element); expect(util.opacity.mostRecentCall.args[1]).toEqual(1); }); }); // setopacityof 'element' to 'opacity' util.opacity = function (element, opacity) { ... }; Assert

28. Funktionen von Spies

29. Matcher für Spies Eigenschaften von Spies

30. Asynchrone Tests

31. 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); }); }); Asynchrone Tests

32. 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); }); }); Asynchrone Tests Arrange

33. 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); }); }); Asynchrone Tests Act

34. 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); }); }); Asynchrone Tests Wait... // setopacityof 'element' to 'opacity' util.opacity = function (element, opacity) { ... };

35. 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); }); }); Asynchrone Tests Assert

36. UI-Tests

38. it("should fade in hello div on buttonclick", function () { varwin, field, button; loadHtml("/js-fadein/index.html"); runs(function() { win = testwindow(); field = win.document.getElementById('hello'); button = win.document.getElementById('fadein'); }); runs(function () { expect(win.util.opacity(field)).toEqual(0); jasmine.ui.simulate(button, 'click'); }); waitsForAsync(); runs(function () { expect(win.util.opacity(field)).toEqual(1); }); }); UI-Test mit Jasmine-UI

39. it("should fade in hello div on buttonclick", function () { varwin, field, button; loadHtml("/js-fadein/index.html"); runs(function() { win = testwindow(); field = win.document.getElementById('hello'); button = win.document.getElementById('fadein'); }); runs(function () { expect(win.util.opacity(field)).toEqual(0); jasmine.ui.simulate(button, 'click'); }); waitsForAsync(); runs(function () { expect(win.util.opacity(field)).toEqual(1); }); }); The indexpage... UI-Test mit Jasmine-UI

40. it("should fade in hello div on buttonclick", function () { varwin, field, button; loadHtml("/js-fadein/index.html"); runs(function() { win = testwindow(); field = win.document.getElementById('hello'); button = win.document.getElementById('fadein'); }); runs(function () { expect(win.util.opacity(field)).toEqual(0); jasmine.ui.simulate(button, 'click'); }); waitsForAsync(); runs(function () { expect(win.util.opacity(field)).toEqual(1); }); }); Arrange, Part 1 UI-Test mit Jasmine-UI

41. it("should fade in hello div on buttonclick", function () { varwin, field, button; loadHtml("/js-fadein/index.html"); runs(function() { win = testwindow(); field = win.document.getElementById('hello'); button = win.document.getElementById('fadein'); }); runs(function () { expect(win.util.opacity(field)).toEqual(0); jasmine.ui.simulate(button, 'click'); }); waitsForAsync(); runs(function () { expect(win.util.opacity(field)).toEqual(1); }); }); Arrange, Part 2 UI-Test mit Jasmine-UI

42. it("should fade in hello div on buttonclick", function () { varwin, field, button; loadHtml("/js-fadein/index.html"); runs(function() { win = testwindow(); field = win.document.getElementById('hello'); button = win.document.getElementById('fadein'); }); runs(function () { expect(win.util.opacity(field)).toEqual(0); jasmine.ui.simulate(button, 'click'); }); waitsForAsync(); runs(function () { expect(win.util.opacity(field)).toEqual(1); }); }); Act UI-Test mit Jasmine-UI

43. it("should fade in hello div on buttonclick", function () { varwin, field, button; loadHtml("/js-fadein/index.html"); runs(function() { win = testwindow(); field = win.document.getElementById('hello'); button = win.document.getElementById('fadein'); }); runs(function () { expect(win.util.opacity(field)).toEqual(0); jasmine.ui.simulate(button, 'click'); }); waitsForAsync(); runs(function () { expect(win.util.opacity(field)).toEqual(1); }); }); Wait... UI-Test mit Jasmine-UI

44. it("should fade in hello div on buttonclick", function () { varwin, field, button; loadHtml("/js-fadein/index.html"); runs(function() { win = testwindow(); field = win.document.getElementById('hello'); button = win.document.getElementById('fadein'); }); runs(function () { expect(win.util.opacity(field)).toEqual(0); jasmine.ui.simulate(button, 'click'); }); waitsForAsync(); runs(function () { expect(win.util.opacity(field)).toEqual(1); }); }); Assert UI-Test mit Jasmine-UI

45. Testausführung automatisieren

47. Browser fernsteuern

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

49. Demo: JsTestDriver

50. Fazit Es gibt ein umfangreiches Toolset zum Testen von JavaScript-Code. Testen Sie Ihren Code! Testen Sie insbesondere Ihren JavaScript-Code! Sie haben keine Ausrede...

51. Links

52. saturatedwriting (ByEduordo, http://www.flickr.com/photos/tnarik/366393127/) Smiley Keyboard (By~Prescott, http://www.flickr.com/photos/ppym1/93571524/) Spyhole, Paris (Bysmithofsmiths, http://www.flickr.com/photos/hesketh/232015302/) Sortasynchroniseddiving (By Aaron Retz, http://www.flickr.com/photos/aretz/309469339/)

53. StampCollector (ByC. Castillo, http://www.flickr.com/photos/carolinedecastillo/2750577684/) bios[bible] (ByGastev, http://www.flickr.com/photos/gastev/2174505811/) Day 276/365: in hotpursuit (By Tina Vega, http://www.flickr.com/photos/tinavega/3066602429/)

54. Vielen Dankfür Ihr Interesse!@tigbro@beezlebug