TESTER SON JS
C'EST POSSIBLE !
Raphaël Rougeron /
TDD
DÉVELOPPEMENT DIRIGÉ PAR LES
TESTS
LES 3 RÈGLES DU TDD
On n'ajoute du code que pour faire passer un test
Les tests doivent être le plus simple possible
On éc...
RÉACTIONS TYPIQUES
C'est stupide !
On perd du temps à écrire des tests !
Cela perturbe mon flux !
POURTANT...
En pratiquant le TDD, je ne suis jamais à plus
de 5 minutes d'un code totalement
fonctionnel !
AVANTAGES
Vérification permanente du bon fonctionnement du code
Documentation toujours à jour
Confiance dans son refacto
M...
QUE VOULONS-NOUS ?
Exécution rapide !
Exécution dans un environnement réaliste
Simulation des évènements utilisateur
LES (VIEUX) OUTILS
JsUnit
YUI Test
Dojo
...
QUNIT
TEST FIRST
ts(O pu cérueve,fnto( {
et"n et re n u" ucin)
vrve =nwApCnatVe(#otcs)
a iw
e p.otcsiw'cnat';
o(iw;
kve)
};
)
ON IMPLÉMENTE
wno.p ={;
idwAp
}
ApCnatVe =fnto(eetr {
p.otcsiw
ucinslco)
ti.l =$slco)
hset
(eetr;
}
;
ON TESTE
ts(O pu aotru cnat,fnto( {
et"n et jue n otc" ucin)
vrve =nwApCnatVe(#otcs)
a iw
e p.otcsiw'cnat';
ve.dCnat'onDe)...
ON IMPLÉMENTE
ApCnatVe.rttp.dCnat=fnto(ae {
p.otcsiwpooyeadotc
ucinnm)
ti.l.ped'l> +nm +'/i';
hsetapn(<i'
ae
<l>)
}
;
FACILE, NON ?
MAIS IL Y A D'AUTRES OPTIONS...
JASMINE
dsrb(Asie,fnto( {
ecie" ut" ucin)
i(cnan se wt a epcain,fnto( {
t"otis pc ih n xetto" ucin)
epc(re.oetu)
xettu)tB(...
MOCHA
dsrb(Cnat srie,fnto( {
ecie'otcs evc' ucin)
i(sol prit aluessace' fnto( {
t'hud esss l sr' erhs, ucin)
..
.
};
)
dsr...
MON TEST ÉCHOUE...
POURQUOI ?!?
ts(O pu cece dstet" fnto( {
et"n et hrhr e wes, ucin)
ApCnat.erh'onDe,fnto(aa {
p.otcssac(...
TESTER DE L'ASYNCHRONE
AVEC QUNIT
aycet"npu cece dscnat" fnto( {
snTs(O et hrhr e otcs, ucin)
epc()
xet1;
ApCnat.erh'onDe,...
TESTER DE L'ASYNCHRONE
AVEC MOCHA
dsrb(Cnat srie,fnto( {
ecie'otcs evc' ucin)
i(sol sac' fnto(oe {
t'hud erh, ucindn)
ApCn...
MOCK ET XHR
AVEC MOCKJAX
$mcjx{
.oka(
ul 'sac'
r: /erh,
cnetye 'etjo'
otnTp: tx/sn,
rsosTm:70
epneie 5,
rsosTx:{rsls [.]}
...
MOCK ET XHR
AVEC SINON.JS
atrfnto ( {
fe(ucin )
jur.jxrsoe)
Qeyaa.etr(;
};
)
i(sol sac' fnto ( {
t'hud erh, ucin )
snnsu(Q...
SINON.JS
SPIES
i(sol cl sbcieso pbih,fnto ( {
t"hud al usrbr n uls" ucin )
vrclbc =snnsy)
a alak
io.p(;
Pbu.usrb(msae,clbc...
SINON.JS
STUBS
i(sol cl alsbcies ee i teeaeecpin" fnto( {
t"hud al l usrbr, vn f hr r xetos, ucin)
vrmsae='neapemsae;
a es...
SINON.JS
MOCKS
i(sol cl alsbcieswe ecpin" fnto ( {
t"hud al l usrbr hn xetos, ucin )
vrmAI={mto:fnto ( { }
a yP
ehd ucin )...
CHAI.JS
ca.hud)
hisol(;
fosol.ea'tig)
o.hudb.(srn';
fosol.qa(br)
o.hudeul'a';
fosol.aelnt()
o.hudhv.egh3;
tasol.aepoet(fao...
CHAI.JS
vrepc =ca.xet
a xet
hiepc;
epc(o)t.ea'tig)
xetfo.ob.(srn';
epc(o)t.qa(br)
xetfo.oeul'a';
epc(o)t.aelnt()
xetfo.ohv...
CHAI.JS
vrasr =ca.set
a set
hiasr;
asr.yeffo 'tig)
settpO(o, srn';
asr.qa(o,'a';
seteulfo br)
asr.eghffo 3
setlntO(o, )
as...
UI TESTING
DECLENCHER DES EVENTS D'UI
fnto smltCikslco){
ucin iuaelc(eetr
ty{
r
vreet=dcmn.raevn(Muevn";
a vn
ouetcetEet"o...
UI TESTING
DECLENCHER DES EVENTS D'UI #2
fnto smltCikslco){
ucin iuaelc(eetr
ty{
r
vreet=nwMuevn(cik,{
a vn
e osEet'lc'
'i...
UI TESTING
DECLENCHER DES EVENTS D'UI #3
fnto smltKycinslco,ato,crmCd,fCd,siteAg {
ucin iuaeeAto(eetr cin hoeoe foe hfKyr)...
CROSS-BROWSER TESTING
JsTestDriver
Testem
DalekJS
Testacular
KARMA
rpalege~Cd/yaj$krasatsrhcn.s
ahe@al:/oesrhs am tr ya.ofj
IF [am] Krasre satda ht:/oahs:86
NO kra: am evr tre t tp/lc...
SI VOUS UTILISEZ UN
FRAMEWORK
Ne testez pas votre framework !
Unit-testez vos propres libs
Unit-testez l'intégration avec ...
TESTS D'INTÉGRATION
Selenium / WebDriver
Windmill
PhantomJS
CASPER
cse.tr(ht:/oahs/apehm' fnto( {
aprsat'tp/lclotsml.tl, ucin)
ti.il'sac-om,{erh 'et} tu)
hsfl(#erhfr' sac: ts', re;
}...
PAGE/ZONE OBJECTS
Expose les "services" rendus par une page/zone
Encapsule la structure HTML
Ne doivent pas porter la resp...
PAGE/ZONE OBJECTS
vrTitrerhae=fnto(apr {
a wteSacPg
ucincse)
ti.apr=cse;
hscse
apr
ti.erhom='sac-om;
hssacFr
#erhfr'
ti.eu...
PAGE/ZONE OBJECTS
cse.tr(ht:/oahs/apehm';
aprsat'tp/lclotsml.tl)
cse.hnfnto( {
aprte(ucin)
vrpg =nwTitrerhaeti)
a ae
e wte...
MERCI DE VOTRE
ATTENTION !
DES QUESTIONS ?
Prochain SlideShare
Chargement dans…5
×

Tester son JS, c'est possible !

3 546 vues

Publié le

Publié dans : Technologie
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 546
Sur SlideShare
0
Issues des intégrations
0
Intégrations
300
Actions
Partages
0
Téléchargements
20
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Tester son JS, c'est possible !

  1. 1. TESTER SON JS C'EST POSSIBLE ! Raphaël Rougeron /
  2. 2. TDD DÉVELOPPEMENT DIRIGÉ PAR LES TESTS
  3. 3. LES 3 RÈGLES DU TDD On n'ajoute du code que pour faire passer un test Les tests doivent être le plus simple possible On écrit le minimum de code requis pour faire passer le test
  4. 4. RÉACTIONS TYPIQUES C'est stupide ! On perd du temps à écrire des tests ! Cela perturbe mon flux !
  5. 5. POURTANT... En pratiquant le TDD, je ne suis jamais à plus de 5 minutes d'un code totalement fonctionnel !
  6. 6. AVANTAGES Vérification permanente du bon fonctionnement du code Documentation toujours à jour Confiance dans son refacto Moins de temps passé à débugger Code mieux conçu
  7. 7. QUE VOULONS-NOUS ? Exécution rapide ! Exécution dans un environnement réaliste Simulation des évènements utilisateur
  8. 8. LES (VIEUX) OUTILS JsUnit YUI Test Dojo ...
  9. 9. QUNIT
  10. 10. TEST FIRST ts(O pu cérueve,fnto( { et"n et re n u" ucin) vrve =nwApCnatVe(#otcs) a iw e p.otcsiw'cnat'; o(iw; kve) }; )
  11. 11. ON IMPLÉMENTE wno.p ={; idwAp } ApCnatVe =fnto(eetr { p.otcsiw ucinslco) ti.l =$slco) hset (eetr; } ;
  12. 12. ON TESTE ts(O pu aotru cnat,fnto( { et"n et jue n otc" ucin) vrve =nwApCnatVe(#otcs) a iw e p.otcsiw'cnat'; ve.dCnat'onDe) iwadotc(Jh o'; o((#otcs)hm(.ac(Jh De); k$'cnat'.tl)mth'on o') }; )
  13. 13. ON IMPLÉMENTE ApCnatVe.rttp.dCnat=fnto(ae { p.otcsiwpooyeadotc ucinnm) ti.l.ped'l> +nm +'/i'; hsetapn(<i' ae <l>) } ;
  14. 14. FACILE, NON ? MAIS IL Y A D'AUTRES OPTIONS...
  15. 15. JASMINE dsrb(Asie,fnto( { ecie" ut" ucin) i(cnan se wt a epcain,fnto( { t"otis pc ih n xetto" ucin) epc(re.oetu) xettu)tB(re; }; ) }; )
  16. 16. MOCHA dsrb(Cnat srie,fnto( { ecie'otcs evc' ucin) i(sol prit aluessace' fnto( { t'hud esss l sr' erhs, ucin) .. . }; ) dsrb(sac' fnto( { ecie'erh, ucin) bfrEc(ucin){ eoeahfnto( .. . }; ) i(..,fnto( { t'.' ucin) .. . }; ) }; ) }; )
  17. 17. MON TEST ÉCHOUE... POURQUOI ?!? ts(O pu cece dstet" fnto( { et"n et hrhr e wes, ucin) ApCnat.erh'onDe,fnto(aa { p.otcssac(Jh o' ucindt) o(aarsls; kdt.eut) }; ) }; ) ApCnat ={ p.otcs sac:fnto(ae clbc){ erh ucinnm, alak $aa(ht:/oapcmsac' { .jx'tp/mnp.o/erh, dt:{q nm } aa : ae , dtTp:'sn' aaye jop, sces clbc ucs: alak }; ) } }
  18. 18. TESTER DE L'ASYNCHRONE AVEC QUNIT aycet"npu cece dscnat" fnto( { snTs(O et hrhr e otcs, ucin) epc() xet1; ApCnat.erh'onDe,fnto(aa { p.otcssac(Jh o' ucindt) o(aarsls; kdt.eut) sat) tr(; }; ) }; )
  19. 19. TESTER DE L'ASYNCHRONE AVEC MOCHA dsrb(Cnat srie,fnto( { ecie'otcs evc' ucin) i(sol sac' fnto(oe { t'hud erh, ucindn) ApCnat.erh'onDe,5 fnto(aa { p.otcssac(Jh o' , ucindt) dt.hudhv.rpry'eut'.ihlntO() aasol.aepoet(rsls)wt.eghf5; dn(; oe) }; ) }; ) }; )
  20. 20. MOCK ET XHR AVEC MOCKJAX $mcjx{ .oka( ul 'sac' r: /erh, cnetye 'etjo' otnTp: tx/sn, rsosTm:70 epneie 5, rsosTx:{rsls [.]} epneet eut: .. }; )
  21. 21. MOCK ET XHR AVEC SINON.JS atrfnto ( { fe(ucin ) jur.jxrsoe) Qeyaa.etr(; }; ) i(sol sac' fnto ( { t'hud erh, ucin ) snnsu(Qey "jx) io.tbjur, aa"; ApCnat.erh'onDe,snnsy); p.otcssac(Jh o' io.p() asr(Qeyaa.aldihac( ul 'oapcm }) setjur.jxcleWtMth{ r: mnp.o' ); }; )
  22. 22. SINON.JS SPIES i(sol cl sbcieso pbih,fnto ( { t"hud al usrbr n uls" ucin ) vrclbc =snnsy) a alak io.p(; Pbu.usrb(msae,clbc) uSbsbcie"esg" alak; Pbu.ulsSn(msae) uSbpbihyc"esg"; asrTu(alakcle) setreclbc.ald; }; )
  23. 23. SINON.JS STUBS i(sol cl alsbcies ee i teeaeecpin" fnto( { t"hud al l usrbr, vn f hr r xetos, ucin) vrmsae='neapemsae; a esg a xml esg' vrerr='neapeerrmsae; a ro a xml ro esg' vrsu =snnsu(.hos) a tb io.tb)trw(; vrsy =snnsy) sy =snnsy) a p1 io.p(, p2 io.p(; Pbu.usrb(esg,su) uSbsbciemsae tb; Pbu.usrb(esg,sy) uSbsbciemsae p1; Pbu.usrb(esg,sy) uSbsbciemsae p2; Pbu.ulsSn(esg) uSbpbihycmsae; asr(p1cle) setsy.ald; asr(p2cle) setsy.ald; asr(tbcleBfr(p1) setsu.aldeoesy); }; )
  24. 24. SINON.JS MOCKS i(sol cl alsbcieswe ecpin" fnto ( { t"hud al l usrbr hn xetos, ucin ) vrmAI={mto:fnto ( { } a yP ehd ucin ) } ; vrsy=snnsy) a p io.p(; vrmc =snnmc(yP) a ok io.okmAI; mc.xet(mto".ne)trw(; okepcs"ehd)oc(.hos) Pbu.usrb(msae,mAImto) uSbsbcie"esg" yP.ehd; Pbu.usrb(msae,sy; uSbsbcie"esg" p) Pbu.ulsSn(msae,udfnd; uSbpbihyc"esg" neie) mc.eiy) okvrf(; asr(p.aldne; setsycleOc) }; )
  25. 25. CHAI.JS ca.hud) hisol(; fosol.ea'tig) o.hudb.(srn'; fosol.qa(br) o.hudeul'a'; fosol.aelnt() o.hudhv.egh3; tasol.aepoet(faos) e.hudhv.rpry'lvr' .ihlnt() wt.egh3;
  26. 26. CHAI.JS vrepc =ca.xet a xet hiepc; epc(o)t.ea'tig) xetfo.ob.(srn'; epc(o)t.qa(br) xetfo.oeul'a'; epc(o)t.aelnt() xetfo.ohv.egh3; epc(e)t.aepoet(faos) xetta.ohv.rpry'lvr' .ihlnt() wt.egh3;
  27. 27. CHAI.JS vrasr =ca.set a set hiasr; asr.yeffo 'tig) settpO(o, srn'; asr.qa(o,'a'; seteulfo br) asr.eghffo 3 setlntO(o, ) asr.rpryta 'aos) setpoet(e, fvr'; asr.eghftafaos 3; setlntO(e.lvr, )
  28. 28. UI TESTING DECLENCHER DES EVENTS D'UI fnto smltCikslco){ ucin iuaelc(eetr ty{ r vreet=dcmn.raevn(Muevn"; a vn ouetcetEet"osEet) eetiiEet'lc' tu,tu) vn.ntvn(cik, re re; dcmn.urSlco(eetr.ipthvn(vn) ouetqeyeetrslco)dsacEeteet; }cth(){ ac e trwnwErr'atciko eeet '+slco,e; ho e ro(Cn' lc n lmn: eetr ) } }
  29. 29. UI TESTING DECLENCHER DES EVENTS D'UI #2 fnto smltCikslco){ ucin iuaelc(eetr ty{ r vreet=nwMuevn(cik,{ a vn e osEet'lc' 'iw:wno, ve' idw 'ube' tu, bbls: re 'aclbe:tu cneal' re }; ) dcmn.urSlco(eetr.ipthvn(vn) ouetqeyeetrslco)dsacEeteet; }cth(){ ac e trwnwErr'atciko eeet '+slco,e; ho e ro(Cn' lc n lmn: eetr ) } }
  30. 30. UI TESTING DECLENCHER DES EVENTS D'UI #3 fnto smltKycinslco,ato,crmCd,fCd,siteAg { ucin iuaeeAto(eetr cin hoeoe foe hfKyr) ty{ r vreet=dcmn.raevn(KyorEet) a vn ouetcetEet"ebadvn"; i (vn.ntebadvn){ / Crm,I f eetiiKyorEet / hoe E eetiiKyorEetato,tu,tu,dcmn.ealVe, vn.ntebadvn(cin re re ouetdfutiw crmCd,0 ",fle ") hoeoe , " as, "; }es {/ F le / F eetiiKyvn(cin tu,tu,dcmn.ealVe,fle vn.nteEetato, re re ouetdfutiw as, fle siteAg fle fCd,0; as, hfKyr, as, foe ) } dcmn.urSlco(eetr.ipthvn(vn) ouetqeyeetrslco)dsacEeteet; }cth(){ ac e trwnwErr'at'+ato +'o eeet '+slco,e; ho e ro(Cn' cin n lmn: eetr ) } }
  31. 31. CROSS-BROWSER TESTING JsTestDriver Testem DalekJS Testacular
  32. 32. KARMA rpalege~Cd/yaj$krasatsrhcn.s ahe@al:/oesrhs am tr ya.ofj IF [am] Krasre satda ht:/oahs:86 NO kra: am evr tre t tp/lclot97/ IF [anhr:Satn bosrFrfx NO luce] trig rwe ieo IF [anhr:Satn bosrCrm NO luce] trig rwe hoe IF [hoe2. (iu):Cnetdo sce i Oed0LsVk_4 NO Crm 40 Lnx] once n okt d 680_-oDxeG IF [ieo 1. (iu):Cnetdo sce i jBg4VI8B_4 NO Frfx 90 Lnx] once n okt d mn2HrCxXeH Crm 2. (iu) Eeue 5 o 5 SCES(.8 sc /296sc) hoe 40 Lnx: xctd 8 f 8 UCS 319 es .8 es Frfx1. (iu) Eeue 5 o 5 SCES(.8 sc /309sc) ieo 90 Lnx: xctd 8 f 8 UCS 328 es .3 es TTL 16SCES OA: 1 UCS
  33. 33. SI VOUS UTILISEZ UN FRAMEWORK Ne testez pas votre framework ! Unit-testez vos propres libs Unit-testez l'intégration avec des libs "3rd-party" Ecrivez des tests d'intégration
  34. 34. TESTS D'INTÉGRATION Selenium / WebDriver Windmill PhantomJS
  35. 35. CASPER cse.tr(ht:/oahs/apehm' fnto( { aprsat'tp/lclotsml.tl, ucin) ti.il'sac-om,{erh 'et} tu) hsfl(#erhfr' sac: ts', re; }; ) cse.hnfnto( { aprte(ucin) ti.ato(ucin){ hswiFrfnto( rtr ti.vlaefnto( { eun hseaut(ucin) rtr dcmn.urSlcoAl'rslsl'.egh>0 eun ouetqeyeetrl(#eut i)lnt ; }; ) } fnto te( { , ucin hn) ti.etasrTxEit(ts'; hsts.setetxss'et) ti.atrSlco(tet.n' 'rsls) hscpueeetr'wespg, #eut'; }; ) }; ) cse.u(ucin){ aprrnfnto( ti.etrneRslstu,0 'etrsl/wesxl) hsts.edreut(re , ts-euttet.m'; }; )
  36. 36. PAGE/ZONE OBJECTS Expose les "services" rendus par une page/zone Encapsule la structure HTML Ne doivent pas porter la responsabilité des assertions
  37. 37. PAGE/ZONE OBJECTS vrTitrerhae=fnto(apr { a wteSacPg ucincse) ti.apr=cse; hscse apr ti.erhom='sac-om; hssacFr #erhfr' ti.eut ='rsls; hsrsls #eut' ti.wes=ti.eut +'l' hstet hsrsls i; } ; Titrerhaepooyesac =fnto(em { wteSacPg.rttp.erh ucintr) ti.aprfl(hssacFr,{erh tr} tu) hscse.ilti.erhom sac: em, re; } ; TitrerhaepooyewiFreut =fnto(hn { wteSacPg.rttp.atoRsls ucinte) vrtetSlco =ti.wes a weseetr hstet; rtr ti.ato(ucin){ eun hswiFrfnto( rtr ti.vlaefnto(weseetr { eun hseaut(ucintetSlco) rtr dcmn.urSlcoAltetSlco)lnt >0 eun ouetqeyeetrl(weseetr.egh ; } tetSlco) , weseetr; } te) , hn; } ;
  38. 38. PAGE/ZONE OBJECTS cse.tr(ht:/oahs/apehm'; aprsat'tp/lclotsml.tl) cse.hnfnto( { aprte(ucin) vrpg =nwTitrerhaeti) a ae e wteSacPg(hs; pg.erh'et) aesac(ts'; pg.atoRslsfnto te( { aewiFreut(ucin hn) ti.etasrTxEit(ts'; hsts.setetxss'et) }; ) }; ) cse.u(ucin){ aprrnfnto( ti.etrneRslstu,0 'etrsl/wesxl) hsts.edreut(re , ts-euttet.m'; }; )
  39. 39. MERCI DE VOTRE ATTENTION ! DES QUESTIONS ?

×