quick presentation of very simple tools for acceptance testing with zombieJS and MochJS

1. Behaviour Driven
Development
Javascript testing should
be awesome
[ ]
SFEIR BOF 4/19/2013

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

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

4. me
Abderrazak BOUADMA
Web Developer
Work 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

5. 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 ?

6. 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

7. How do you feel in that moment ?
Photo Credit : Jill Greenberg

8. Let's solve it with java !

9. HttpUnit
Euh ... we're in 2013

10. HtmlUnit
but it still something you've to integrate with your project
write java to test html/js !
Not that awesome yet !

11. Selenium
maven plugin configuration

17. Rock star tools matter

18. Marketplace
Zombie.js
karma

19. Our tools
Zombie.js

20. Practical part starts now

21. zombie.js
Headless browser

22. Mocha
Test runner

23. Jasmine syntax
describe('Test SuiteCase', function() {
it('Test description',function(){
// code to test
})
})

24. 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

25. 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

26. npm install zombie
npm install mocha
Installing nodejs modules

27. Test Suite Case

28. Testing Context : login page

29. Login test case
As 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

30. Testing Context : talks page

31. Talks test case
As 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

32. Demo

33. Thank you !
Q&A