Test Driven Development mit JavaScript

KontextMotivationFrameworks

Aller Anfang ist schwerTipps für gute Tests

Mocks, Stubs und andere SpioneBuild Process

Go!

Test-Driven Development mit JavaScript

Vladimir Dobriakov

KarlsruheJS User Group, 1. Dezember 2011

Vladimir Dobriakov Test-Driven Development mit JavaScript




Go!

JavaScript





Go!

Desktop-Anwendung





Go!

Mobile Anwendung





Go!

Motivation





Go!

Vorteile von UnitTesting

Regression

Refactoring

Cross-Browser

Dokumentation

Bessere Schnittstellen





Go!

TDD

Ohne Ziel kein Weg





Go!

Verwandte

BDD und acceptance-TDD

Continuous Integration





Go!

Frameworks

und

Test Runner





Go!

In-Browser Frameworks

YUI Test for YUI

QUnit for jQuery

Test.AnotherWay for OpenLayers

qooxdoo

mein eigenes





Go!

Headless (Kommandozeile)

v8

phantomjs





Go!

JsTestDriver





Go!

JsTestDriver

kein HTML Container benötigt, Liste zur ladenden js Dateien

`gem install jstdutil`

assertions: assertEquals, assertElementId etc.





Go!

Eclipse, IDEA PlugIns





Go!

TestSwarm

http://testswarm.com/

von John Resig

gehostet bei Mozilla





Go!

Watir

http://watir.com (ruby based)





Go!

Jetzt anfangen!





Go!

jsTestDriver.conf

server: http://localhost:4224

load:− static/jquery.js− static/jj.js− static/*.js− static/js−test/*.js





Go!

Test Case

TestCase("mapMarkerTest", {"test agent disappears": function () {

loadAgentData();var n = count_agents();

loadNewData();

assertTrue( n != count_agents());},"test another thing": function () {}

}





Go!

Lerntests

keine Spec für JS, ECMA-262 zählt nicht

Programming by observation

GDD und Cargo Kult

relative Performance





Go!

HTML snippets

TestCase("mapMarkerTest", {setUp: function () {

/*:DOC +=<div class='post' id='map_wrapper'>

<div class='map' id='map'></div>

</div>*/

},





Go!

Tipps für gute Tests





Go!

Lesbarkeit

Namen - mit Leerzeichen

Intention (Was und Warum nicht Wie)

'should'

Leerzeile zwischen Setup, Machen, Prüfen

befreien von 'test' Pre�x





Go!

helper Beispiel

(function () {function example_agent_data() {}

TestCase("mapMarkerTest", {"test agent appears": function () {/* implementation using example_agent_data */

},"test agent disappears": function () {/* implementation using example_agent_data */

}}());





Go!

testCaseEnhanced von Christian Johansen

function testCaseEnhanced(name, tests) {var testMethods = {};var property;for (var testName in tests) {property = tests[testName];if (typeof property == "function" &&!/^(setUp|tearDown)$/.test(testName)) {testName = "test " + testName;

}testMethods[testName] = property;

}return TestCase(name, testMethods);

}Vladimir Dobriakov Test-Driven Development mit JavaScript




Go!

High level Abstractions

assertCalledWith von Sinon stubbing library

assertMapZoom(15) - domain speci�c assertion

domain speci�c helpers





Go!

DRY

nicht zu weit treiben

Redundanz, nicht die Klarheit verringern

genügend Kontext in den Test-Methoden beibehalten





Go!

Beispiel

"test agent appears": function () {loadInitialAgentData();assertMarkerCount(2);processAgentData(agent3_with_location());assertMarkerCount(3);

},"test agent disappears": function () {loadInitialAgentData();assertMarkerCount(2);processAgentData(agent2_without_location());assertMarkerCount(1);

}





Go!

Tests als Behavior Spec

'should'

nur ein Verhalten auf Einmal

jedes Verhalten nur ein Mal testen - denk an Wartung

die eingesetzten Frameworks nicht noch mal testen

Isolieren mit Mocks und Stubs





Go!

Tests testen

neuer Test muss ein Mal rot sein

Test zuerst schreiben





Go!

Break the Code

Variablen löschen

parameter-Werte ändern etc.

Test hinzufügen, der das Problem erfasst





Go!

Test Double





Go!

Zweck

unbequemes Interface vermeiden

spezielle Code-Pfad prüfen, die sonst schwer zu erreichen sind

insbesondere Probleme simulieren





Go!

stub

myproj.send_sms('+49 178 5555555', 'hello');





Go!

stub

myproj.send_sms('+49 178 5555555', 'hello');

myproj.send_sms = stubFn(true);postNewOrder('Repair X');assertTrue(myproj.send_sms.called);assertEquals('new order: Repair X', myproj.send_sms.args[1]);





Go!

stubFn

function stubFn(returnValue) {var fn = function () {fn.called = true;fn.args = arguments;return returnValue;

};

fn.called = false;

return fn;}





Go!

State vs. Behaviour Veri�cation





Go!

Sinon Library

http://sinonjs.org/

stubs

mocks

fake timers

fake XHR

fake server

assertions





Go!

Risiko von Mocks und Stubs

Javascript ist sehr dynamisch

sinon.stubEverything(target) verdeckt Typos





Go!

Build Process





Go!

precommit + continuous

Tests der Web-Anwendung

jslint

JsTestDriver

minify + merge

Integration Tests (z.B. Selenium)

Tests durch Menschen





Go!

jslint

für Produktions-Code

für die Tests

Teil von dem Build

Precommit





Go!

Integration Tests

JsTestDriver Tests ersetzen nicht die Integration-Tests

HTML Snippets

vom echten Server liefern oder nicht?





Go!

Menschliches Versagen





Go!

Go!





Go!

Kontakt

http://www.mobile-web-consulting.de/

http://www.geekq.net

http://twitter.com/#!/enterprise_geek

http://www.xing.com/pro�le/Vladimir_Dobriakov





Go!

Literatur

Douglas Crockford "JavaScript: The Good Parts"

Christian Johansen "Test-Driven JavaScript Development"





Go!

Bildernachweis

jslint http://www.�ickr.com/photos/codepo8/2051752263/

break http://www.�ickr.com/photos/mr_mo-fo/3570580386/

JsTestDriver Projekt Seitehttp://code.google.com/p/js-test-driver/

Wikipedia "Train wreck at Montparnasse_1895.jpg"


Test Driven Development mit JavaScript

Technology

Transcript of Test Driven Development mit JavaScript