SlideShare ist ein Scribd-Unternehmen logo
Best Practices für TDD 
mit JavaScript 
Rike / pixelio.de
WHO AM I? 
• Sebastian Springer 
• aus München 
• arbeite bei Mayflower 
• https://github.com/sspringer82 
• @basti_springer 
• Consultant, Trainer, Autor
Warum TDD? 
lichtkunst.73 / pixelio.de
Macht sich erst mittel- bis langfristig bezahlt. Initial 
verursachen Tests mehr Aufwand, als wenn nur Code 
geschrieben wird. Bei TDD entstehen die Tests vor dem 
eigentlichen Code. Geben Sicherheit beim Erweitern und 
Umbauen. Tests dokumentieren Quellcode.
Tools & Setup 
Stefan Bayer / pixelio.de
Für JavaScript-Testing im Frontend benötigt man ein Test- 
Framework, das die Formulierung von Tests ermöglicht. 
Zusätzlich zum Test-Framework ist eine Infrastruktur 
erforderlich, die Tests auf verschiedenen Browsern und 
Automatisierung ermöglicht.
Test-Frameworks 
Häufig eingesetzte Frameworks für JavaScript-Testing: 
• Jasmine (http://jasmine.github.io/) 
• Mocha (http://visionmedia.github.io/mocha/) 
• qunit (http://qunitjs.com/)
Jasmine 
describe(‘Calculator’, function() { 
beforeEach(function() {…}); 
afterEach(function() {…}); 
it(‘should add 1 and 1’, function(done) { 
… 
done(); 
}); 
})
Infrastruktur 
Häufig eingesetzte Test-Runner für JavaScript-Testing: 
• Karma (http://karma-runner.github.io/) 
• Testem (https://github.com/airportyh/testem)
Infrastruktur
Tripple A 
Wolfgang Dirscherl / pixelio.de
Tripple A 
var calc = new Calculator(); 
var result = calc.add(1, 1); 
expect(result).toBe(2); 
Arrange 
Act 
Assert
Red, Green, Refactor 
Rolf Handke / pixelio.de
Red 
Write a failing test. 
Die Erwartungshaltung bzw. das zu erreichende Ziel wird als 
Test formuliert. Der Test schlägt fehl.
Red 
describe(‘Calculator’, function() { 
it(‘should add 1 and 1’, function() { 
var calc = new Calculator(); 
var result = calc.add(1,1); 
expect(result).toBe(2); 
}); 
});
Red 
$ karma run 
[2014-10-15 13:08:56.773] [DEBUG] config - Loading config /karma.conf.js 
Chrome 38.0.2125 (Mac OS X 10.9.5) Calculator should add 1 and 1 FAILED 
ReferenceError: Calculator is not defined 
at Object.<anonymous> (/spec/calc.spec.js:3:24) 
Chrome 38.0.2125 (Mac OS X 10.9.5): Executed 1 of 1 (1 FAILED) ERROR 
(0.021 secs / 0.002 secs)
Green 
Make your tests work. 
In diesem Schritt unternimmt man alles, um den 
fehlschlagenden Test grün zu bekommen. Hier sollte der 
kürzeste und schnellstmögliche Weg gewählt werden. 
Einfache Probleme können direkt gelöst werden. 
Umfangreichere Probleme werden durch einen Fake 
(einfaches Return) gelöst.
Green 
function Calculator() {} 
Calculator.prototype.add = function(a, b) { 
return a + b; 
};
Green 
$ karma run 
[2014-10-15 13:15:51.258] [DEBUG] config - Loading config /karma.conf.js 
Chrome 38.0.2125 (Mac OS X 10.9.5): Executed 1 of 1 SUCCESS (0.019 secs / 
0.001 secs)
Refactor 
Reduce redundancy. 
Duplikate im Code entfernen. Im Idealfall durch 
Zusammenfassung und Auslagerung. Gilt sowohl für 
Produktivcode als auch für Tests. 
Nicht optimale Implementierungen verbessern. 
Immer nur bei grünen Tests durchführen!
Refactor 
describe('Calculator', function() { 
var calc; 
beforeEach(function() { 
calc = new Calculator(); 
}); 
it('should add 1 and 1', function() { 
var result = calc.add(1,1); 
expect(result).toBe(2); 
}); 
it('should subtract 1 from 2', function(){…}) 
});
Refactor 
$ karma run 
[2014-10-15 13:15:51.258] [DEBUG] config - Loading config /karma.conf.js 
Chrome 38.0.2125 (Mac OS X 10.9.5): Executed 2 of 2 SUCCESS (0.019 secs / 
0.001 secs)
TDD und 
Frameworks? 
RRikikee // ppixixeeliloio..ddee
TDD und Frameworks 
TDD mit JavaScript funktioniert auch, wenn die Applikation mit 
einem Framework wie Angular, Backbone oder Ember 
erstellt ist. 
Also keine Ausreden! - ;) 
Manche Frameworks (z.B. Angular) unterstützen Entwickler 
sogar bei der testgetriebenen Entwicklung von 
Applikationen.
Automatisierung 
Dieter Schütz / pixelio.de
Automatisierung 
Automatisierung in der Entwicklungsumgebung. Tests 
werden automatisch beim Speichern ausgeführt. 
Automatisierung in der Continuous Integration. grunt-karma 
Plugin für Grunt nutzen. Tests werden beim Push ins 
Repository ausgeführt.
Kurze Laufzeit 
Lothar Henke / pixelio.de
Kurze Laufzeit 
Tests, die lange laufen, werden nicht häufig ausgeführt. 
Werden die Tests nicht ausgeführt, leidet die Qualität.
Three out of four 
Timo Klostermeier / pixelio.de
Three out of four 
Seid nie mehr als eine Änderung von grünen Tests 
entfernt! 
Auch wenn Umbaumaßnahmen erforderlich sind. 
Die Applikation sollte immer in möglichst kleinen 
überschaubaren Schritten umgebaut werden, ansonsten 
bringen die Tests nichts. 100 fehlschlagende Tests sind keine 
Hilfe, sondern eher ein Hindernis.
Obvious Implementation 
& Baby Steps 
lichtkunst.73 / pixelio.de
Obvious Implementation & 
Baby Steps 
Jeder bestimmt selbst, was offensichtlich ist und nicht 
getestet werden muss. Auch die Schrittweite bei den Tests 
muss jeder selbst festlegen. 
Grundsätzlich gilt allerdings: Alles, was potenziell kaputt 
gehen kann, muss getestet werden. 
Wird man vom Verhalten der Applikation überrascht, sollte 
man auf jeden Fall einen Test schreiben.
Codequalität 
Bernd Kasper / pixelio.de
Codequalität 
Die Tests existieren länger als der eigentliche Quellcode. Für 
die Tests sollten die gleichen Qualitätskriterien gelten wie für 
den eigentlichen Quellcode. 
Die Wartbarkeit und Erweiterbarkeit der Tests müssen 
erhalten bleiben.
Test Doubles 
Regina Kaute / pixelio.de
Spy 
Gabi Eder / pixelio.de
Spy 
Wrapper um eine Funktion. Aufrufe werden direkt an die 
ursprüngliche Funktion weitergeleitet. Aufrufe werden 
aufgezeichnet. 
Spy-Objekt kann später abgefragt werden. 
Spys sollten später zurückgesetzt werden.
Spy 
it("should create a spy for a method", function () { 
var myObj = { 
name: 'Klaus', 
getName: function () { 
return this.name; 
} 
}; 
var spy = sinon.spy(myObj, 'getName'); 
myObj.getName(); 
expect(spy.calledOnce).toBeTruthy(); 
myObj.getName.restore(); 
});
Stub 
Bernd Kasper / pixelio.de
Stub 
Wrapper um eine Funktion wie Spys. Weisen ein definiertes 
Verhalten auf. Leiten den Aufruf nicht direkt an die 
ursprüngliche Funktion weiter. 
Reduzieren Abhängigkeiten und vereinfachen 
Testumgebungen.
Stub 
it('should return and throw', function () { 
var myObj = { 
getName: function () {}, 
setName: function () {} 
} 
var stub1 = sinon.stub(myObj, 'getName').returns('Klaus'); 
var stub2 = sinon.stub(myObj, ‘setName').throws( 
new Error(‘BOOH!’) 
); 
expect(stub1()).toBe('Klaus'); 
});
Mock 
Andreas Morlok / pixelio.de
Mock 
Ebenfalls Wrapper um eine Funktion. Dienen dazu, die 
korrekte Verwendung einer Funktion sicherzustellen. Wird 
die Funktion nicht korrekt verwendet, wird eine Exception 
geworfen. 
Best Practice: Nicht mehr als ein Mock pro Test.
Mock 
it ('should work with mocks', function () { 
var myObj = { 
name: 'Klaus', 
getName: function () { 
return this.name; 
} 
} 
var mock = sinon.mock(myObj); 
mock.expects('getName').once(); 
myObj.getName(); 
myObj.getName(); 
mock.verify(); 
});
Timers 
Tim Reckmann / pixelio.de
Timers 
Die Zeit im Browser ist nicht vertrauenswürdig. 
Fake Timers für eine stabile Testumgebung. 
Bieten Kontrolle über Datum und Zeit.
Timers
Server 
cre8tive / pixelio.de
Server 
Wrapper um XMLHttpRequest bzw. ActiveXObject. Tests 
werden unabhängig von einer Server-Infrastruktur ausgeführt. 
Kontrolle über die Antworten des Fake Servers.
Server
Fixtures 
Harald Wanetschka / pixelio.de
Fixtures 
HTML-Struktur, die für die Tests benötigt wird. 
Unabhängigkeit der Tests soll verbessert werden. Durch 
vorbereitete Strukturen können Ausschnitte von Workflows 
getestet werden. 
Auslieferung von HTML über den html2js preprocessor von 
Karma. 
jasmine-jquery als Helper für den Umgang mit Fixtures.
Fixtures 
beforeEach(function () { 
$('body').append(window.__html__['fixtures/fx.html']); 
$('#registerForm').on('submit', validate); 
}); 
it ("should show four messages", function () { 
$('#firstname').val('Klaus'); 
$('#registerForm').submit(); 
expect($('.message.visible').length).toBe(4); 
});
TDD in bestehenden 
Projekten?: 
S. Hofschlaeger / pixelio.de
Nicht alle Tests auf 
einmal nachziehen! 
Stephan Bratek/geralt / pixelio.de
Schnittstellen schaffen 
Tim Reckmann / pixelio.de
Boy Scout Rule 
source code 
Always leave the campground cleaner than you found it. 
piu700 / pixelio.de
Fragen? 
Rainer Sturm / pixelio.de
KONTAKT 
Sebastian Springer 
sebastian.springer@mayflower.de 
Mayflower GmbH 
Mannhardtstr. 6 
80538 München 
Deutschland 
@basti_springer 
https://github.com/sspringer82

Weitere ähnliche Inhalte

Was ist angesagt?

Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)
Joachim Baumann
 
Magento 2 Zertifizierung - Wissenswertes und ein paar Tipps
Magento 2 Zertifizierung - Wissenswertes und ein paar TippsMagento 2 Zertifizierung - Wissenswertes und ein paar Tipps
Magento 2 Zertifizierung - Wissenswertes und ein paar Tipps
Christian Münch
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
Christian Mücke
 
TDD für Testmuffel
TDD für TestmuffelTDD für Testmuffel
TDD für Testmuffel
Hendrik Lösch
 
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebContinuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Andreas Schmidt
 
PHPUnit - Eine kurze Einführung
PHPUnit - Eine kurze EinführungPHPUnit - Eine kurze Einführung
PHPUnit - Eine kurze Einführung
frankstaude
 
Unit Tests für Totalverweigerer
Unit Tests für TotalverweigererUnit Tests für Totalverweigerer
Unit Tests für TotalverweigererPeter Hauke
 
Continuous Delivery
Continuous DeliveryContinuous Delivery
Continuous Delivery
Steffen Gebert
 
Test-driven Development mit TYPO3
Test-driven Development mit TYPO3Test-driven Development mit TYPO3
Test-driven Development mit TYPO3Oliver Klee
 
Arquillian
ArquillianArquillian
Arquillian
Korhan Gülseven
 
Wann lohnt sich Software Testautomatisierung?
Wann lohnt sich Software Testautomatisierung?Wann lohnt sich Software Testautomatisierung?
Wann lohnt sich Software Testautomatisierung?
Claudia Baur
 
Brownbag: Java Applikationen und die JVM für „Ops“
Brownbag: Java Applikationen und die JVM für „Ops“Brownbag: Java Applikationen und die JVM für „Ops“
Brownbag: Java Applikationen und die JVM für „Ops“
inovex GmbH
 
Testen im EE-Umfeld – Seien Sie feige!
Testen im EE-Umfeld – Seien Sie feige!Testen im EE-Umfeld – Seien Sie feige!
Testen im EE-Umfeld – Seien Sie feige!
gedoplan
 

Was ist angesagt? (13)

Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)
 
Magento 2 Zertifizierung - Wissenswertes und ein paar Tipps
Magento 2 Zertifizierung - Wissenswertes und ein paar TippsMagento 2 Zertifizierung - Wissenswertes und ein paar Tipps
Magento 2 Zertifizierung - Wissenswertes und ein paar Tipps
 
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
GitLab: CI-Pipelines | PHP Usergroup Hamburg 20.03.2018
 
TDD für Testmuffel
TDD für TestmuffelTDD für Testmuffel
TDD für Testmuffel
 
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im BetriebContinuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
Continuous Lifecycle 2013: Testgetriebenes Arbeiten im Betrieb
 
PHPUnit - Eine kurze Einführung
PHPUnit - Eine kurze EinführungPHPUnit - Eine kurze Einführung
PHPUnit - Eine kurze Einführung
 
Unit Tests für Totalverweigerer
Unit Tests für TotalverweigererUnit Tests für Totalverweigerer
Unit Tests für Totalverweigerer
 
Continuous Delivery
Continuous DeliveryContinuous Delivery
Continuous Delivery
 
Test-driven Development mit TYPO3
Test-driven Development mit TYPO3Test-driven Development mit TYPO3
Test-driven Development mit TYPO3
 
Arquillian
ArquillianArquillian
Arquillian
 
Wann lohnt sich Software Testautomatisierung?
Wann lohnt sich Software Testautomatisierung?Wann lohnt sich Software Testautomatisierung?
Wann lohnt sich Software Testautomatisierung?
 
Brownbag: Java Applikationen und die JVM für „Ops“
Brownbag: Java Applikationen und die JVM für „Ops“Brownbag: Java Applikationen und die JVM für „Ops“
Brownbag: Java Applikationen und die JVM für „Ops“
 
Testen im EE-Umfeld – Seien Sie feige!
Testen im EE-Umfeld – Seien Sie feige!Testen im EE-Umfeld – Seien Sie feige!
Testen im EE-Umfeld – Seien Sie feige!
 

Andere mochten auch

Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...
Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...
Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...
Greater Nashua Chamber
 
Power point calidad t1
Power point calidad t1Power point calidad t1
Power point calidad t1
turismomairena
 
Marketing Plan For Art Studio
Marketing Plan For Art StudioMarketing Plan For Art Studio
Marketing Plan For Art Studio
Tiffany2116
 
recocha
recocharecocha
recocha
mardaya
 
El Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negocios
El Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negociosEl Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negocios
El Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negocios
Adigital
 
Janta ka aaina 2 sept (8)
Janta ka aaina 2 sept (8)Janta ka aaina 2 sept (8)
Janta ka aaina 2 sept (8)Janta Ka Aaina
 
musica del mundo :) Estrella
musica del mundo :) Estrellamusica del mundo :) Estrella
musica del mundo :) Estrella
estrellitasampedrosampedro
 
Rae ley 100
Rae ley 100Rae ley 100
Rae ley 100
Andres Rojas
 
5 maneras de gastar menos en tus mudanzas
5 maneras de gastar menos en tus mudanzas5 maneras de gastar menos en tus mudanzas
5 maneras de gastar menos en tus mudanzas
MudanzaEconomica EIRL
 
El caso de EUROESTÉTICA, una marca innovadora con proyección internacional
El caso de EUROESTÉTICA, una marca innovadora con proyección internacionalEl caso de EUROESTÉTICA, una marca innovadora con proyección internacional
El caso de EUROESTÉTICA, una marca innovadora con proyección internacional
TACTIO
 
Frutas3
Frutas3Frutas3
Frutas3
hector_laki
 
Club de exportadores agosto (2)
Club de exportadores   agosto (2)Club de exportadores   agosto (2)
Club de exportadores agosto (2)
Cadex Comercio Internacional, S.L.
 
Presentación1111
Presentación1111Presentación1111
Presentación1111
enojados
 
The Challenges Facing Local CIOs | Geoff Connell | March 2016
The Challenges Facing Local CIOs | Geoff Connell | March 2016The Challenges Facing Local CIOs | Geoff Connell | March 2016
The Challenges Facing Local CIOs | Geoff Connell | March 2016
Anna Fenston
 
A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...
A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...
A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...
Palmer Imbenzi
 
Adapro
AdaproAdapro
Los géneros de la tv y el orden del contacto
Los géneros de la tv y el orden del contactoLos géneros de la tv y el orden del contacto
Los géneros de la tv y el orden del contacto
Marina Sdb
 
Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!
Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!
Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!
Fernando Martínez Rivero
 
LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...
LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...
LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...
eAmbiente
 
05 gueelec04
05 gueelec0405 gueelec04
05 gueelec04
jsaavto_73
 

Andere mochten auch (20)

Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...
Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...
Greater Nashua Chamber of Commerce Legislative Symposium and Reception; Janua...
 
Power point calidad t1
Power point calidad t1Power point calidad t1
Power point calidad t1
 
Marketing Plan For Art Studio
Marketing Plan For Art StudioMarketing Plan For Art Studio
Marketing Plan For Art Studio
 
recocha
recocharecocha
recocha
 
El Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negocios
El Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negociosEl Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negocios
El Marketing y la Publicidad Móvil no pueden ser ignorados por nuestros negocios
 
Janta ka aaina 2 sept (8)
Janta ka aaina 2 sept (8)Janta ka aaina 2 sept (8)
Janta ka aaina 2 sept (8)
 
musica del mundo :) Estrella
musica del mundo :) Estrellamusica del mundo :) Estrella
musica del mundo :) Estrella
 
Rae ley 100
Rae ley 100Rae ley 100
Rae ley 100
 
5 maneras de gastar menos en tus mudanzas
5 maneras de gastar menos en tus mudanzas5 maneras de gastar menos en tus mudanzas
5 maneras de gastar menos en tus mudanzas
 
El caso de EUROESTÉTICA, una marca innovadora con proyección internacional
El caso de EUROESTÉTICA, una marca innovadora con proyección internacionalEl caso de EUROESTÉTICA, una marca innovadora con proyección internacional
El caso de EUROESTÉTICA, una marca innovadora con proyección internacional
 
Frutas3
Frutas3Frutas3
Frutas3
 
Club de exportadores agosto (2)
Club de exportadores   agosto (2)Club de exportadores   agosto (2)
Club de exportadores agosto (2)
 
Presentación1111
Presentación1111Presentación1111
Presentación1111
 
The Challenges Facing Local CIOs | Geoff Connell | March 2016
The Challenges Facing Local CIOs | Geoff Connell | March 2016The Challenges Facing Local CIOs | Geoff Connell | March 2016
The Challenges Facing Local CIOs | Geoff Connell | March 2016
 
A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...
A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...
A review on toxicity effects on Aconitum carmichaelii Debx (Chuan wu and Fuzi...
 
Adapro
AdaproAdapro
Adapro
 
Los géneros de la tv y el orden del contacto
Los géneros de la tv y el orden del contactoLos géneros de la tv y el orden del contacto
Los géneros de la tv y el orden del contacto
 
Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!
Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!
Los procesos de la vigilancia tecnológica soportados sobre el CMS Joomla!
 
LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...
LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...
LA VALUTAZIONE DEL RISCHIO RUMORE: NOVITÀ E CRITICITÀ INTRODOTTE DALLE PROCED...
 
05 gueelec04
05 gueelec0405 gueelec04
05 gueelec04
 

Ähnlich wie Best Practices für TDD in JavaScript

JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
Sebastian Springer
 
Automatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumAutomatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumBenjamin Schmid
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTdd
jlink
 
Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10
Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10
Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10Ralf Sigmund
 
Der Status Quo des Chaos Engineerings
Der Status Quo des Chaos EngineeringsDer Status Quo des Chaos Engineerings
Der Status Quo des Chaos Engineerings
QAware GmbH
 
Der Tod der Testpyramide? – Frontend-Testing mit Playwright
Der Tod der Testpyramide? – Frontend-Testing mit PlaywrightDer Tod der Testpyramide? – Frontend-Testing mit Playwright
Der Tod der Testpyramide? – Frontend-Testing mit Playwright
QAware GmbH
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
Sebastian Springer
 
Test-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetpro
Test-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetproTest-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetpro
Test-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetpro
IKS Gesellschaft für Informations- und Kommunikationssysteme mbH
 
Testgetriebene Softwareentwicklung
Testgetriebene SoftwareentwicklungTestgetriebene Softwareentwicklung
Testgetriebene Softwareentwicklung
jlink
 
Vagrant, Puppet, Docker für Entwickler und Architekten
Vagrant, Puppet, Docker für Entwickler und ArchitektenVagrant, Puppet, Docker für Entwickler und Architekten
Vagrant, Puppet, Docker für Entwickler und Architekten
OPITZ CONSULTING Deutschland
 
Next Level Unit Testing
Next Level Unit TestingNext Level Unit Testing
Next Level Unit Testing
Daniel Lehner
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
AOE
 
Chaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps TeamsChaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps Teams
Ramon Anger
 
Testen mit, durch und in Scrum
Testen mit, durch und in ScrumTesten mit, durch und in Scrum
Testen mit, durch und in Scrum
Frank Düsterbeck
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
Marc Müller
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Chaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps TeamsChaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps Teams
Ramon Anger
 
Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)
Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)
Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)
Peter Kirchner
 
Scaled Scrum bei der Post CH AG
Scaled Scrum bei der Post CH AGScaled Scrum bei der Post CH AG
Scaled Scrum bei der Post CH AG
Digicomp Academy AG
 

Ähnlich wie Best Practices für TDD in JavaScript (20)

JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
A/B Testing mit Node.js
A/B Testing mit Node.jsA/B Testing mit Node.js
A/B Testing mit Node.js
 
Automatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit SeleniumAutomatisierte GUI-Tests mit Selenium
Automatisierte GUI-Tests mit Selenium
 
AdvancedTdd
AdvancedTddAdvancedTdd
AdvancedTdd
 
Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10
Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10
Wjax integrationsprojekte auf dem weg zur continuous delivery 2011 11-10
 
Der Status Quo des Chaos Engineerings
Der Status Quo des Chaos EngineeringsDer Status Quo des Chaos Engineerings
Der Status Quo des Chaos Engineerings
 
Der Tod der Testpyramide? – Frontend-Testing mit Playwright
Der Tod der Testpyramide? – Frontend-Testing mit PlaywrightDer Tod der Testpyramide? – Frontend-Testing mit Playwright
Der Tod der Testpyramide? – Frontend-Testing mit Playwright
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 
Test-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetpro
Test-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetproTest-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetpro
Test-Automation mit Selenium WebDriver - ein Artikel der iks im dotnetpro
 
Testgetriebene Softwareentwicklung
Testgetriebene SoftwareentwicklungTestgetriebene Softwareentwicklung
Testgetriebene Softwareentwicklung
 
Vagrant, Puppet, Docker für Entwickler und Architekten
Vagrant, Puppet, Docker für Entwickler und ArchitektenVagrant, Puppet, Docker für Entwickler und Architekten
Vagrant, Puppet, Docker für Entwickler und Architekten
 
Next Level Unit Testing
Next Level Unit TestingNext Level Unit Testing
Next Level Unit Testing
 
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von AngrybirdCloud Deployment und (Auto)Scaling am Beispiel von Angrybird
Cloud Deployment und (Auto)Scaling am Beispiel von Angrybird
 
Chaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps TeamsChaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps Teams
 
Testen mit, durch und in Scrum
Testen mit, durch und in ScrumTesten mit, durch und in Scrum
Testen mit, durch und in Scrum
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Chaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps TeamsChaos Kata Fitnesstraining für DevOps Teams
Chaos Kata Fitnesstraining für DevOps Teams
 
Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)
Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)
Das eigene Test Lab, für jeden! (CeBIT-Edition mit Demo-Videos)
 
Scaled Scrum bei der Post CH AG
Scaled Scrum bei der Post CH AGScaled Scrum bei der Post CH AG
Scaled Scrum bei der Post CH AG
 

Mehr von Sebastian Springer

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
Sebastian Springer
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
Sebastian Springer
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
Sebastian Springer
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
Sebastian Springer
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
Sebastian Springer
 
Angular2
Angular2Angular2
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
Sebastian Springer
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
Sebastian Springer
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
Sebastian Springer
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
Sebastian Springer
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
Sebastian Springer
 
Typescript
TypescriptTypescript
Typescript
Sebastian Springer
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
Sebastian Springer
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Sebastian Springer
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
Sebastian Springer
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
Sebastian Springer
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
Sebastian Springer
 
Node.js
Node.jsNode.js
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
Sebastian Springer
 

Mehr von Sebastian Springer (20)

HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?HTMX - ist das die nächste Revolution im Web?
HTMX - ist das die nächste Revolution im Web?
 
Schnelleinstieg in Angular
Schnelleinstieg in AngularSchnelleinstieg in Angular
Schnelleinstieg in Angular
 
Creating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.jsCreating Enterprise Web Applications with Node.js
Creating Enterprise Web Applications with Node.js
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
From Zero to Hero – Web Performance
From Zero to Hero – Web PerformanceFrom Zero to Hero – Web Performance
From Zero to Hero – Web Performance
 
Angular2
Angular2Angular2
Angular2
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
 
Streams in Node.js
Streams in Node.jsStreams in Node.js
Streams in Node.js
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Node.js Security
Node.js SecurityNode.js Security
Node.js Security
 
Typescript
TypescriptTypescript
Typescript
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Warum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser machtWarum ECMAScript 6 die Welt ein Stückchen besser macht
Warum ECMAScript 6 die Welt ein Stückchen besser macht
 
Lean Startup mit JavaScript
Lean Startup mit JavaScriptLean Startup mit JavaScript
Lean Startup mit JavaScript
 
Webapplikationen mit Node.js
Webapplikationen mit Node.jsWebapplikationen mit Node.js
Webapplikationen mit Node.js
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Debugging und Profiling
Debugging und ProfilingDebugging und Profiling
Debugging und Profiling
 
Node.js
Node.jsNode.js
Node.js
 
JavaScript Architektur
JavaScript ArchitekturJavaScript Architektur
JavaScript Architektur
 

Best Practices für TDD in JavaScript

  • 1. Best Practices für TDD mit JavaScript Rike / pixelio.de
  • 2. WHO AM I? • Sebastian Springer • aus München • arbeite bei Mayflower • https://github.com/sspringer82 • @basti_springer • Consultant, Trainer, Autor
  • 4. Macht sich erst mittel- bis langfristig bezahlt. Initial verursachen Tests mehr Aufwand, als wenn nur Code geschrieben wird. Bei TDD entstehen die Tests vor dem eigentlichen Code. Geben Sicherheit beim Erweitern und Umbauen. Tests dokumentieren Quellcode.
  • 5. Tools & Setup Stefan Bayer / pixelio.de
  • 6. Für JavaScript-Testing im Frontend benötigt man ein Test- Framework, das die Formulierung von Tests ermöglicht. Zusätzlich zum Test-Framework ist eine Infrastruktur erforderlich, die Tests auf verschiedenen Browsern und Automatisierung ermöglicht.
  • 7. Test-Frameworks Häufig eingesetzte Frameworks für JavaScript-Testing: • Jasmine (http://jasmine.github.io/) • Mocha (http://visionmedia.github.io/mocha/) • qunit (http://qunitjs.com/)
  • 8. Jasmine describe(‘Calculator’, function() { beforeEach(function() {…}); afterEach(function() {…}); it(‘should add 1 and 1’, function(done) { … done(); }); })
  • 9. Infrastruktur Häufig eingesetzte Test-Runner für JavaScript-Testing: • Karma (http://karma-runner.github.io/) • Testem (https://github.com/airportyh/testem)
  • 11. Tripple A Wolfgang Dirscherl / pixelio.de
  • 12. Tripple A var calc = new Calculator(); var result = calc.add(1, 1); expect(result).toBe(2); Arrange Act Assert
  • 13. Red, Green, Refactor Rolf Handke / pixelio.de
  • 14. Red Write a failing test. Die Erwartungshaltung bzw. das zu erreichende Ziel wird als Test formuliert. Der Test schlägt fehl.
  • 15. Red describe(‘Calculator’, function() { it(‘should add 1 and 1’, function() { var calc = new Calculator(); var result = calc.add(1,1); expect(result).toBe(2); }); });
  • 16. Red $ karma run [2014-10-15 13:08:56.773] [DEBUG] config - Loading config /karma.conf.js Chrome 38.0.2125 (Mac OS X 10.9.5) Calculator should add 1 and 1 FAILED ReferenceError: Calculator is not defined at Object.<anonymous> (/spec/calc.spec.js:3:24) Chrome 38.0.2125 (Mac OS X 10.9.5): Executed 1 of 1 (1 FAILED) ERROR (0.021 secs / 0.002 secs)
  • 17. Green Make your tests work. In diesem Schritt unternimmt man alles, um den fehlschlagenden Test grün zu bekommen. Hier sollte der kürzeste und schnellstmögliche Weg gewählt werden. Einfache Probleme können direkt gelöst werden. Umfangreichere Probleme werden durch einen Fake (einfaches Return) gelöst.
  • 18. Green function Calculator() {} Calculator.prototype.add = function(a, b) { return a + b; };
  • 19. Green $ karma run [2014-10-15 13:15:51.258] [DEBUG] config - Loading config /karma.conf.js Chrome 38.0.2125 (Mac OS X 10.9.5): Executed 1 of 1 SUCCESS (0.019 secs / 0.001 secs)
  • 20. Refactor Reduce redundancy. Duplikate im Code entfernen. Im Idealfall durch Zusammenfassung und Auslagerung. Gilt sowohl für Produktivcode als auch für Tests. Nicht optimale Implementierungen verbessern. Immer nur bei grünen Tests durchführen!
  • 21. Refactor describe('Calculator', function() { var calc; beforeEach(function() { calc = new Calculator(); }); it('should add 1 and 1', function() { var result = calc.add(1,1); expect(result).toBe(2); }); it('should subtract 1 from 2', function(){…}) });
  • 22. Refactor $ karma run [2014-10-15 13:15:51.258] [DEBUG] config - Loading config /karma.conf.js Chrome 38.0.2125 (Mac OS X 10.9.5): Executed 2 of 2 SUCCESS (0.019 secs / 0.001 secs)
  • 23. TDD und Frameworks? RRikikee // ppixixeeliloio..ddee
  • 24. TDD und Frameworks TDD mit JavaScript funktioniert auch, wenn die Applikation mit einem Framework wie Angular, Backbone oder Ember erstellt ist. Also keine Ausreden! - ;) Manche Frameworks (z.B. Angular) unterstützen Entwickler sogar bei der testgetriebenen Entwicklung von Applikationen.
  • 26. Automatisierung Automatisierung in der Entwicklungsumgebung. Tests werden automatisch beim Speichern ausgeführt. Automatisierung in der Continuous Integration. grunt-karma Plugin für Grunt nutzen. Tests werden beim Push ins Repository ausgeführt.
  • 27. Kurze Laufzeit Lothar Henke / pixelio.de
  • 28. Kurze Laufzeit Tests, die lange laufen, werden nicht häufig ausgeführt. Werden die Tests nicht ausgeführt, leidet die Qualität.
  • 29. Three out of four Timo Klostermeier / pixelio.de
  • 30. Three out of four Seid nie mehr als eine Änderung von grünen Tests entfernt! Auch wenn Umbaumaßnahmen erforderlich sind. Die Applikation sollte immer in möglichst kleinen überschaubaren Schritten umgebaut werden, ansonsten bringen die Tests nichts. 100 fehlschlagende Tests sind keine Hilfe, sondern eher ein Hindernis.
  • 31. Obvious Implementation & Baby Steps lichtkunst.73 / pixelio.de
  • 32. Obvious Implementation & Baby Steps Jeder bestimmt selbst, was offensichtlich ist und nicht getestet werden muss. Auch die Schrittweite bei den Tests muss jeder selbst festlegen. Grundsätzlich gilt allerdings: Alles, was potenziell kaputt gehen kann, muss getestet werden. Wird man vom Verhalten der Applikation überrascht, sollte man auf jeden Fall einen Test schreiben.
  • 34. Codequalität Die Tests existieren länger als der eigentliche Quellcode. Für die Tests sollten die gleichen Qualitätskriterien gelten wie für den eigentlichen Quellcode. Die Wartbarkeit und Erweiterbarkeit der Tests müssen erhalten bleiben.
  • 35. Test Doubles Regina Kaute / pixelio.de
  • 36. Spy Gabi Eder / pixelio.de
  • 37. Spy Wrapper um eine Funktion. Aufrufe werden direkt an die ursprüngliche Funktion weitergeleitet. Aufrufe werden aufgezeichnet. Spy-Objekt kann später abgefragt werden. Spys sollten später zurückgesetzt werden.
  • 38. Spy it("should create a spy for a method", function () { var myObj = { name: 'Klaus', getName: function () { return this.name; } }; var spy = sinon.spy(myObj, 'getName'); myObj.getName(); expect(spy.calledOnce).toBeTruthy(); myObj.getName.restore(); });
  • 39. Stub Bernd Kasper / pixelio.de
  • 40. Stub Wrapper um eine Funktion wie Spys. Weisen ein definiertes Verhalten auf. Leiten den Aufruf nicht direkt an die ursprüngliche Funktion weiter. Reduzieren Abhängigkeiten und vereinfachen Testumgebungen.
  • 41. Stub it('should return and throw', function () { var myObj = { getName: function () {}, setName: function () {} } var stub1 = sinon.stub(myObj, 'getName').returns('Klaus'); var stub2 = sinon.stub(myObj, ‘setName').throws( new Error(‘BOOH!’) ); expect(stub1()).toBe('Klaus'); });
  • 42. Mock Andreas Morlok / pixelio.de
  • 43. Mock Ebenfalls Wrapper um eine Funktion. Dienen dazu, die korrekte Verwendung einer Funktion sicherzustellen. Wird die Funktion nicht korrekt verwendet, wird eine Exception geworfen. Best Practice: Nicht mehr als ein Mock pro Test.
  • 44. Mock it ('should work with mocks', function () { var myObj = { name: 'Klaus', getName: function () { return this.name; } } var mock = sinon.mock(myObj); mock.expects('getName').once(); myObj.getName(); myObj.getName(); mock.verify(); });
  • 45. Timers Tim Reckmann / pixelio.de
  • 46. Timers Die Zeit im Browser ist nicht vertrauenswürdig. Fake Timers für eine stabile Testumgebung. Bieten Kontrolle über Datum und Zeit.
  • 48. Server cre8tive / pixelio.de
  • 49. Server Wrapper um XMLHttpRequest bzw. ActiveXObject. Tests werden unabhängig von einer Server-Infrastruktur ausgeführt. Kontrolle über die Antworten des Fake Servers.
  • 52. Fixtures HTML-Struktur, die für die Tests benötigt wird. Unabhängigkeit der Tests soll verbessert werden. Durch vorbereitete Strukturen können Ausschnitte von Workflows getestet werden. Auslieferung von HTML über den html2js preprocessor von Karma. jasmine-jquery als Helper für den Umgang mit Fixtures.
  • 53. Fixtures beforeEach(function () { $('body').append(window.__html__['fixtures/fx.html']); $('#registerForm').on('submit', validate); }); it ("should show four messages", function () { $('#firstname').val('Klaus'); $('#registerForm').submit(); expect($('.message.visible').length).toBe(4); });
  • 54. TDD in bestehenden Projekten?: S. Hofschlaeger / pixelio.de
  • 55. Nicht alle Tests auf einmal nachziehen! Stephan Bratek/geralt / pixelio.de
  • 56. Schnittstellen schaffen Tim Reckmann / pixelio.de
  • 57. Boy Scout Rule source code Always leave the campground cleaner than you found it. piu700 / pixelio.de
  • 58. Fragen? Rainer Sturm / pixelio.de
  • 59. KONTAKT Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82