Embed Size (px)
DESCRIPTION
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.
Citation preview
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
Authors:Alex Chaffee, Pivotal Labs
Edward Hieatt, Pivotal Labs
AbstractAbstract
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.
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 ArchitecturesJS 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.)
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.)
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.)
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.)
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 StrategiesTesting Strategies
Unit Testing: JSUnit
Integration Testing: Selenium WATIR
Unit Testing: JSUnit
Integration Testing: Selenium WATIR
JavaScript EssenceJavaScript 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 ConsJavaScript 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
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
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
JavaScript Tools and Libraries
Firefox ExtensionsFirefox Extensions
Web Developer Firebug ROCKS
Web Developer Firebug ROCKS
Development EnvironmentsDevelopment Environments
IDEA Eclipse TextMate ?
IDEA Eclipse TextMate ?
prototype.js Libraryprototype.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 librariesJS 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 PackagerAsset 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
JSUnitJSUnit
“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 AssertionsPivotal Assertions
clock.jsclock.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.jsajax.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 JSMock 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
Client-Server Communication: Let me
count the ways
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
AJAXAJAX
“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+XMLAJAX+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
JSONJSON
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?)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+HTMLAJAX+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+JSAJAX+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
RJSRJS
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 killerLatency: 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 LatencySolving 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 LatencySolving 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 ArchitectureJS MVC ArchitectureJSON
ModelObjects
Notify
ViewComponents
Render
DOMUser Events
Enqueue
CommandObjectsExecute / undo
AJAX (CGI)
Integration Testing with Selenium
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&AQ&A
More ExamplesMore Examples
ClockClock
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
WeaverWeaver
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
DateWidgetDateWidget
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 ProxyServer Proxy
Illustrates AjaxUnit (ajax.js) mocking out the networking layer
Illustrates AjaxUnit (ajax.js) mocking out the networking layer
Add Note CommandAdd 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 WidgetLogin 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 FlashCacheable 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 LibraryCookie 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 PaginatorJS 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
ExperimentationExperimentation
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?Where to find more info?
http://jsunit.net http://pivotallabs.com
http://jsunit.net http://pivotallabs.com
