SF jQuery Conf: Packaging Code With Testable J Query Plugins

Packaging Your Code with
Testable jQuery Plugins
Andy Peterson

Testing, Plugins, Integrating, etc

Andy Peterson • andy@carbonﬁve.com • SF jQuery Conf • April 2010 Copyright (c) 2010 Andrew J. Peterson

You

jQuery Plugins?

Tested Javascript?

Selenium or other UI tests?


Andy Peterson

started with commercial & enterprise
desktop software (Mac), then consulting

agile practices and disciplines

Javascript-- dabbled for the last few
years, but over the last 9 months, feel like
it’s become a part of my professional
practice


Software services company with ofﬁces in San
Francisco and Los Angeles. 20 people

We're an agile shop, focus on RoR & Java webapp
dev along with more mobile

1/2 our work is bootstrapping startups


Why am I here?

We didn't have a good story about Javascript
testing

Which led us to develop practices

Which fed back into how we approach
Javascript coding in general


Agenda
Javascript testing is hard. Why?

demo

The Trick: UNIT test + Plugins

problems & solutions


We Don’t Try

Andy Peterson • andy@carbonﬁve.com • SF jQuery Conf • April 2010

Why We Don’t Try

Never did it before

Had a bad experience

Patterns unclear

No infrastructure

App’s not complicated enough


Too May Tools

http://www.slideshare.net/jeresig/understanding-javascript-testing

Nobody Else Does


And when we tried...


page.[dynamic]

<html>
<head>
<link href=”site.css” type=”text/stylesheet” />
<script src=‘page.js’ type=”text/javascript”>
</script>
<body>
<h1>Joe’s Page</h1>
...
</body>
</html>


page.js

$(function() {
$(‘h1’).css(‘color’,‘red’);
});


Test on the Page?

Screw.Unit(function() {
it(‘should change to red’, function() {
expect($(‘h1’).css(‘color’)).to(equal,‘red’);
});
});


Brings Up Lots of Qs
How do I get the markup (if dynamic)?

“on ready” timing

What happens when other things happen on
this page? As it evolves?

How do I know it really did something?

(Pre-conditions)


Whew!


Why is it so
complicated?
We’re trying to build integration tests--

page markup + lifecycle

multiple javascript sources

Lots of pieces to integrate

browsers, test engines, integration servers,
developer machines


Simplify???


Plugins + Unit Test
it’s a good solution to lots of problems

Plugins Solve

Separate from “on doc ready” timing

clear testing pattern

provide good modularity pattern

decoupled, abstract, encapulation


Plugins are Easy to
Write
(function($) {
$.fn.myPlugin = function(req, opts) {
return this.each(function() {
$(this).myStuff...
});
}
})(jQuery);


jQuery Plugin Writing

http://docs.jquery.com/Plugins/
Authoring
http://www.learningjquery.com/
2007/10/a-plugin-development-
pattern
look at event patterns


Unit Testing Solves
“test one piece at a time”


Requirements for a Tool...
Easy to Install

instant feedback & fast for TDD or BDD

reliable & automate(able)

mocking & stubbing

minimal paradigm or language shift

any browser


Which Javascript Testing
Library?

Lots to choose from

QUnit

xUnit Style: JSUnit, YUITest, etc.

BDD Style: JSSpec, JSpec,
Jasmine, ScrewUnit


We Picked Blue Ridge
(not by me)
Conventions (+ Rails Tools)

ScrewUnit (BDD)

in & out of browser with Rhino + env.js

Provides: TDD, Reliable, headless, little
paradigm shift, now multi-browser

NOTE: maven plugin too!


Install

./script/plugin install git://github.com/relevance/blue-
ridge.git

./script/generate blue_ridge

rake test:javascripts


How do we test
makeRed?

Javascript UNIT tests

source markup (ﬁxture) +

code under test

= reliable, easy entry


Rewrite as Plugin

jquery.make_red.js

jQuery.fn.makeRed = function() {
this.css(‘color’,‘red’);
});


HTML “Fixture” for Test

ﬁxtures/make_red.html
<head>
<title>Make Red Results</title>
<link rel="stylesheet" href="screw.css" type="text/css"
charset="utf-8"/>
<script type="text/javascript" src="../../../vendor/plugins/
blue-ridge/lib/blue-ridge.js"></script>
</head>
<body>
<h1 style=‘color: pink’ >gotta test...</h1>
</body>


Test with “Fixture”
/ make_red_spec.js
/
require("spec_helper.js");
require(".../make_red.js"); / code we are testing
/
Screw.Unit(function() {
before(function() {
expect($(‘h1’).css(‘color’)).to_not(equal,‘red’);
" $('h1').makeRed();
});
it(‘should change to red’, function() {
expect($(‘h1’).css(‘color’)).to(equal,‘red’);
});
});


$ rake spec:javascript
(in /Users/ndp/demo)
Running application_spec.js with ﬁxture 'ﬁxtures/
application.html'...
.

1 test(s), 0 failure(s)
0.076 seconds elapsed


Link to on Page

<html>
<head>
<script src=”.../jquery.make_red.js” />
<script type=”text/javascript”>
$(function() {
$(‘h1’).colorRed();
});
</script>


Implications of Unit
Testing
(over Integration Testing)


Must modularize code
(using events is a good approach)


Build “Fixture” HTML
seems a little counter-intuitive


Alternatives to Fixtures

generate dynamically w/ Javascript

generate -- ﬁgure out how to render your
views

“bake out” -- eg.

http://pivotallabs.com/users/jb/blog/
articles/1152-javascripttests-bind-reality-


May need simple
integration tests anyhow
(but much less)


Tricks & Gotchas?
Plugin + Unit Testing Gotchas

Remember

Javascript PLUGIN

Fixture (Input) HTML markup

Test of Plugin

Individual Units


Unit Tests

Perfect for
DOM Manipulation
Business rules
(This gets you 80-90% there!)


Plugin Becomes Complex

Use Tests to aid in Refactoring


On Doc Ready Big

Can use “controller” pattern

Can use “composing” plugin

(not testing doc ready)


Ajax

EZ: Stub/Mock out $.ajax

$.ajax = function(url, fn) {
/ assert called correctly
/
}

test success: fn separately


How to test?
$.fn.clockify = function() {
setInterval(function() {
this.html(Time().toString());
}, 1000);
}
...
/ test:
/
describe('clockify', function() {
before(function() {
$('p').clockify();
});
it('should update every second', function() {
/ ???
/
});
});

Separate setInterval()
var $j = this;
$j.updateClock();
}, 1000);
return this;
}
$.fn.updateClock = function() {
this.each(function(i, e) {
$(e).html((new Date()).toString());
});
}


Separate setInterval()
describe('clockify', function() {
before(function() {
setInterval = mock_function(setInterval);
});
it('should call setInterval with 1000', function() {
setInterval.should_be_invoked().
with_arguments(null, 1000).exactly(1);
$('p').clockify().html('running');
});
});


Or Even...
$.fn.interval = function(fn, millis) {
var $this = this;
$this.each(function() {
fn.apply(this);
}, millis);
return this;
}
$.fn.updateClock = function() {
return this.html((new Date()).toString());
}
return this.interval(function() { $(this).updateClock(); }, 1000);
}

Testing Animations Opts

skip

stub

use integration testing tools


Animations: Turning Off

jQuery.fx.off = true


Animations: Conﬁgure
$.fn.masterRadios = function(settings) {
settings = $.extend({},
$.fn.masterRadios.defaults,
settings);
...
$form.ﬁnd('.spesh').each(function(index, elem) {
settings.showFn.call($(elem));
});
}

$.fn.masterRadios.defaults = {
hideFn: jQuery.fn.hide,
showFn: jQuery.fn.show
};


Input Markup is Complex
(therefore don’t want “ﬁxture”)

Simplify

Semantic Markup?

Can Generate within Javascript (Safely)

Separate Concerns

Refactor?


Markup Evolves

Less of a problem than it seems

Sometimes you just need integration tests


Drag & Drop

Don’t try to script whole drag process

Unit test draggable, droppable

Events

Trigger & Bind


Plugins “Draw Inside the
Lines”

$(‘div.speciﬁc’).plugin()
shouldn’t affect other
nodes in the doc


Expect No Change
<html>
<body>
<div class=‘control’>
...
<div id=‘ﬁxture’>
...
<div class=‘control’>
...


Expect No Change
var control; / remember!
/
before(function() {
control = $('.control').html();
});

after(function() {
expect($('.control').html()).to(equal,
control);
});


Unit Tests v. Small Files
Keep code modular

Put units of JS in their own ﬁles (LOTS)

Share small JS with

HTML pages

Tests

Lots of options to combine at deploy time!


CSS?

Include CSS in tests

Helps visualize


What about JS Classes?
Hmm...

Use

object literals

closures

DOM nodes

Is this enuf?


Limitations

Not testing doc ready

Nor Markup generation

Nor integration of the two

THUS: Selenium-- but simpler


Other Beneﬁts
(besides testing)

Can move HTML generation where it is most
appropriate

Can move business logic to client

Less “chatty” apps


Our Experience

3 projects

deﬁnitely a net value add


Summary
prefer UNIT tests over
INTEGRATION tests for ease
of testability and
development

package as jQuery Plugins

work through tricky problems


Carbon Five
We get to work on diverse projects and learn lots
of new technologies.

We're always looking for both seasoned
developers and junior programmers to work,
please feel free to talk to me now or email me


Thanks!

andy@carbonﬁve.com

http://github.com/ndp


SF jQuery Conf: Packaging Code With Testable J Query Plugins

Recommended

Recommended

More Related Content

Similar to SF jQuery Conf: Packaging Code With Testable J Query Plugins

Similar to SF jQuery Conf: Packaging Code With Testable J Query Plugins (20)

Recently uploaded

Recently uploaded (20)

SF jQuery Conf: Packaging Code With Testable J Query Plugins

Editor's Notes