Learn Frontend Testing

4,749 views

Published on

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.

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

No Downloads
Views
Total views
4,749
On SlideShare
0
From Embeds
0
Number of Embeds
1,840
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Learn Frontend Testing

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

×