Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript testing should be awesome

563 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Javascript testing should be awesome

  1. 1. Behaviour Driven Development Javascript testing should be awesome [ ] SFEIR BOF 4/19/2013
  2. 2. Agenda ● A little story ● A definition of acceptance tests ● Some history ● "Awesome" Tools matter ● tested frameworks ● demos ● Q & A
  3. 3. Disclaimer All what I'll say is correct and could eventually be totally wrong and idiot.
  4. 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. 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. 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. 7. How do you feel in that moment ? Photo Credit : Jill Greenberg
  8. 8. Let's solve it with java !
  9. 9. HttpUnit Euh ... we're in 2013
  10. 10. HtmlUnit but it still something you've to integrate with your project write java to test html/js ! Not that awesome yet !
  11. 11. Selenium maven plugin configuration
  12. 12. Rock star tools matter
  13. 13. Marketplace Zombie.js karma
  14. 14. Our tools Zombie.js
  15. 15. Practical part starts now
  16. 16. zombie.js Headless browser
  17. 17. Mocha Test runner
  18. 18. Jasmine syntax describe('Test SuiteCase', function() { it('Test description',function(){ // code to test }) })
  19. 19. 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
  20. 20. 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
  21. 21. npm install zombie npm install mocha Installing nodejs modules
  22. 22. Test Suite Case
  23. 23. Testing Context : login page
  24. 24. 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
  25. 25. Testing Context : talks page
  26. 26. 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
  27. 27. Demo
  28. 28. Thank you ! Q&A

×