• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Test Driven Development With YUI Test (Ajax Experience 2008)
 

Test Driven Development With YUI Test (Ajax Experience 2008)

on

  • 10,229 views

My presentation at Ajax Experience 2008 about test driven development for JavaScript using YUI Test.

My presentation at Ajax Experience 2008 about test driven development for JavaScript using YUI Test.

Statistics

Views

Total Views
10,229
Views on SlideShare
10,158
Embed Views
71

Actions

Likes
14
Downloads
225
Comments
2

5 Embeds 71

http://www.linkedin.com 21
http://askqtp.blogspot.com 19
http://www.slideshare.net 19
http://www.askqtp.com 7
https://www.linkedin.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • The point is that server responses should be tested on the server, not by JavaScript. JavaScript should test JavaScript, the server should test the server.
    Are you sure you want to
    Your message goes here
    Processing…
  • I missed your talk, so I hope you can answer it here: Whats wrong with using async testing for ajax responses? Whats the alternative?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Test Driven Development With YUI Test (Ajax Experience 2008) Test Driven Development With YUI Test (Ajax Experience 2008) Presentation Transcript

    • 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
    • Tes t Driven Development Design Features Run Write Tests Tests Write Code
    • 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
    • Tes t Driven Development Design Features Run Write Tests Tests Write Code
    • 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 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
    • Writing Tes ts with YUI Tes t: E xample Write Tests
    • Failing is g ood!
    • Tes t Driven Development Design Features Run Write Tests Tests Write Code
    • 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 t Driven Development Design Features Run Write Tests Tests 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 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
    • Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
    • Updating Tes ts : E xample Write Tests
    • Updating Tes ts : E xample Write Tests
    • Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
    • Fixing the Feature: E xample Write Code
    • Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
    • Tes ting the Fix: E xample Run Tests
    • Tes t Driven Development Bug Reported Pass Run Write Tests Fail Tests Write Code
    • 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 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 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
    • 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/