Download to read offline
![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](https://image.slidesharecdn.com/jsunit-testing-140413022537-phpapp02/75/Js-unit-testing-2-2048.jpg)
Uploaded byMihail Irintchev
Js unit testing
This document discusses JavaScript unit testing and introduces the QUnit testing framework. It demonstrates how to write testable code, set up a basic testing file with QUnit, and run tests to validate code works as expected across browsers. Automating testing with tools like Phing is also presented to speed the testing process without using a browser. Cross-browser testing challenges are noted along with alternatives to browser-based testing for greater speed.
Js unit testing
- 1.
- 2. How do youtest 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'mgoing crazy...
- 4. So what's thefirst step to sanity? WRITE TESTABLE CODE
- 5. What's wrong withthis code? js_sample_001.js (inline functions and more inside, ajax directly hooked to element, etc.)
- 6. Anonymous functions, withinfunctions, within functions...
- 7. I'll put functionsin your functions...
- 8. All your DOMelements are belong to JS!
- 9. Server URL coupling js_sample_001.js (withhighlighted hardcoded url)
- 10.
- 11.
- 12. Now that's better... js_sample_003.js (initfunc and hooked named functions to page)
- 13.
- 14.
- 15. Now what abouttesting? 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? Usedby 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: Thetests.htm file
- 18. The tests.js file ...rememberthis earlier?
- 19. … and theresults:
- 20. More tests: quitea variety
- 21. … and theresults:
- 22. Test modules ... andthe results page:
- 23. Setup / TearDownmethods:
- 24. What about asynchmethods & AJAX? Use an AJAX mocking library, such as jquery-mockjax:
- 25. No bullshit Let meshow you...
- 26. Other mock JSframeworks: -ajax
- 27. But what abouttest automation?
- 28. Why phing? 1. BecauseI like it and I am used to it, and... 2. PHING ALL THE THINGS!
- 29. But phing runsin the console... JS needs browser to run in... How do we run the browser? Wouldn't it be slow?
- 30. Need speed? Ditchthe browser!
- 31. But what aboutcross-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.