![Page 1: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/1.jpg)
Test Driven Development with YUI Test
Nicholas C. ZakasPrincipal Front End Engineer, Yahoo!
![Page 2: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/2.jpg)
Who's this guy?• Principal Front End Engineer, Yahoo!
Front Page• YUI Contributor• Author
![Page 3: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/3.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
![Page 4: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/4.jpg)
Why Test Driven Development?• No such thing as a small change• S pecifically identifies tasks• You understand your code the best• Upfront investment pays off later• QA resources are limited• Peace of mind
![Page 5: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/5.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
![Page 6: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/6.jpg)
The Requirements• Usually, requirements are functional• Translate into interfaces (objects and
methods)• Describe what each method should do in
terms of inputs and outputs
DesignFeatures
![Page 7: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/7.jpg)
The Requirements• Need: When a username is entered,
ignore spaces at the beginning and end of text
• Translation: I need a trim function• Trim function:
– Remove leading white space from the given string and return result
– Remove trailing white space from the given string and return result
DesignFeatures
![Page 8: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/8.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
![Page 9: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/9.jpg)
Unit Tests• Test a small, isolated part of code (unit)
– Unit = method
• Test inputs and outputs– One set at a time
• Test: “Given this input, I expect this output.”
WriteTests
![Page 10: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/10.jpg)
Unit Testing Complaints• Ramp-up time• Unfamiliar syntax/concepts• Test harness setup is hard• Writing tests takes too long• Can't figure out what broke when a test
fails
WriteTests
![Page 11: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/11.jpg)
YUI Test• Unit testing framework for JavaS cript• Built on top of YUI• “Dogfooded” by YUI
– S ee “tests” directory in download
• Extensive documentation:http://developer.yahoo.com/yui/yuitest/
WriteTests
![Page 12: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/12.jpg)
YUI Test
WriteTests
Narrative documentation
Functional examples
API documentation
Cheatsheet
![Page 13: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/13.jpg)
Goals of YUI Test• Easy to write your first test• S imple, logical syntax• Works the way JavaS cript works• Get up and running fast• Useful failure messages out of the box• Works with any code, not just YUI
– Prototype, jQuery, Dojo, etc., welcome!
WriteTests
![Page 14: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/14.jpg)
Getting S tarted with YUI Test• Create an HTML page• Include required JavaS cript/CS S files• Include JavaS cript to test• Write one or more tests• Include boilerplate JavaS cript• Open page in browser
WriteTests
![Page 15: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/15.jpg)
Writing Tests with YUI Test
WriteTests
![Page 16: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/16.jpg)
Writing Tests with YUI Test
WriteTests
![Page 17: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/17.jpg)
Writing Tests with YUI Test: Example
• Trim function:– Remove leading white space from the given
string and return result– Remove trailing white space from the given
string and return result
WriteTests
![Page 18: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/18.jpg)
Writing Tests with YUI Test: Example
WriteTests
![Page 19: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/19.jpg)
Writing Tests with YUI Test:Example
WriteTests
![Page 20: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/20.jpg)
Failing is good!
![Page 21: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/21.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
![Page 22: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/22.jpg)
Implementing the Feature
• S tart with first failed test• Write code to make that test pass• Move on to second failed test• Write code to make that test pass• Etc.
WriteCode
![Page 23: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/23.jpg)
Implementing the Feature: Example
WriteCode
![Page 24: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/24.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
![Page 25: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/25.jpg)
Testing the Feature: Example
Run Tests
![Page 26: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/26.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
![Page 27: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/27.jpg)
Implementing the Feature: Example
WriteCode
![Page 28: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/28.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
![Page 29: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/29.jpg)
Testing the Feature: Example
Run Tests
![Page 30: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/30.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
Pass
![Page 31: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/31.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
Pass
![Page 32: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/32.jpg)
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
![Page 33: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/33.jpg)
S omething Went Wrong - How?
• Incomplete test coverage• Incomplete feature definition• Unintended use of feature
Bug Reported
![Page 34: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/34.jpg)
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
![Page 35: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/35.jpg)
S omething Went Wrong - What?
• Trim function:– Remove leading white space from the given
string and return result– Remove 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
![Page 36: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/36.jpg)
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
![Page 37: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/37.jpg)
Updating Tests : Example
WriteTests
![Page 38: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/38.jpg)
Updating Tests : Example
WriteTests
![Page 39: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/39.jpg)
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
![Page 40: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/40.jpg)
Fixing the Feature: Example
WriteCode
![Page 41: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/41.jpg)
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
![Page 42: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/42.jpg)
Testing the Fix: Example
Run Tests
![Page 43: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/43.jpg)
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
![Page 44: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/44.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeature
RunTests Fail
Pass
![Page 45: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/45.jpg)
TDD Challenges on the Web
![Page 46: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/46.jpg)
The Browser Environment• JavaS cript tied to page using events• Execution may be:
– S ynchronous– Asynchronous
• Different browsers behave differently
![Page 47: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/47.jpg)
YUI Test Helps• S imple event simulation across all A-
grade browsers– And some others!
• Asynchronous code testing• Different browsers...still behave
differently– (S orry)
![Page 48: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/48.jpg)
Event S imulation with YUI Test
![Page 49: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/49.jpg)
Event S imulation with YUI Test
![Page 50: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/50.jpg)
Event S imulation Example
![Page 51: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/51.jpg)
Event S imulation Uses• Test reusable widgets (YUI does this)• Functional tests (a la S elenium)• Fun!
![Page 52: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/52.jpg)
Asynchronous Tests• Two ways to accomplish:
– Call wait(func, delay)– Call wait(timeout) and then resume(func)
![Page 53: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/53.jpg)
Asynchronous Tests
![Page 54: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/54.jpg)
Asynchronous Tests
![Page 55: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/55.jpg)
Asynchronous Testing Example
![Page 56: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/56.jpg)
WARNING!Asynchronous testing should not be
used for testing Ajax responses.
![Page 57: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/57.jpg)
Other YUI Test Features
![Page 58: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/58.jpg)
Test S uites
![Page 59: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/59.jpg)
Test S uites
![Page 60: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/60.jpg)
Hooking into TestRunner• TestRunner is completely event-driven• Each event provides the results to that
point• TestLogger is just a base visualization• Design your own visualization
![Page 61: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/61.jpg)
TestRunner Events• pass• ignore• fail• begin• complete• testcasebegin• testcasecomplete• testsuitebegin• testsuitecomplete
![Page 62: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/62.jpg)
TestRunner Events
![Page 63: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/63.jpg)
Test Reporting
![Page 64: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/64.jpg)
Recommendations
![Page 65: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/65.jpg)
Ramping 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– Each object has a test suite– Each method has a test case
• Automate running of tests
![Page 66: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/66.jpg)
Coming in YUI Test 3.0• Mock objects• More simulated events• Better error detection• New visualizations
![Page 67: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/67.jpg)
S ummary
![Page 68: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/68.jpg)
WriteTests
Test Driven Development
WriteCode
DesignFeature
RunTests Fail
Pass
![Page 69: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/69.jpg)
http://developer.yahoo.com/yui/yuitest/
![Page 70: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/70.jpg)
Questions?
![Page 71: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/71.jpg)
Etcetera
• My blog: www.nczonline.net• My email: nzakas@ yahoo-inc.com
![Page 72: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/72.jpg)
Happy testing!
![Page 73: Test Driven Development With YUI Test (Ajax Experience 2008)](https://reader034.vdocuments.site/reader034/viewer/2022051412/54b783ed4a7959166f8b460a/html5/thumbnails/73.jpg)
Creative Commons Images Used
• http://www.flickr.com/photos/lordsutch/74873411/• 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/mc/27061495/• http://flickr.com/photos/oberazzi/318947873/• http://flickr.com/photos/cristic/359572656/