1. TESTER SON JS
C'EST POSSIBLE !
Raphaël Rougeron /

2. TDD
DÉVELOPPEMENT DIRIGÉ PAR LES
TESTS

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. RÉACTIONS TYPIQUES
C'est stupide !
On perd du temps à écrire des tests !
Cela perturbe mon flux !

5. POURTANT...
En pratiquant le TDD, je ne suis jamais à plus
de 5 minutes d'un code totalement
fonctionnel !

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. QUE VOULONS-NOUS ?
Exécution rapide !
Exécution dans un environnement réaliste
Simulation des évènements utilisateur

8. LES (VIEUX) OUTILS
JsUnit
YUI Test
Dojo
...

9. QUNIT

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. ON IMPLÉMENTE
wno.p ={;
idwAp
}
ApCnatVe =fnto(eetr {
p.otcsiw
ucinslco)
ti.l =$slco)
hset
(eetr;
}
;

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. ON IMPLÉMENTE
ApCnatVe.rttp.dCnat=fnto(ae {
p.otcsiwpooyeadotc
ucinnm)
ti.l.ped'l> +nm +'/i';
hsetapn(<i'
ae
<l>)
}
;

14. FACILE, NON ?
MAIS IL Y A D'AUTRES OPTIONS...

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. CROSS-BROWSER TESTING
JsTestDriver
Testem
DalekJS
Testacular

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. 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. TESTS D'INTÉGRATION
Selenium / WebDriver
Windmill
PhantomJS

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. PAGE/ZONE OBJECTS
Expose les "services" rendus par une page/zone
Encapsule la structure HTML
Ne doivent pas porter la responsabilité des assertions

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. 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. MERCI DE VOTRE
ATTENTION !
DES QUESTIONS ?