Learn Frontend Testing
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Learn Frontend Testing

on

  • 3,843 views

Are you writing enough tests for your applications? We thought not! Ryan Roemer of Formidable Labs and author of the new book, "Backbone Testing.js", will help us learn how to test your JavaScript ...

Are you writing enough tests for your applications? We thought not! Ryan Roemer of Formidable Labs and author of the new book, "Backbone Testing.js", will help us learn how to test your JavaScript applications in a 3 hour workshop at Redfin's beautiful downtown headquarters.

The workshop will be a mixture of lecture and hands on lessons. With the help of our fabulous mentors you'll learn how to craft a frontend test infrastructure using Mocha, Chai, Sinon.JS and PhantomJS.

Statistics

Views

Total Views
3,843
Views on SlideShare
2,363
Embed Views
1,480

Actions

Likes
2
Downloads
4
Comments
0

10 Embeds 1,480

http://loose-bits.com 1391
http://127.0.0.1 62
http://feeds.feedburner.com 11
http://www.linkedin.com 5
https://www.linkedin.com 3
http://cloud.feedly.com 3
http://10.0.2.2 2
http://prlog.ru 1
http://translate.googleusercontent.com 1
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Learn Frontend Testing Presentation Transcript

  • 1. LEARN FRONTEND TESTING SEATTLE JS - OCT. 16TH, 2013 Ryan Roemer | @ryan_roemer @FormidableLabs
  • 2. SPONSORS
  • 3. MENTORS Try to keep pace with the presentation, but side conversations are encouraged and don't let us stop any good directions. And, thanks!
  • 4. MOTIVATION Web applications are increasingly becoming frontend heavy. We need to verify app logic and behavior, and that means braving the browser.
  • 5. SO LET'S TEST Backend is straightforward and easy ... but what about the frontend?
  • 6. FRONTEND TESTING Frontend testing is difficult and errorprone. Asynchronous events, timing Browser idiosyncracies State of testing technologies
  • 7. BUT GETTING BETTER
  • 8. ... so let's get started with a modern frontend test stack.
  • 9. GET THE CODE github.com/FormidableLabs/learn-frontendtesting $gtcoehts/gtu.o/omdbeas i ln tp:/ihbcmFrialLb/ lanfotn-etn.i er-rnedtsiggt
  • 10. OVERVIEW Installation and test page Suites Assertions Fakes Automation
  • 11. WE WILL LEARN HOW TO Hook frontend JS to tests Write assertions against behavior Fake application behavior Run and verify the tests
  • 12. THINGS WE'RE NOT GOING TO COVER TDD / BDD Application development Functional testing Performance testing
  • 13. CODING TIME We're going to say hello: "SeattleJS" ➞ "Hello SeattleJS!" And camel case strings: "fun-test-time" ➞ "funTestTime"
  • 14. SET UP YOUR PROJECT #Cp teseeo apiain oy h kltn plcto. $c - seeo M_P_AE p r kltn YAPNM
  • 15. 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
  • 16. HELLO! skeleton/js/app/hello.js / Hlo[AU] / el VLE! vrhlo=fnto (a){ a el ucin vl rtr "el "+vl+"" eun Hlo a !; } ;
  • 17. 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(; }; ) } ;
  • 18. DEMO skeleton/index.html
  • 19. TEST HARNESS
  • 20. TEST LIBRARIES Mocha (v . 3 0 Framework 1 1 . ): Chai (v . . ): Assertions 173 Sinon.JS (v . . ): Fakes - spies and stubs 181
  • 21. 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
  • 22. THE TEST PAGE Create a test "driver" web page. example/test.html $tuhM_P_AEts.tl oc YAPNM/ethm
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. MOCHA SUITES, SPECS Spec: A test. Suite: A collection of specs or suites.
  • 27. 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) }; ) }; ) }; )
  • 28. 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"; }; )
  • 29. CHAI ASSERTIONS Natural language syntax. Chained assertions.
  • 30. 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
  • 31. 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/; }; ) }; )
  • 32. 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" }; ) }; )
  • 33. 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"; }; )
  • 34. SINON.JS FAKES Dependencies, complexities? Fake it! Spies: Observe function behavior. Stubs: Spies that replace behavior. Fake Server: Override $ a a , etc. .jx
  • 35. 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(; }; )
  • 36. 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) }; ) }; )
  • 37. AUTOMATION Drive our frontend tests with PhantomJS using Mocha-PhantomJS
  • 38. PREP TEST.HTML Update the test.html file: wno.nod=fnto ( { idwola ucin ) (idwmcahnoJ | mca.u(; wno.ohPatmS | oh)rn) } ;
  • 39. 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
  • 40. ... and that's all for now!
  • 41. WHAT WE'VE COVERED Test harness Suites, specs Assertions Fakes Automation
  • 42. ADDITIONAL TOPICS Advanced testing: DOM, fixtures TDD / BDD Functional testing Performance testing Continuous Integration: (Travis CI)
  • 43. THANKS! Ryan Roemer | @ryan_roemer bit.ly/frontend-testing bit.ly/frontend-testingsrc backbone-testing.com