How to test your JavaScript - TDD and BDD possible

How to test your JavaScript
TDD and BDD possible

Felix Müller

29.03.2012

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

Agenda

Professionelle Softwareentwicklung

JavaScript

QUnit

Jasmine

Fazit

Professionelle Softwareentwicklung


Professionelle Softwareentwicklung – Anti-Pattern


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!)


Professionelle Softwareentwicklung – TDD

Quelle: http://blog.m.artins.net/tdd-listen-to-the-tests-they-tell-smells-in-your-code/


Professionelle Softwareentwicklung – TDD & ATDD

Quelle: http://ukstudio.jp/


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)


JavaScript – everywhere


JavaScript – TDD & BDD

Sind Entwicklungstechniken wie
TDD und BDD möglich?


JavaScript – TDD & BDD

Ja: QUnit und Jasmine


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


QUnit


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>


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');
});


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)


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'); // ...


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'); }
});
});


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


Jasmine

► Unsere Domäne

function Customer() {
this.age = 18;
};

Customer.prototype.incrementAge = function() {
this.age++;
};

Customer.prototype.celebrateBirthday = function() {
this.incrementAge();
};


Jasmine


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);
});
});


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();


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);
});
});
});


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);


Fazit

TDD und BDD sind möglich
mit JavaScript!


Fazit


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


Vielen Dank für die Aufmerksamkeit.

Fragen?

info@adesso.de
www.adesso.de

How to test your JavaScript - TDD and BDD possible

Weitere ähnliche Inhalte

Ähnlich wie How to test your JavaScript - TDD and BDD possible (20)

How to test your JavaScript - TDD and BDD possible