fe05 test drivenjavascriptdevelopment

42
Template designed by T.D.J.D.: Test Driven Javascript Development Antonio Turibbio Liccardi [email protected] www.dotnetcampania.org/blogs/turibbio www.getlatestversion.it Template designed by

Upload: dotnetcampus

Post on 24-May-2015

43 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Fe05   test drivenjavascriptdevelopment

Template designed by

T.D.J.D.: Test Driven Javascript Development

Antonio Turibbio Liccardiantonio.liccardi@dotnetcampania.orgwww.dotnetcampania.org/blogs/turibbiowww.getlatestversion.it

Template designed by

Page 2: Fe05   test drivenjavascriptdevelopment

Template designed by

brought to you by

Page 4: Fe05   test drivenjavascriptdevelopment

Template designed by

Unit Testing, TDD e TDJD

Qunit

Metriche

Automazione

Considerazioni

Agenda

Page 5: Fe05   test drivenjavascriptdevelopment

Template designed by

Il motivo principale per scrivere unit test è il

dimostrare la correttezza di una funzionalità

A cosa serve lo unit testing?

Page 6: Fe05   test drivenjavascriptdevelopment

Template designed by

Ma scrivere unit test non sempre implica direttamente che il nostro codice sia

migliore!

A cosa serve lo unit testing?

Page 7: Fe05   test drivenjavascriptdevelopment

Template designed by

Ci può aiutare però a renderlo più

testabile, pulito, riutilizzabile

A cosa serve lo unit testing?

Page 8: Fe05   test drivenjavascriptdevelopment

Template designed by

Scritti dagli sviluppatori

Isolamento

Atomici

Costituiscono una documentazione vivente

Facilitano la gestione della anomalie (regression)

Automazione

Caratteristiche dello unit testing

Page 9: Fe05   test drivenjavascriptdevelopment

Template designed by

Svantaggi: E’ un processo costoso

Richiede tempo, pazienza

e soprattutto bravura

Page 10: Fe05   test drivenjavascriptdevelopment

Javascript Testing

perché?

Page 11: Fe05   test drivenjavascriptdevelopment

Template designed by

Alert UAT

Debug

Come testiamo il nostro javascript?

Page 12: Fe05   test drivenjavascriptdevelopment

Template designed by

Come testiamo il nostro javascript?

Page 13: Fe05   test drivenjavascriptdevelopment

Template designed by

Come testiamo il nostro javascript

Richiede tempo

Conduce ad errori

Non riproducibile

Page 14: Fe05   test drivenjavascriptdevelopment

Template designed by

Cross-browser testing

Page 15: Fe05   test drivenjavascriptdevelopment

Template designed by

E quindi?

Lo unit test ci fa bene…

…soprattutto se lo facciamo nel modo

giusto

Page 16: Fe05   test drivenjavascriptdevelopment

Template designed by

Test Driven Development

Page 17: Fe05   test drivenjavascriptdevelopment

Template designed by

«no big design up front»

Test Driven Development

Page 18: Fe05   test drivenjavascriptdevelopment

Template designed by

Think

Write a test

Run the test

Make the test pass

Refactor

Come funziona?

Page 19: Fe05   test drivenjavascriptdevelopment

Template designed by

You ain’t gonna need it! (YAGNI)

Don’t repeat yourself (DRY)

Descriptive and Meaningful Phrases (DAMP)

SOLID

Refactoring

Certain structures in code suggest (sometimes they scream for) the possibility of refactoring

Martin Fowler

Page 20: Fe05   test drivenjavascriptdevelopment

Template designed by

Organizzare un test

Fixture Test Case Check

Page 21: Fe05   test drivenjavascriptdevelopment

Template designed by

Organizzare unit test

AAA

• Arrange• Act• Assert

BDD

• Given• When• Then

4 Phase

• Setup• Exercise• Verify• Teardow

n

Page 22: Fe05   test drivenjavascriptdevelopment

Template designed by

Come funzionano?

Unit Test Framework

Unit Test Runner Unit Test Codice Risultati

Page 23: Fe05   test drivenjavascriptdevelopment

Template designed by

Nasce dall’idea degli xUnit Frameworks

E’ stato realizzato dal team da John Resig

Può testare codice server side js

Cosa è QUnit

https://github.com/jquery/qunit

Page 24: Fe05   test drivenjavascriptdevelopment

Template designed by

Test Runner

Assertions

In-Browser Testing

Plugin

QUnit

Page 25: Fe05   test drivenjavascriptdevelopment

dem

o Qunit

Page 26: Fe05   test drivenjavascriptdevelopment

Template designed by

Pete Hodgson

http://bit.ly/19wDtTp

Martin Fowler

http://bit.ly/1hDeP1O

Segregated DOM

Page 27: Fe05   test drivenjavascriptdevelopment

Template designed by

Test doubles

Page 28: Fe05   test drivenjavascriptdevelopment

Template designed by

Dummy Fake

Stub Spy

Mock

Test doubles

Page 29: Fe05   test drivenjavascriptdevelopment

Template designed by

Test doubles nella vita reale

StateVerificatio

n

BehaviorVerificatio

n

Mocks aren’t stubs! (Fowler: http://bit.ly/18BPLE1)

Page 30: Fe05   test drivenjavascriptdevelopment

Template designed by

Sinon.js

Spies

Stubs

Mocks

Fake Timers

Fake XHR

Fake server

JSON-P

Assertions

Matchers

Sandboxing

Page 31: Fe05   test drivenjavascriptdevelopment

dem

o Sinon.js

Page 32: Fe05   test drivenjavascriptdevelopment

Template designed by

In-Browser testing vs Headless Testing

Page 33: Fe05   test drivenjavascriptdevelopment

Template designed by

JSTestDriver

Page 34: Fe05   test drivenjavascriptdevelopment

Template designed by

TestSwarm

Page 35: Fe05   test drivenjavascriptdevelopment

dem

o phantomJS

Page 36: Fe05   test drivenjavascriptdevelopment

Template designed by

E’ una percentuale che indica il numero di unit test correlati ai metodi del nostro codice

Code coverage

Page 37: Fe05   test drivenjavascriptdevelopment

dem

o blanket.js

Page 38: Fe05   test drivenjavascriptdevelopment

Template designed by

Come automatizzare i nostri test?

Continuous integration

Page 39: Fe05   test drivenjavascriptdevelopment

dem

o chutzpah

Page 40: Fe05   test drivenjavascriptdevelopment

Template designed by

Logica UI != Logica applicativa

Evitare singleton

Scrivere metodi piccoli

Testare i casi limite

Isolare dall’esterno

Suddividere logicamente il proprio codice

Come scrivere test

Page 41: Fe05   test drivenjavascriptdevelopment

Template designed by

Riferimenti

Page 42: Fe05   test drivenjavascriptdevelopment

Template designed by

Grazie!