Learn Frontend Testing

LEARN FRONTEND
TESTING
SEATTLE JS - OCT. 16TH, 2013
Ryan Roemer | @ryan_roemer
@FormidableLabs

MENTORS

Try to keep pace with the presentation,
but side conversations are encouraged
and don't let us stop any good
directions.
And, thanks!

MOTIVATION

Web applications are increasingly
becoming frontend heavy.
We need to verify app logic and
behavior, and that means braving the
browser.

SO LET'S TEST

Backend is straightforward and easy
... but what about the frontend?

FRONTEND TESTING
Frontend testing is difficult and errorprone.
Asynchronous events, timing
Browser idiosyncracies
State of testing technologies

... so let's get started with a modern
frontend test stack.

GET THE CODE

github.com/FormidableLabs/learn-frontendtesting

$gtcoehts/gtu.o/omdbeas
i ln tp:/ihbcmFrialLb/
lanfotn-etn.i
er-rnedtsiggt

OVERVIEW
Installation and test page
Suites
Assertions
Fakes
Automation

WE WILL LEARN HOW TO
Hook frontend JS to tests
Write assertions against behavior
Fake application behavior
Run and verify the tests

THINGS WE'RE NOT
GOING TO COVER
TDD / BDD
Application development
Functional testing
Performance testing

CODING TIME
We're going to say hello:

"SeattleJS" ➞ "Hello SeattleJS!"
And camel case strings:
"fun-test-time" ➞ "funTestTime"

SET UP YOUR PROJECT
#Cp teseeo apiain
oy h kltn plcto.
$c - seeo M_P_AE
p r kltn YAPNM

PROJECT STRUCTURE
Using with the "skeleton" application.

M_P_AE
YAPNM/
j/
s
ap
p/
hloj
el.s
cmlj
ae.s
lb
i/
ca.s
hij
mcaj
oh.s
mcacs
oh.s
snnj
io.s
idxhm
ne.tl

HELLO!

skeleton/js/app/hello.js
/ Hlo[AU]
/ el VLE!
vrhlo=fnto (a){
a el
ucin vl
rtr "el "+vl+""
eun Hlo
a
!;
}
;

CAMEL CASE

skeleton/js/app/camel.js

/ Cmlcs asrn.
/ ae ae
tig
vrcml=fnto (a){
a ae
ucin vl
/ Upraetefrtcaatratrads
/ pecs h is hrce fe
a
rtr vlrpae/()g fnto (,fr
eun a.elc(-./, ucin m i
rtr frttUprae)
eun is.opeCs(;
};
)
}
;

TEST LIBRARIES
Mocha (v . 3 0 Framework
1 1 . ):
Chai (v . . ): Assertions
173
Sinon.JS (v . . ): Fakes - spies and stubs
181

DIRECTORY LAYOUT
A combined structure.

M_P_AE
YAPNM/
j/
s
ap
p/
lb
i/
se/
pc
hlose.s
el.pcj
*se.s
.pcj
ts.tl
ethm
idxhm
ne.tl

THE TEST PAGE

Create a test "driver" web page.
example/test.html
$tuhM_P_AEts.tl
oc YAPNM/ethm

TEST.HTML
<tl
hm>
<ed
ha>
<il>rnedTsig/il>
tteFotn etn<tte
<- Apiainlbais ->
!- plcto irre. <citsc"saphloj"<srp>
srp r=j/p/el.s>/cit
<citsc"sapcmlj"<srp>
srp r=j/p/ae.s>/cit
<- Ts sye adlbais ->
!- et tls n irre. <ikrl"tlset
ln e=syehe"
he=j/i/oh.s"/
rf"slbmcacs >
<citsc"slbmcaj"<srp>
srp r=j/i/oh.s>/cit
<citsc"slbca.s>/cit
srp r=j/i/hij"<srp>
<citsc"slbsnnj"<srp>
srp r=j/i/io.s>/cit

TEST.HTML
<- Ts Stp->
!- et eu <cit
srp>
/ Stu Ca adMca
/ e p hi n oh.
wno.xet=ca.xet
idwepc
hiepc;
mcastp"d";
oh.eu(bd)
/ Rntsso wno la.
/ u et n idw od
wno.nod=fnto ( {
idwola
ucin )
mcarn)
oh.u(;
<srp>
/cit

TEST.HTML

<- Tss ->
!- et. <- ..se srp icue g hr ..
!- . pc cit nlds o ee .
<ha>
/ed
<oy
bd>
<i i=mca>/i>
dv d"oh"<dv
<bd>
/oy
<hm>
/tl

example/test-empty.html

MOCHA SUITES, SPECS
Spec: A test.
Suite: A collection of specs or suites.

SUITES, SPECS

test-mocha.html | mocha-suite.spec.js
dsrb(snl lvl,fnto ( {
ecie"ige ee" ucin )
i(sol ts smtig)
t"hud et oehn";
};
)

dsrb(tplvl,fnto ( {
ecie"o-ee" ucin )
dsrb(nse" fnto ( {
ecie"etd, ucin )
i(i so adayc,fnto (oe {
t"s lw n sn" ucin dn)
stieu(ucin( {dn(;} 30
eTmotfnto )
oe) , 0)
};
)
};
)
};
)

SETUP, TEARDOWN
test-mocha.html | mochasetup.spec.js

dsrb(stptadw" fnto ( {
ecie"eu/eron, ucin )
bfr(ucin(oe {dn(;};
eoefnto dn)
oe) )
bfrEc(ucin( {)
eoeahfnto ) };
atrfnto (oe {dn(;};
fe(ucin dn)
oe) )
atrahfnto ( {)
feEc(ucin ) };
i(sol ts smtig)
t"hud et oehn";
};
)

CHAI ASSERTIONS
Natural language syntax.
Chained assertions.

CHAI API
The "bdd" API:

Chains: t , b , b e , h v
o e en ae
Groups: a d
n
Basics: ae u ll n t , m t h
, qa, egh ac

HELLO!

test-hello.html | hello.spec.js
dsrb(hlo,fnto ( {
ecie"el" ucin )
i(sol syhlo,fnto ( {
t"hud a el" ucin )
epc(el(Wrd)
xethlo"ol")
.ob.(srn".n
t.ea"tig)ad
.oeul"el Wrd".n
t.qa(Hlo ol!)ad
.ohv.egh1)ad
t.aelnt(2.n
.omth/el{})
t.ac(H[]2/;
};
)
};
)

CAMEL CASE

test-camel.html | camel.spec.js

dsrb(cml,fnto ( {
ecie"ae" ucin )
i(hnlsbs css,fnto ( {
t"ade ae ae" ucin )
epc(ae(")t.qa(";
xetcml").oeul")
epc(ae(snl")t.qa(snl"
xetcml"ige).oeul"ige)
};
)
i(hnlsdse css,fnto ( {
t"ade ahd ae" ucin )
epc(ae(abc).oeul"B";
xetcml"--")t.qa(aC)
epc(ae(oeto).oeul"nTo
xetcml"n-w")t.qa(oew"
};
)
};
)

MORE CHAI

test-chai.html | chai.spec.js | chaifail.spec.js

dsrb(ca" fnto ( {
ecie"hi, ucin )
i(asrs,fnto ( {
t"set" ucin )
epc("n" "w")t.oti(to)
xet[oe, to].ocnan"w";
epc(fo {a:1})
xet{o: br 2}
.ohv.eppoet(fobr,1)
t.aede.rpry"o.a" 2;
};
)
};
)
dsrb(ca" fnto ( {
ecie"hi, ucin )
i(fis,fnto ( {
t"al" ucin )
epc(oe)t.qa(to)
xet"n".oeul"w";
};
)

SINON.JS FAKES

Dependencies, complexities? Fake it!
Spies: Observe function behavior.
Stubs: Spies that replace behavior.
Fake Server: Override $ a a , etc.
.jx

SINON.JS SPY

test-sinon.html | camel-spy.spec.js |
camel.js

dsrb(cml,fnto ( {
ecie"ae" ucin )
i(sisuprcs" fnto ( {
t"pe pe ae, ucin )
vrsy=snnsySrn.rttp,"o
a p
io.p(tigpooye tU

epc(p.alon)t.qa()
xetsyclCut.oeul0;
epc(ae(ab).oeul"B)
xetcml"-")t.qa(a";
epc(p.alon)t.qa()
xetsyclCut.oeul1;
epc(p.isCl.eunau)t.qa
xetsyfrtalrtrVle.oeul
syrsoe)
p.etr(;
};
)

SINON.JS STUB

test-sinon.html | camel-stub.spec.js |
camel.js

dsrb(cml,fnto ( {
ecie"ae" ucin )
i(susuprcs" fnto ( {
t"tb pe ae, ucin )
vrsu =snnsu(tigpooye "
a tb
io.tbSrn.rttp, t
fnto ( {rtr "O" };
ucin )
eun FO; )
epc(ae(ab).oeul"FO)
xetcml"-")t.qa(aO";
epc(tbclCut.oeul1;
xetsu.alon)t.qa()
su.etr(;
tbrsoe)
};
)
};
)

AUTOMATION

Drive our frontend tests with
PhantomJS using Mocha-PhantomJS

PREP TEST.HTML
Update the test.html file:

wno.nod=fnto ( {
idwola
ucin )
(idwmcahnoJ | mca.u(;
wno.ohPatmS | oh)rn)
}
;

HEADLESS!

Install and drive tests from the
command line:
$nmisalmcapatms
p ntl oh-hnoj
$nd_oue/bnmcapatms
oemdls.i/oh-hnoj
M_P_AEts.tl
YAPNM/ethm

WHAT WE'VE COVERED
Test harness
Suites, specs
Assertions
Fakes
Automation

ADDITIONAL TOPICS
Advanced testing: DOM, fixtures
TDD / BDD
Functional testing
Performance testing
Continuous Integration: (Travis CI)

THANKS!

Ryan Roemer | @ryan_roemer
bit.ly/frontend-testing
bit.ly/frontend-testingsrc
backbone-testing.com

Learn Frontend Testing

Recommandé

Recommandé

Contenu connexe

Similaire à Learn Frontend Testing

Similaire à Learn Frontend Testing (20)

Dernier

Dernier (20)

Learn Frontend Testing