How to test your JavaScript - TDD and BDD possible
1. How to test your JavaScript
TDD and BDD possible
Felix Müller
29.03.2012
2. Mein Background
► adesso AG, Studentischer Mitarbeiter
► Softwareentwickler
► Twitter: @fmueller_bln
► Mail: felix.mueller@adesso.de
29.03.2012 2 How to test your JavaScript – TDD and BDD possible
3. Agenda
Professionelle Softwareentwicklung
JavaScript
QUnit
Jasmine
Fazit
29.03.2012 3 How to test your JavaScript – TDD and BDD possible
6. Professionelle Softwareentwicklung – TDD & BDD
Test Driven Development Behaviour Driven Development
► Test-first Development ► Kam nach TDD auf
► Red – Green – Cycle ► Kommuniziert direkt die Anforderungen
an Feature, Komponente oder Klasse
► Ermöglicht stetiges Refactoren
► Tests sind ausdrucksstärker
► Führt zu lose gekoppelten Systemen ► Tests besser lesbar
► Common Practice (…hoffentlich!)
29.03.2012 6 How to test your JavaScript – TDD and BDD possible
7. Professionelle Softwareentwicklung – TDD
Quelle: http://blog.m.artins.net/tdd-listen-to-the-tests-they-tell-smells-in-your-code/
29.03.2012 7 How to test your JavaScript – TDD and BDD possible
9. JavaScript – bisher
► Schlechtes Standing in der Java-Welt („Spielzeugsprache“)
► Jeder hat mal ein paar Zeilen geschrieben für visuelle Effekte, Validierung, Ajax
► Kaum Modularisierung oft Spaghetticode nach üblichen Maßstäben
► In den letzten Jahren gab es einen Wandel! (außerhalb der Java-Welt)
29.03.2012 9 How to test your JavaScript – TDD and BDD possible
11. JavaScript – TDD & BDD
Sind Entwicklungstechniken wie
TDD und BDD möglich?
29.03.2012 11 How to test your JavaScript – TDD and BDD possible
12. JavaScript – TDD & BDD
Ja: QUnit und Jasmine
29.03.2012 12 How to test your JavaScript – TDD and BDD possible
13. QUnit
► JavaScript Library für Unit Tests
► Aktuelle Version: 1.4.0 (9. März 2012, ~weekly Updates)
► Ursprüngliche Nutzung zum Testen von jQuery
► Sehr einfache Nutzung: qunit.css und qunit.js in HTML-Datei einbinden
29.03.2012 13 How to test your JavaScript – TDD and BDD possible
14. QUnit
29.03.2012 14 How to test your JavaScript – TDD and BDD possible
15. QUnit
► Markup für eine QUnit Testdatei
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
test markup, will be hidden
</div>
</body>
29.03.2012 15 How to test your JavaScript – TDD and BDD possible
16. QUnit
► The first test
// test(name, expected, block)
test('some other test', function() {
expect(2);
equal(true, false, 'failing test');
equal(true, true, 'passing test');
});
29.03.2012 16 How to test your JavaScript – TDD and BDD possible
17. QUnit
► Assertions
ok(state, message) // is true?
// ==
equal(actual, expected, message)
notEqual(actual, expected, message)
// ===
deepEqual(actual, expected, message)
notDeepEqual(actual, expected, message)
// ===
strictEqual(actual, expected, message)
notStrictEqual(actual, expected, message)
raises(block, expected, message)
29.03.2012 17 How to test your JavaScript – TDD and BDD possible
18. QUnit
► Module und Lifecycle Callbacks
module('module1', {
setup: function() {
this.testData = 'foobar';
},
teardown: function() {
this.testData = '';
}
});
test('test with setup and teardown', function() {
expect(1);
equal(this.testData, 'foobar');
});
module('module2'); // ...
29.03.2012 18 How to test your JavaScript – TDD and BDD possible
19. QUnit
► Test mit Asynchronität
test('jQuery.ajax() - success callback', function() {
expect(1);
jQuery.ajaxSetup({ timeout: 0 });
stop();
jQuery.ajax({
url: url('data/name.html'),
success: function(){ ok(true, 'success'); start(); },
error: function(){ ok(false, 'error'); }
});
});
29.03.2012 19 How to test your JavaScript – TDD and BDD possible
20. Jasmine
► JavaScript Library für Behaviour Driven Development
► Aktuelle Version: 1.1.0
► Beschreibung von Spezifikationen
► Auch Mocking möglich, neben Assertions und Lifecycle Callbacks wie bei QUnit
► Ausführung durch Verlinken der Skripte in SpecRunner.html
29.03.2012 20 How to test your JavaScript – TDD and BDD possible
21. Jasmine
► Unsere Domäne
function Customer() {
this.age = 18;
};
Customer.prototype.incrementAge = function() {
this.age++;
};
Customer.prototype.celebrateBirthday = function() {
this.incrementAge();
};
29.03.2012 21 How to test your JavaScript – TDD and BDD possible
22. Jasmine
29.03.2012 22 How to test your JavaScript – TDD and BDD possible
23. Jasmine
► The first spec
describe('As a customer', function() {
var dude;
beforeEach(function() {
dude = new Customer();
});
it('I should be able to celebrate my birthday',
function() {
var ageBeforeBirthday = dude.age;
dude.celebrateBirthday();
expect(dude.age).toEqual(ageBeforeBirthday + 1);
});
});
29.03.2012 23 How to test your JavaScript – TDD and BDD possible
24. Jasmine
► Eigene Matcher definieren ausdrucksstarke Specs
this.addMatchers({
toBeAdult: function() {
this.message = function() {
return 'Expected ' + this.actual + ' to be adult';
}
return this.actual.age >= 18;
}
});
// enables us to say this
expect(dude).toBeAdult();
29.03.2012 24 How to test your JavaScript – TDD and BDD possible
25. Jasmine
► Spies zum Mocken und Stubben
describe('As a customer', function() {
// dude, beforeEach...
describe('when celebrating birthday', function() {
it('should incrementAge only once', function() {
spyOn(dude, 'incrementAge');
dude.celebrateBirthday();
expect(dude.incrementAge).toHaveBeenCalled();
expect(dude.incrementAge.callCount).toBe(1);
});
});
});
29.03.2012 25 How to test your JavaScript – TDD and BDD possible
26. Jasmine
► Mögliche Rückgabewerte von Spies
// default: call the underlying method
spyOn(x, 'method').andCallThrough();
// to return a value
spyOn(x, 'method').andReturn(arguments);
// to throw an exception
spyOn(x, 'method').andThrow(exception);
// to provide fake implementation
spyOn(x, 'method').andCallFake(function);
29.03.2012 26 How to test your JavaScript – TDD and BDD possible
27. Fazit
TDD und BDD sind möglich
mit JavaScript!
29.03.2012 27 How to test your JavaScript – TDD and BDD possible
28. Fazit
29.03.2012 28 How to test your JavaScript – TDD and BDD possible
29. Fazit
► QUnit einfache Unit Test Library
► Jasmine ermöglicht ausdrucksstarke Tests und Mocking
► Integration in Java Build Tools wie Maven?
> js-test-driver
> phantomjs-qunit-runner
> jasmine-maven-plugin
29.03.2012 29 How to test your JavaScript – TDD and BDD possible
30. Vielen Dank für die Aufmerksamkeit.
Fragen?
info@adesso.de
www.adesso.de