Test Driven Development With YUI Test (Ajax Experience 2008)

8,271
-1

Published on

My presentation at Ajax Experience 2008 about test driven development for JavaScript using YUI Test.

Published in: Technology, Business
2 Comments
15 Likes
Statistics
Notes
  • The point is that server responses should be tested on the server, not by JavaScript. JavaScript should test JavaScript, the server should test the server.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I missed your talk, so I hope you can answer it here: Whats wrong with using async testing for ajax responses? Whats the alternative?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
8,271
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
230
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

Test Driven Development With YUI Test (Ajax Experience 2008)

  1. Tes t Driven Development with YUI Tes t Nicholas C . Zakas P rincipal Front E nd E ngineer, Yahoo!
  2. Who's this g uy? • P rincipal Front E nd E ngineer, Yahoo! Front P age • YUI C ontributor • Author
  3. Tes t Driven Development Design Features Run Write Tests Tests Write Code
  4. Why Tes t Driven Development? • No such thing as a small change • S pecifically identifies tasks • You understand your code the best • Upfront investment pays off later • Q A resources are limited • P eace of mind
  5. Tes t Driven Development Design Features Run Write Tests Tests Write Code
  6. The R equirements • Usually, requirements are functional • Translate into interfaces (objects and methods) • D escribe what each method should do in terms of inputs and outputs Design Features
  7. The R equirements • Need: When a username is entered, ignore spaces at the beginning and end of text • Translation: I need a trim function • Trim function: – R emove leading white space from the given string and return result – R emove trailing white space from the given string and return result Design Features
  8. Tes t Driven Development Design Features Run Write Tests Tests Write Code
  9. Unit Tes ts • Test a small, isolated part of code (unit) – Unit = method • Test inputs and outputs – O ne set at a time • Test: “G iven this input, I expect this output.” Write Tests
  10. Unit Tes ting C omplaints • R amp-up time • Unfamiliar syntax/ concepts • Test harness setup is hard • Writing tests takes too long • C an't figure out what broke when a test fails Write Tests
  11. YUI Tes t • Unit testing framework for JavaS cript • B uilt on top of YUI • “D ogfooded” by YUI – S ee “tests” directory in download • E xtensive documentation: http:/ developer.yahoo.com/ yuitest/ / yui/ Write Tests
  12. YUI Tes t Cheatsheet Narrative Functional documentation examples API documentation Write Tests
  13. G oals of YUI Tes t • E asy to write your first test • S imple, logical syntax • Works the way JavaS cript works • G et up and running fast • Useful failure messages out of the box • Works with any code, not just YUI – P rototype, jQ uery, D ojo, etc., welcome! Write Tests
  14. G etting S tarted with YUI Tes t • C reate an HTM L page • Include required JavaS cript/ S S files C • Include JavaS cript to test • Write one or more tests • Include boilerplate JavaS cript • O pen page in browser Write Tests
  15. Writing Tes ts with YUI Tes t Write Tests
  16. Writing Tes ts with YUI Tes t Write Tests
  17. Writing Tes ts with YUI Tes t: E xample • Trim function: – R emove leading white space from the given string and return result – R emove trailing white space from the given string and return result Write Tests
  18. Writing Tes ts with YUI Tes t: E xample Write Tests
  19. Writing Tes ts with YUI Tes t: E xample Write Tests
  20. Failing is g ood!
  21. Tes t Driven Development Design Features Run Write Tests Tests Write Code
  22. Implementing the Feature • S tart with first failed test • Write code to make that test pass • M ove on to second failed test • Write code to make that test pass • E tc. Write Code
  23. Implementing the Feature: E xample Write Code
  24. Tes t Driven Development Design Features Run Write Tests Tests Write Code
  25. Tes ting the Feature: E xample Run Tests
  26. Tes t Driven Development Design Features Run Write Tests Fail Tests Write Code
  27. Implementing the Feature: E xample Write Code
  28. Tes t Driven Development Design Features Run Write Tests Fail Tests Write Code
  29. Tes ting the Feature: E xample Run Tests
  30. Tes t Driven Development Design Features Pass Run Write Tests Fail Tests Write Code
  31. Tes t Driven Development Design Features Pass Run Write Tests Fail Tests Write Code
  32. Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
  33. S omething Went Wrong - How? • Incomplete test coverage • Incomplete feature definition • Unintended use of feature Bug Reported
  34. S omething Went Wrong - What? “When I entered a username that had both leading and trailing white space, the application received a string that had no leading white space but still had trailing white space.” Bug Reported
  35. S omething Went Wrong - What? • Trim function: – R emove leading white space from the given string and return result – R emove trailing white space from the given string and return result – If the given string has both leading and trailing white space, remove both and return result Bug Reported
  36. Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
  37. Updating Tes ts : E xample Write Tests
  38. Updating Tes ts : E xample Write Tests
  39. Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
  40. Fixing the Feature: E xample Write Code
  41. Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
  42. Tes ting the Fix: E xample Run Tests
  43. Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
  44. Tes t Driven Development Design Feature Pass Run Write Tests Fail Tests Write Code
  45. TDD C halleng es on the Web
  46. The B rows er E nvironment • JavaS cript tied to page using events • E xecution may be: – S ynchronous – Asynchronous • D ifferent browsers behave differently
  47. YUI Tes t Helps • S imple event simulation across all A- grade browsers – And some others! • Asynchronous code testing • D ifferent browsers...still behave differently – (S orry)
  48. E vent S imulation with YUI Tes t
  49. E vent S imulation with YUI Tes t
  50. E vent S imulation Example
  51. E vent S imulation Us es • Test reusable widgets (YUI does this) • Functional tests (a la S elenium) • Fun!
  52. As ynchronous Tes ts • Two ways to accomplish: – C all wait(func, delay) – C all wait(timeout) and then resume(func)
  53. As ynchronous Tes ts
  54. As ynchronous Tes ts
  55. As ynchronous Tes ting E xample
  56. WARNING! Asynchronous testing should not be used for testing Ajax responses.
  57. Other YUI Tes t Features
  58. Tes t S uites
  59. Tes t S uites
  60. Hooking into Tes tR unner • TestR unner is completely event-driven • E ach event provides the results to that point • TestLogger is just a base visualization • D esign your own visualization
  61. Tes tR unner E vents • pass • ignore • fail • begin • complete • testcasebegin • testcasecomplete • testsuitebegin • testsuitecomplete
  62. Tes tR unner E vents
  63. Tes t R eporting
  64. R ecommendations
  65. R amping up • For every JavaS cript file, have a corresponding test file (even if empty) – file.js and file_tests.js • S tart writing tests for bugs • Write tests from the start for new features – E ach object has a test suite – E ach method has a test case • Automate running of tests
  66. C oming in YUI Tes t 3.0 • M ock objects • M ore simulated events • B etter error detection • New visualizations
  67. S ummary
  68. Tes t Driven Development Design Feature Pass Run Write Tests Fail Tests Write Code
  69. http://developer.yahoo.com/yui/yuitest/
  70. Ques tions ?
  71. E tcetera • M y blog: www.nczonline.net • M y email: nzakas@ yahoo-inc.com
  72. Happy tes ting !
  73. C reative C ommons Imag es Us edlords utch/74873411/ • http:/www.flickr.com/ / photos/ • http:/flickr.com/ / photos/zeer-product- reviews/ 2446364000/ • http:/flickr.com/ / photos/kristopherm/ 2230424556/ • http:/flickr.com/ / photos/adriana-lukas/846398363/ • http:/flickr.com/ / photos/quas/ 313957/ • http:/flickr.com/ / photos/ 27061495/ mc/ • http:/flickr.com/ / photos/oberazzi/ 318947873/ • http:/flickr.com/ / photos/cristic/359572656/

×