Post on 15-Jan-2015
description
Test Driven Development with YUI Test
Nicholas C. ZakasPrincipal Front End Engineer, Yahoo!
Who's this guy?• Principal Front End Engineer, Yahoo!
Front Page• YUI Contributor• Author
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
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
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
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
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
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
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
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
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
YUI Test
WriteTests
Narrative documentation
Functional examples
API documentation
Cheatsheet
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
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
Writing Tests with YUI Test
WriteTests
Writing Tests with YUI Test
WriteTests
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
Writing Tests with YUI Test: Example
WriteTests
Writing Tests with YUI Test:Example
WriteTests
Failing is good!
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
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
Implementing the Feature: Example
WriteCode
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests
Testing the Feature: Example
Run Tests
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
Implementing the Feature: Example
WriteCode
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
Testing the Feature: Example
Run Tests
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
Pass
WriteTests
Test Driven Development
WriteCode
DesignFeatures
RunTests Fail
Pass
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
S omething Went Wrong - How?
• Incomplete test coverage• Incomplete feature definition• Unintended use of feature
Bug Reported
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
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
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
Updating Tests : Example
WriteTests
Updating Tests : Example
WriteTests
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
Fixing the Feature: Example
WriteCode
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
Testing the Fix: Example
Run Tests
WriteTests
Test Driven Development
WriteCode
Bug Reported
RunTests Fail
Pass
WriteTests
Test Driven Development
WriteCode
DesignFeature
RunTests Fail
Pass
TDD Challenges on the Web
The Browser Environment• JavaS cript tied to page using events• Execution may be:
– S ynchronous– Asynchronous
• Different browsers behave differently
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)
Event S imulation with YUI Test
Event S imulation with YUI Test
Event S imulation Example
Event S imulation Uses• Test reusable widgets (YUI does this)• Functional tests (a la S elenium)• Fun!
Asynchronous Tests• Two ways to accomplish:
– Call wait(func, delay)– Call wait(timeout) and then resume(func)
Asynchronous Tests
Asynchronous Tests
Asynchronous Testing Example
WARNING!Asynchronous testing should not be
used for testing Ajax responses.
Other YUI Test Features
Test S uites
Test S uites
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
TestRunner Events• pass• ignore• fail• begin• complete• testcasebegin• testcasecomplete• testsuitebegin• testsuitecomplete
TestRunner Events
Test Reporting
Recommendations
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
Coming in YUI Test 3.0• Mock objects• More simulated events• Better error detection• New visualizations
S ummary
WriteTests
Test Driven Development
WriteCode
DesignFeature
RunTests Fail
Pass
http://developer.yahoo.com/yui/yuitest/
Questions?
Etcetera
• My blog: www.nczonline.net• My email: nzakas@ yahoo-inc.com
Happy testing!
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/