Lightning talk from FESuffolk

1. Javascript is
software too!
(so where are the unit tests?)
Kerry Buckley — @kerryb
FESuffolk lightning talk 25 March 2013

2. http://www.flickr.com/photos/saparevo/4948914064

3. http://www.flickr.com/photos/igormazic/299854107

4. UT No Yes ut/)
No [107] (http://lbrtw.com/javascript-unit-
Developed as a learning project
test-framework-part-1)
JSUnit Yes No Yes No [108] (http://www.jsunit.net/)
JSUnit is no longer actively maintain
Enhance JS Yes ed
No Yes No [10 6]
QUnit Port of Enhance PHP
Yes Yes [109] (http://qunitjs.com/)
jQuery test harness
RhUnit [110]
Yes Yes
(http://www.iankent.co.uk/rhunit/) QUnit compatible Rhino/JUnit framew
Crosscheck ork
No Yes [10 7]
J3Unit Browserless java-based framework
Yes No [111] (http://j3unit.sourceforge.net/)
Mocha No Yes [112]
Yes Yes
(http://visionmedia.github.com/moch
JSNUnit a/)
Yes No [10 8]
YUI Test Yes Yes Yes Yes [10 9]
JSSpec
Yes No [11 0]
UnitTesting Behaviour-driven development framew
Yes ork
No [11 1]
script.aculo.us javascript test harness
JSpec [113]
Yes Yes Highly readable BDD, 50+ matchers
(http://visionmedia.github.com/jspec) , DOM / framework independent,
async, rhino, node.js support and mo
re (no longer maintained)
Jasmine [114] BDD, framework independent, easy
Yes Yes integration with Ruby projects
(http://pivotal.github.com/jasmine) and continuous builds. Allows for bot
h DOM-less testing and
screw-unit asynchronous testing.
Yes No [11 2]
Requires jQuery
Test.Simple No[11 3] Yes Yes No [11 4] Write TAP-emitting unit tests in JavaSc
ript and run them in your
browser.
Test.More No[1] Yes Yes No [11 5] Write TAP-emitting unit tests in JavaSc
ript and run them in your
TestCase browser.
Yes No [11 6]
TestIt
Yes Yes [11 7]
jsUnitTest Light-weight, non-polluting, and eas
Yes y to set up and use
Yes[11 8]
JSTest Based on TestCase but without the Pro
Yes totype dependency
No [11 9]
Light-weight, non-polluting browser-b
JSTest.NET ased framework
No Yes [115] (http://jstest.codeplex.com) Browserless JavaScript unit test runner
for use with MsTest, XUnit,
jsUnity Yes NUnit, etc.
No Yes Yes [116] (http://jsunity.com/)
RhinoUnit Context-agnostic (JavaScript, JScript
No Yes [12 0] (ASP/WSH), Rhino, etc.)
Rhino-based framework that allows test
JasUnit s to be run in Ant
Yes No Yes No [12 1] Light-weight framework. Part of a pro
ject that provides Mocks and
IoC.)
FireUnit
Yes No [117] (http://fireunit.org/) Testing framework that provides loggin
g and viewing within a new
tab of Firebug.
Js-test-
driver Yes Yes No [12 2] The goal of JsTestDriver is to build a
JavaSc

7. describe "2 + 2", ->
it "is 4", ->
expect(2 + 2).toEqual 4
describe("2 + 2", function() {
it("should be 4", function() {
expect(2 + 2).toEqual(4);
});
});

8. $ jasmine-headless-webkit -c
Running Jasmine specs...
.
PASS: 1 test, 0 failures, 0.003 secs.
Test ordering seed: --seed 2026

10. encrypt = ->
plainText = $("#plain-text").val()
$.get "/encrypt", {text: plainText}, update
update = (data) ->
$("#encrypted-text").val data.text
$ ->
$("#plain-text").keyup encrypt

11. source "https://rubygems.org"
...
group :development, :test do
...
gem "jasmine-headless-webkit"
gem "jasmine-spec-extras"
end

12. src_files:
- ["application.js"]
helpers:
- helpers/**/*
spec_files:
- "**/*[Ss]pec.*"
src_dir:
- app/assets/javascripts
- vendor/assets/javascripts
spec_dir: spec/javascripts

13. describe "Encryptor", ->
beforeEach ->
loadFixtures "encryptor.html"
describe ".update", ->
...
<input id="plain-text" />
<input id="encrypted-text" />

14. describe "Encryptor", ->
beforeEach ->
loadFixtures "encryptor.html"
describe ".update", ->
it "sets the #encrypted-text element's value to the
supplied data's text attribute", ->
update {text: "foo"}
expect($("#encrypted-text").val()).toEqual "foo"

15. Running Jasmine specs...
F
FAIL: 1 test, 1 failure, 0.003 secs.
Encryptor .update sets the #encrypted-text
element's value to the supplied data's text
attribute. (...spec/javascripts/
encryptor_spec.coffee:3)
ReferenceError: Can't find variable: update

16. // Generated by CoffeeScript 1.6.1
(function() {
var encrypt, update;
encrypt = function() {
var plainText;
plainText = $("#plain-text").val();
return $.get("/encrypt", {
text: plainText
}, update);
};
update = function(data) {
return $("#encrypted-text").val(data.text);
};
$(function() {
return $("#plain-text").keyup(encrypt);
});
}).call(this);

17. class Encryptor
constructor: ->
$("#plain-text").keyup @encrypt
encrypt: =>
plainText = $("#plain-text").val()
$.get "/encrypt", {text: plainText}, @update
update: (data) =>
$("#encrypted-text").val data.text
$ ->
window.encryptor = new Encryptor

18. describe ".encrypt", ->
it "requests encryption of the #plain-text field,
calling .update on success", ->
$("#plain-text").val "foo"
spyOn $, "get"
window.encryptor.encrypt()
expect($.get).toHaveBeenCalledWith "/encrypt",
{text: "foo"}, window.encryptor.update

19. someObject = {doSomething: ->}
describe "an easy mistake to make", ->
it "catches me out all the time", ->
spyOn someObject, "doSomething"
# Should fail – I'm not calling doSomething
expect(someObject.doSomething).toHaveBeenCalled
Running Jasmine specs...
.
PASS: 1 test, 0 failures, 0.004 secs.
Test ordering seed: --seed 7220

21. Tuesday 2 April, 7pm
The Brewery Tap