Test Driven Development With YUI Test (Ajax Experience 2008)

Tes t Driven Development with YUI Tes t Nicholas C . Zakas P rincipal Front E nd E ngineer, Yahoo!

Who's this g uy? • P rincipal Front E nd E ngineer, Yahoo! Front P age • YUI C ontributor • Author

Tes t Driven Development Design Features Run Write Tests Tests Write Code

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

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

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

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

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

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

YUI Tes t Cheatsheet Narrative Functional documentation examples API documentation Write Tests

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

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

Writing Tes ts with YUI Tes t Write Tests

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

Writing Tes ts with YUI Tes t: E xample Write Tests

Failing is g ood!

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

Implementing the Feature: E xample Write Code

Tes ting the Feature: E xample Run Tests

Tes t Driven Development Design Features Run Write Tests Fail Tests Write Code

Implementing the Feature: E xample Write Code

Tes t Driven Development Design Features Run Write Tests Fail Tests Write Code

Tes ting the Feature: E xample Run Tests

Tes t Driven Development Design Features Pass Run Write Tests Fail Tests Write Code

Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code

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: – 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

Updating Tes ts : E xample Write Tests

Fixing the Feature: E xample Write Code

Tes ting the Fix: E xample Run Tests

Tes t Driven Development Design Feature Pass Run Write Tests Fail Tests Write Code

TDD C halleng es on the Web

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

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)

E vent S imulation with YUI Tes t

E vent S imulation Example

E vent S imulation Us es • Test reusable widgets (YUI does this) • Functional tests (a la S elenium) • Fun!

As ynchronous Tes ts • Two ways to accomplish: – C all wait(func, delay) – C all wait(timeout) and then resume(func)

As ynchronous Tes ts

As ynchronous Tes ting E xample

WARNING! Asynchronous testing should not be used for testing Ajax responses.

Other YUI Tes t Features

Tes t S uites

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

Tes tR unner E vents • pass • ignore • fail • begin • complete • testcasebegin • testcasecomplete • testsuitebegin • testsuitecomplete

Tes tR unner E vents

Tes t R eporting

R ecommendations

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

C oming in YUI Tes t 3.0 • M ock objects • M ore simulated events • B etter error detection • New visualizations

S ummary

Tes t Driven Development Design Feature Pass Run Write Tests Fail Tests Write Code

http://developer.yahoo.com/yui/yuitest/

Ques tions ?

E tcetera • M y blog: www.nczonline.net • M y email: nzakas@ yahoo-inc.com

Happy tes ting !

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/

Test Driven Development With YUI Test (Ajax Experience 2008)

2 comments

Notes on slide 1

7 Favorites