How to test your JavaScript - TDD and BDD possible

29.03.2012

How to test your JavaScript

TDD and BDD possible

Felix Müller

Mein Background

► adesso AG, Studentischer Mitarbeiter

► Softwareentwickler

► Twitter: @fmueller_bln

► Mail: [email protected]

29.03.2012 How to test your JavaScript – TDD and BDD possible 2

Agenda

Professionelle Softwareentwicklung

JavaScript

QUnit

Jasmine

Fazit


Professionelle Softwareentwicklung


Professionelle Softwareentwicklung – Anti-Pattern


Professionelle Softwareentwicklung – TDD & BDD

Test Driven Development

► Test-first Development

► Red – Green – Cycle

► Ermöglicht stetiges Refactoren

► Führt zu lose gekoppelten Systemen

► Common Practice (…hoffentlich!)

Behaviour Driven Development

► Kam nach TDD auf

► Kommuniziert direkt die Anforderungen an Feature, Komponente oder Klasse

► Tests sind ausdrucksstärker

► Tests besser lesbar


Professionelle Softwareentwicklung – TDD


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

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





















Professionelle Softwareentwicklung – TDD & ATDD


Quelle: http://ukstudio.jp/

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?

www.adesso.de

[email protected]

http://www.adesso.de/

mailto:[email protected]

Technology

How to test your JavaScript - TDD and BDD possible