Test Driven Development With YUI Test (Ajax Experience 2008)

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


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


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


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


WriteCode

DesignFeatures

RunTests

Testing the Feature: Example

Run Tests

WriteTests


WriteCode

DesignFeatures

RunTests Fail

Implementing the Feature: Example

WriteCode

WriteTests


WriteCode

DesignFeatures

RunTests Fail

Testing the Feature: Example

Run Tests

WriteTests


WriteCode

DesignFeatures

RunTests Fail

Pass