Js unit testing
-
Upload
mihail-irintchev -
Category
Technology
-
view
160 -
download
0
description
Transcript of Js unit testing
![Page 1: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/1.jpg)
JavaScript Unit-Testing
Mihail IrintchevSiteGround.com
![Page 2: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/2.jpg)
How do you test your JS?
1. Write your JavaScript code2. See if it works in your favourite browser3. 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
![Page 3: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/3.jpg)
I think I'm going crazy...
![Page 4: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/4.jpg)
So what's the first step to sanity?
WRITE TESTABLE CODE
![Page 5: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/5.jpg)
What's wrong with this code?
js_sample_001.js(inline functions and more inside, ajax
directly hooked to element, etc.)
![Page 6: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/6.jpg)
Anonymous functions, within functions, within functions...
![Page 7: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/7.jpg)
I'll put functions in your functions...
![Page 8: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/8.jpg)
All your DOM elements are belong to JS!
![Page 9: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/9.jpg)
Server URL coupling
js_sample_001.js(with highlighted hardcoded url)
![Page 10: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/10.jpg)
Refactoring...
js_sample_002.js
![Page 11: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/11.jpg)
Refactoring...
js_sample_002.js
![Page 12: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/12.jpg)
Now that's better...
js_sample_003.js(init func and hooked named functions to
page)
![Page 13: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/13.jpg)
Now that's better...
![Page 14: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/14.jpg)
Now that's better...
![Page 15: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/15.jpg)
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
![Page 16: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/16.jpg)
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
![Page 17: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/17.jpg)
Minimal setup: The tests.htm file
![Page 18: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/18.jpg)
The tests.js file
...remember this earlier?
![Page 19: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/19.jpg)
… and the results:
![Page 20: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/20.jpg)
More tests: quite a variety
![Page 21: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/21.jpg)
… and the results:
![Page 22: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/22.jpg)
Test modules
... and the results page:
![Page 23: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/23.jpg)
Setup / TearDown methods:
![Page 24: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/24.jpg)
What about asynch methods & AJAX?
Use an AJAX mocking library, such as jquery-mockjax:
![Page 25: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/25.jpg)
No bullshit
Let me show you...
![Page 26: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/26.jpg)
Other mock JS frameworks:
-ajax
![Page 27: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/27.jpg)
But what about test automation?
![Page 28: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/28.jpg)
Why phing?
1. Because I like it and I am used to it, and...2. PHING ALL THE THINGS!
![Page 29: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/29.jpg)
But phing runs in the console...
JS needs browser to run in...
How do we run the browser?
Wouldn't it be slow?
![Page 30: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/30.jpg)
Need speed? Ditch the browser!
![Page 31: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/31.jpg)
But what about cross-browser testing?
![Page 32: Js unit testing](https://reader033.fdocuments.net/reader033/viewer/2022061218/54b7a13c4a795993718b46fa/html5/thumbnails/32.jpg)
Credits
”Browser Eyeballing != JavaScript Testing”, Jordan Kasperbit.ly/js-testing
”Unit Testing JavaScript With QUnit And Phing”, Robert Pricehttp://www.robertprice.co.uk/robblog/2012/12/unit-testing-javascript-with-qunit-and-phing/
”Qunit Phing Task”, Martin Jonssonhttp://github.com/martinj/phing-task-qunit