Behaviour Driven Development

Javascript testing shouldbe awesome

[ ]SFEIR BOF 4/19/2013

Agenda

● A little story● A definition of acceptance tests● Some history● "Awesome" Tools matter● tested frameworks● demos● Q & A

Disclaimer

All what I'll say is correct and could eventually be totally wrong and idiot.

me

Abderrazak BOUADMAWeb DeveloperWork at SFEIR

Actually at CDC-FAST to do awesome stuff on a workflow driven encrypted document signature product.

Current interests#DIY #**/*.js #CLOUD

Keep in touch

Poll

● Who ever did acceptance tests ?● Who used HttpUnit, HtmlUnit, Selenium, ...etc ?● Was it fun :P● How much would you get paid to maintain a

selenium test suite ?

a little story ...

Your BOSS sent you a mail at 5:45pm on a friday evening asking you to add two acceptance tests for the last build as it's a last minute customer request before you go out for your 1 year previously scheduled vacancy to Hawaï #nightmare

How do you feel in that moment ?

Photo Credit : Jill Greenberg

Let's solve it with java !

HttpUnit

Euh ... we're in 2013

HtmlUnit

but it still something you've to integrate with your project

write java to test html/js !

Not that awesome yet !

Seleniummaven plugin configuration

Rock star tools matter

Marketplace

Zombie.js

karma

Our tools

Zombie.js

Practical part starts now

zombie.js

Headless browser

Mocha

Test runner

Jasmine syntax

describe('Test SuiteCase', function() { it('Test description',function(){

// code to test })})

var Browser = require("zombie")var assert = require("assert")

browser = new Browser()

describe('Zombie Test SuiteCase', function() { it('User test@sfeir.com should login correctely',function(){

browser.visit(baseUrl, function() {browser.

fill("uEmail", 'test@sfeir.com').fill("uPassword", 'test').pressButton("Sign in", function() {

assert.ok(browser.success)assert.ok(browser.query("conferenceTable"))

})})

})})

zombie.js : example

Pros & Cons

PROs CONs

Headless Browser It's not a real Browser (emulates)

Full HTML5 compliant doesn't really work under windows (who cares ?)

Generates XUnit no page screenshot

Complete Browsing API , CSS selectors

Insanely simple to get started with

npm install zombie

npm install mocha

Installing nodejs modules

Test Suite Case

Testing Context : login page

Login test caseAs a non connected user

I insert test@sfeir.com as email

I insert test as password

I click on [login] button

I expect a 200 Http response,

I expect a cookie username=abderrazak

Testing Context : talks page

Talks test caseAs test@sfeir.com

I insert a track name, time slot, speaker email

I click on [add] button

I expect there's a new row within the tracks table

I expect that track counter raised up

I expect that the rank of the latest track is 0

Demo

Thank you !Q&A