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

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/