Your SlideShare is downloading. ×
Js unit testing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Js unit testing

180
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
180
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript Unit-Testing Mihail Irintchev SiteGround.com
  • 2. How do you test your JS? 1. Write your JavaScript code 2. See if it works in your favourite browser 3. Change something + [F5] 4. If it doesn't work repeat #3 until you make it work or you go crazy... 5. In case you made it work, discover few days/weeks later that it doesn't work in another browser
  • 3. I think I'm going crazy...
  • 4. So what's the first step to sanity? WRITE TESTABLE CODE
  • 5. What's wrong with this code? js_sample_001.js (inline functions and more inside, ajax directly hooked to element, etc.)
  • 6. Anonymous functions, within functions, within functions...
  • 7. I'll put functions in your functions...
  • 8. All your DOM elements are belong to JS!
  • 9. Server URL coupling js_sample_001.js (with highlighted hardcoded url)
  • 10. Refactoring... js_sample_002.js
  • 11. Refactoring... js_sample_002.js
  • 12. Now that's better... js_sample_003.js (init func and hooked named functions to page)
  • 13. Now that's better...
  • 14. Now that's better...
  • 15. Now what about testing? Popular JS Unit-testing frameworks:  QUnit  Jasmine  UnitJS  JsUnit (no longer actively maintained)  Some other – see: http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript
  • 16. What's about QUnit?  Used by the jQuery project to test jQuery, jQuery UI, jQuery Mobile  Can be used to test any generic JavaScript code, including itself  Very easy to install – just include JS & CSS file in your HTML
  • 17. Minimal setup: The tests.htm file
  • 18. The tests.js file ...remember this earlier?
  • 19. … and the results:
  • 20. More tests: quite a variety
  • 21. … and the results:
  • 22. Test modules ... and the results page:
  • 23. Setup / TearDown methods:
  • 24. What about asynch methods & AJAX? Use an AJAX mocking library, such as jquery-mockjax:
  • 25. No bullshit Let me show you...
  • 26. Other mock JS frameworks: -ajax
  • 27. But what about test automation?
  • 28. Why phing? 1. Because I like it and I am used to it, and... 2. PHING ALL THE THINGS!
  • 29. But phing runs in the console... JS needs browser to run in... How do we run the browser? Wouldn't it be slow?
  • 30. Need speed? Ditch the browser!
  • 31. But what about cross-browser testing?
  • 32. Credits ”Browser Eyeballing != JavaScript Testing”, Jordan Kasper bit.ly/js-testing ”Unit Testing JavaScript With QUnit And Phing”, Robert Price http://www.robertprice.co.uk/robblog/2012/12/unit-testing-javascript-with-qunit-and-phin ”Qunit Phing Task”, Martin Jonsson http://github.com/martinj/phing-task-qunit
  • 33. Questions? @irintchev m.irintchev@siteground.com