Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit

Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit 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)

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

JS Application Architectures (cont.) 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

Application Architectures (cont.) 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

JavaScript Essence 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

JavaScript Tools and Libraries

Firefox Extensions Web Developer Firebug ROCKS

Development Environments IDEA Eclipse TextMate ?

prototype.js Library 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.

Asset Packager 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

clock.js 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

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

Client-Server Communication: Let me count the ways 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

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

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] } }

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

AJAX+HTML 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

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

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.

Solving Latency 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

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)

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

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

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

Server Proxy 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)

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

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

Cookie Library 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

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.

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

Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit (20)

Recently uploaded (20)

Writing and Testing JavaScript-heavy Web 2.0 apps with JSUnit