Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit Authors: Alex Chaffee, Pivotal Labs Edward Hieatt, Pivotal Labs

Authors:

Alex Chaffee, Pivotal Labs

Edward Hieatt, Pivotal Labs

Abstract With the advent of the so-called Web 2.0 platform, more and more applications are using client-side JavaScript for vital features. In fact, some applications are so JS-heavy that they redefine JavaScript as a full-fledged application development language. In this tutorial we discuss some architectural considerations of JS- and AJAX-heavy applications and present in detail our testing framework, with plenty of code examples and live demos.

JS Application Architectures Traditional: Minimal JS JS for validation JS for user responsiveness JS for DHTML JS for layout tweaks (where CSS falls down)

Traditional: Minimal JS

JS for validation

JS for user responsiveness

JS for DHTML

JS for layout tweaks (where CSS falls down)

JS Application Architectures (cont.) AJAX Architecture Widgets and functions live on client Use XMLHttpRequest for immediate or background requests to server Use JSON or XML for data transport

AJAX Architecture

Widgets and functions live on client

Use XMLHttpRequest for immediate or background requests to server

Use JSON or XML for data transport

JS Application Architectures (cont.) Dynamic Architecture: server-generated JS RJS Google Web Toolkit Big advantage: unified codebase -> DRY Disadvantages: Latency Harder to test

Dynamic Architecture: server-generated JS

RJS

Google Web Toolkit

Big advantage:

unified codebase -> DRY

Disadvantages:

Latency

Harder to test

Application Architectures (cont.) Client-Server JS MVC: Heavy JS In this architecture, the JavaScript code takes the form of a full-fledged application. Using JSON to transfer data back and forth between the server-side API, the JavaScript application maintains its own domain objects and executes its own business rules. Can violate DRY

Client-Server

JS MVC: Heavy JS

In this architecture, the JavaScript code takes the form of a full-fledged application. Using JSON to transfer data back and forth between the server-side API, the JavaScript application maintains its own domain objects and executes its own business rules.

Can violate DRY

Application Architectures (cont.) Hybrid Naturally, you can mix and match the above techniques Complicates your coding and testing Can violate DRY

Hybrid

Naturally, you can mix and match the above techniques

Complicates your coding and testing

Can violate DRY

Testing Strategies Unit Testing: JSUnit Integration Testing: Selenium WATIR

Unit Testing:

JSUnit

Integration Testing:

Selenium

WATIR

JavaScript Essence Dynamic Interpreted Prototype-based OO Object = Hash Everything (even Function) is a Hash Sort of a mutant hybrid of Java and Ruby

Dynamic

Interpreted

Prototype-based OO

Object = Hash

Everything (even Function) is a Hash

Sort of a mutant hybrid of Java and Ruby

JavaScript Cons Functions have loose binding “ this” isn't always correct Workaround: Use bind (part of prototype.js) Frustrating syntax and semantics Symbols are globally scoped by default You must remember “this” Too easy to make global variables null vs. undefined vs. 0 All members are public No OO inheritance Several hacks to simulate inheritance Rely more on composition Browser differences (esp. DOM API) and bugs No “include” or “require” We rolled our own Painful debugging Unreliable stack traces Two different GCs Memory leaks via DOM Third-party libraries rarely tested

Functions have loose binding

“ this” isn't always correct

Workaround: Use bind (part of prototype.js)

Frustrating syntax and semantics

Symbols are globally scoped by default

You must remember “this”

Too easy to make global variables

null vs. undefined vs. 0

All members are public

No OO inheritance

Several hacks to simulate inheritance

Rely more on composition

Browser differences (esp. DOM API) and bugs

No “include” or “require”

We rolled our own

Painful debugging

Unreliable stack traces

Two different GCs

Memory leaks via DOM

Third-party libraries rarely tested

JavaScript Tools and Libraries

Firefox Extensions Web Developer Firebug ROCKS

Web Developer

Firebug ROCKS

Development Environments IDEA Eclipse TextMate ?

IDEA

Eclipse

TextMate

?

prototype.js Library bind $ $H, $A, each, etc. extend Ajax.Request Element.hide Other useful stuff

bind

$

$H, $A, each, etc.

extend

Ajax.Request

Element.hide

Other useful stuff

JS UI libraries script.aculo.us Very Good Popular (easy to find help) Yahoo UI Excellent Drag and drop, animation, calendar, etc.

script.aculo.us

Very Good

Popular (easy to find help)

Yahoo UI

Excellent

Drag and drop, animation, calendar, etc.

Asset Packager Combines multiple JS files into one Also CSS Reduces Latency Also Steve Conover’s inline merger looks promising

Combines multiple JS files into one

Also CSS

Reduces Latency

Also Steve Conover’s inline merger looks promising

JSUnit “ Controlling The Insanity” Unit Testing is essential for all but the most trivial JavaScript

“ Controlling The Insanity”

Unit Testing is essential for all but the most trivial JavaScript

Pivotal Assertions

clock.js Testing utility class we wrote Overrides setTimeout Allows unit testing of time-based operations without sleeping

Testing utility class we wrote

Overrides setTimeout

Allows unit testing of time-based operations without sleeping

ajax.js AjaxUnit Overrides Prototype AJAX classes Stubs out the network interface Allows unit testing of AJAX calls

AjaxUnit

Overrides Prototype AJAX classes

Stubs out the network interface

Allows unit testing of AJAX calls

Mock Objects in JS We don’t know of any real mocking framework for JS We use stubs, spies, object mothers and mock methods

We don’t know of any real mocking framework for JS

We use stubs, spies, object mothers and mock methods

Client-Server Communication

Client-Server Communication: Let me count the ways HTTP Including GET, POST, cookies, etc. CGI AJAX+XML AJAX+JSON AJAX+HTML AJAX+JS RJS

HTTP

Including GET, POST, cookies, etc.

CGI

AJAX+XML

AJAX+JSON

AJAX+HTML

AJAX+JS

RJS

AJAX “ Asynchronous JavaScript And XML” Client calls server with CGI GET or POST via XMLHttpRequest API Server responds Client does something without redrawing entire page

“ Asynchronous JavaScript And XML”

Client calls server with CGI GET or POST via XMLHttpRequest API

Server responds

Client does something without redrawing entire page

AJAX+XML Response contains XML Original implementation of AJAX Not used much now (?) I've heard of doing XSL but that's mostly on IE-only apps

Response contains XML

Original implementation of AJAX

Not used much now (?)

I've heard of doing XSL but that's mostly on IE-only apps

JSON Evaluates to JS values (hashes and arrays) Example: { "Image": { "Width": 800, "Height": 600, "Title": "View from 15th Floor", "Thumbnail": { "Url": "http: //scd.mmb1.com/image/481989943", "Height": 125, "Width": "100" }, "IDs": [116, 943, 234, 38793] } }

Evaluates to JS values (hashes and arrays)

Example:

{ "Image": { "Width": 800, "Height": 600, "Title": "View from 15th Floor", "Thumbnail": { "Url": "http: //scd.mmb1.com/image/481989943", "Height": 125, "Width": "100" }, "IDs": [116, 943, 234, 38793] } }

AJAX+JSON (AJAJ?) Proper client-server communication Client sends requests in CGI, gets responses as pure data Client evaluates data, actively performs response Interacts with DOM Creates/removes/modifies/copies HTML elements

Proper client-server communication

Client sends requests in CGI, gets responses as pure data

Client evaluates data, actively performs response

Interacts with DOM

Creates/removes/modifies/copies HTML elements

AJAX+HTML Server executes RHTML/JSP/etc. AJAX response contains HTML Client splats it onto the page

Server executes RHTML/JSP/etc.

AJAX response contains HTML

Client splats it onto the page

AJAX+JS AJAX response contains JavaScript code Client calls eval() on it Powerful and a little scary Hard to test

AJAX response contains JavaScript code

Client calls eval() on it

Powerful and a little scary

Hard to test

RJS Part of Ruby on Rails Generates JS via Ruby methods Not as scary as raw JS since it’s coming from a tested library

Part of Ruby on Rails

Generates JS via Ruby methods

Not as scary as raw JS since it’s coming from a tested library

Latency: The AJAX killer This AJAX stuff really is client-server communication If the server is slow, your app crawls to a halt -- and inside a page, not just between pages Less user feedback for a hung AJAX call Can lead to multiple clicks, reloads, confusion, etc.

This AJAX stuff really is client-server communication

If the server is slow, your app crawls to a halt -- and inside a page, not just between pages

Less user feedback for a hung AJAX call

Can lead to multiple clicks, reloads, confusion, etc.

Solving Latency The Easy Way: Use a spinny icon Still requires UI/UE design

The Easy Way:

Use a spinny icon

Still requires UI/UE design

Solving Latency The Hard Way: To solve, you must write a lot of code on the client to react immediately to user actions, then queue up requests and deal gracefully once the server reponds Error handling Command queue Undo Dynamic/incremental data updates This leads naturally to true MVC in JS

The Hard Way:

To solve, you must write a lot of code on the client to react immediately to user actions, then queue up requests and deal gracefully once the server reponds

Error handling

Command queue

Undo

Dynamic/incremental data updates

This leads naturally to true MVC in JS

JS MVC Architecture JSON Model Objects Notify View Components Render DOM User Events Enqueue Command Objects Execute / undo AJAX (CGI)

Integration Testing with Selenium Selenium… Runs in the browser Executes your app in a frame Simulates user actions via JavaScript Goes all the way to the server and back Complementary to JSUnit JSUnit tests JS pages and libraries only, not interaction with server Selenium is fun to watch Integrated into Continuous Integration like JSUnit Catch our talks on Wednesday (Selenium) and Thursday (CI)

Selenium…

Runs in the browser

Executes your app in a frame

Simulates user actions via JavaScript

Goes all the way to the server and back

Complementary to JSUnit

JSUnit tests JS pages and libraries only, not interaction with server

Selenium is fun to watch

Integrated into Continuous Integration like JSUnit

Catch our talks on Wednesday (Selenium) and Thursday (CI)

Q&A

More Examples

Clock We wrote our JS “Mock Clock” test-first Actually, it’s a stub, not a mock :-) Illustrates a true (isolated) unit test of a utility class

We wrote our JS “Mock Clock” test-first

Actually, it’s a stub, not a mock :-)

Illustrates a true (isolated) unit test of a utility class

Weaver The Weaver takes two arrays and returns the set of changes required to transform one into the other Used by Tracker’s list widgets Illustrates use of roll-your-own test spies

The Weaver takes two arrays and returns the set of changes required to transform one into the other

Used by Tracker’s list widgets

Illustrates use of roll-your-own test spies

DateWidget We wrapped Yahoo’s YUI Calendar widget to add a text field with validation and pop-up-on-activate Illustrates Testing with UI events Using a “demo.html” page Wrapping a third-party widget with tests

We wrapped Yahoo’s YUI Calendar widget to add a text field with validation and pop-up-on-activate

Illustrates

Testing with UI events

Using a “demo.html” page

Wrapping a third-party widget with tests

Server Proxy Illustrates AjaxUnit (ajax.js) mocking out the networking layer

Illustrates AjaxUnit (ajax.js) mocking out the networking layer

Add Note Command Tests the command which adds a note (comment) to a story Does not test the networking layer, just the command object Demonstrates use of stubs and object mother (JsonFactory)

Tests the command which adds a note (comment) to a story

Does not test the networking layer, just the command object

Demonstrates use of stubs and object mother (JsonFactory)

Login Widget PeerToPatent uses page caching, so we have to render the “you’re logged in / please log in” area of the screen in JavaScript

PeerToPatent uses page caching, so we have to render the “you’re logged in / please log in” area of the screen in JavaScript

Cacheable Flash Not that kind of Flash… “Flash” is Rails for “Message Box” In order for dynamic information to be rendered inside of a statically cached page, we put it into a cookie, and render the cookie’s contents with JavaScript

Not that kind of Flash… “Flash” is Rails for “Message Box”

In order for dynamic information to be rendered inside of a statically cached page, we put it into a cookie, and render the cookie’s contents with JavaScript

Cookie Library Illustrates testing a third-party library We found bugs in it, esp. IE 7 We had to patch it

Illustrates testing a third-party library

We found bugs in it, esp. IE 7

We had to patch it

JS Paginator Illustrates receiving JSON with data Download (actually render) entire data set on page load, then render some at a time Doesn’t scale to large datasets, like Rico LiveGrid does

Illustrates receiving JSON with data

Download (actually render) entire data set on page load, then render some at a time

Doesn’t scale to large datasets, like Rico LiveGrid does

Experimentation Since this is an agile conference, if there's time and interest, we can get volunteers from the audience to come up and pair program with the presenters on stage. solving problems posed by the audience.

Since this is an agile conference, if there's time and interest, we can get volunteers from the audience to come up and pair program with the presenters on stage. solving problems posed by the audience.

Where to find more info? http://jsunit.net http://pivotallabs.com

http://jsunit.net

http://pivotallabs.com