Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
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
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
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
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
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)
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
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