Tester son JS, c'est possible !

3,571 views

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,571
On SlideShare
0
From Embeds
0
Number of Embeds
302
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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 ?

×