www.opitz-consulting.com/go/3-4-11
JavaScript ist eine sehr dynamische Sprache und verhält sich zudem je nach Browser unterschiedlich. Daher sind automatisierte Tests besonders wertvoll. Dieser Vortrag zeigt, wie Cross-Browser-Tests für JavaScript entwickelt werden können.
Die Java- und JavaScript-Experten Stefan Scheidt und Tobias Bosch von OPITZ CONSULTING präsentierten diesen Vortrag bei der Jax 2012 am 18.04.2012 in Mainz.
--
Sie möchten mobile Geschäftslösungen in Ihrem Unternehmen nutzen? Wir beraten Sie gerne. Lesen Sie hier mehr zu unseren Leistungen in diesem Bereich und informieren Sie sich zu unserem Workshop für die professionelle Web-App-Entwicklung mit JavaScript: www.opitz-consulting.com/go/3-4-898
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);
var mostRecentCall = util.opacity.mostRecentCall;
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");
spyOn(window, 'setTimeout').andCallFake(
function(callback) {
callback();
});
spyOn(util, 'opacity');
fadein.execute(element);
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");
spyOn(window, 'setTimeout').andCallFake(
function(callback) {
callback();
});
spyOn(util, 'opacity');
fadein.execute(element);
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");
spyOn(window, 'setTimeout').andCallFake(
function(callback) {
callback();
});
spyOn(util, 'opacity');
fadein.execute(element);
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 () {
var element = document.createElement("div");
spyOn(window,set opacity of 'element' to 'opacity'
// 'setTimeout').andCallFake(
util.opacity = function (element, opacity) {
function(callback) {
...
callback();
};
});
spyOn(util, 'opacity');
fadein.execute(element);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});
27. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
spyOn(window, 'setTimeout').andCallFake(
function(callback) {
callback();
});
spyOn(util, 'opacity');
fadein.execute(element);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});
28. Spies
describe("execute fadein", function() {
it("should eventually set opacity to 1", function () {
var element = document.createElement("div");
spyOn(window,set opacity of 'element' to 'opacity'
// 'setTimeout').andCallFake(
function(callback) = function (element, opacity) {
util.opacity {
...
callback();
}); };
spyOn(util, 'opacity');
fadein.execute(element);
var mostRecentCall = util.opacity.mostRecentCall;
expect(mostRecentCall.args[0]).toBe(element);
expect(mostRecentCall.args[1]).toEqual(1);
});
});
29. Funktion Der Spy soll ...
spy.andCallThrough()
... die ursprüngliche Funktion
aufrufen
... das übergebene Argumente
spy.andReturn(argument)
zurückgeben
... die übergebene Exception
spy.andThrow(exception)
werfen
spy.andCallFake(function)
... die übergebene Funktion
aufrufen
Funktionen von Spies
30. Funktion Prüft, ob der Spy ...
toHaveBeenCalled() ... aufrufen wurde
... mit den übergebenen
toHaveBeenCalledWith(args)
Argumenten aufgerufen wurde
Matcher für Spies
Funktion Bedeutung
spy.callCount Anzahl der Aufrufe
spy.argsForCall[i] Argumente des i-ten Aufrufs
spy.mostRecentCall.args Argumente des letzten Aufrufs
Eigenschaften von Spies
32. Asynchrone 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. Asynchrone 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);
});
});
34. Asynchrone 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. Asynchrone 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)
}); ...
}); };
36. Asynchrone 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);
});
});
45. Pro Contra Beispiele
- Schwerer zu
Im Laufen in QUnit
automatisieren
Browser Produktions- YUI Test
testen - Schwerer in CI
umgebung Jasmine
einzubetten
- Leicht zu Envjs
Headless automatisieren Browser wird PhantomJS
Browser - Leicht in CI nur simuliert Zombie.js
einzubetten HtmlUnit
49. 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. 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/)
52. 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/)