Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new...
Transcript of Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new...
![Page 1: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/1.jpg)
Testing Javascript applications
Irina Dumitrascu
ruby & cofeescript | dira.ro , @dira_geek_girl
23 August 2012
![Page 2: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/2.jpg)
Why?
![Page 3: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/3.jpg)
Well…
![Page 4: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/4.jpg)
And…
Every time you hit refresh & click to test…
![Page 5: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/5.jpg)
And…
Every time you hit refresh & click to test…
God kills a kitten.
![Page 6: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/6.jpg)
And…
Every time you hit refresh & click to test…
God kills a kitten. (image not available)
![Page 7: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/7.jpg)
Without refresh...
![Page 8: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/8.jpg)
Without refresh...
We're at the mercy of the machines.
![Page 9: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/9.jpg)
Show me the code!
![Page 10: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/10.jpg)
Show me the code!
no code to show :(
![Page 11: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/11.jpg)
Show me the code!
no code to show :(
let's make a new app! :)
![Page 12: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/12.jpg)
Show me the code!
no code to show :(
let's make a new app! :)
what will I write the presentation in?
let's write some code for showing presentations!!
![Page 13: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/13.jpg)
Show me the code!
no code to show :(
let's make a new app! :)
what will I write the presentation in?
let's write some code for showing presentations!!
Are you crazy?
![Page 14: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/14.jpg)
Show me the code!
no code to show :(
let's make a new app! :)
what will I write the presentation in?
let's write some code for showing presentations!!
Are you crazy?
or
Do you hate sleeping?
![Page 15: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/15.jpg)
How it works
the presentation is written in a Markdown file
the Markdown is parsed into HTML
h1 is the start of a new slide
hr is the start of my notes (hidden)
and enhanced with next and previous
![Page 16: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/16.jpg)
The fascinating part
I wrote all this functionality test-first.
![Page 17: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/17.jpg)
The fascinating part
I wrote all this functionality test-first.
Without seeing it in the browser until it was done.
![Page 18: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/18.jpg)
The fascinating part
I wrote all this functionality test-first.
Without seeing it in the browser until it was done.
And it worked.
![Page 19: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/19.jpg)
The fascinating part
I wrote all this functionality test-first.
Without seeing it in the browser until it was done.
And it worked.
(Because it was tested.)
![Page 20: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/20.jpg)
The fascinating part
The result is the presentation that you see right now.
![Page 21: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/21.jpg)
So let's talk about testing
![Page 22: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/22.jpg)
Kinds of testing
Unit testing
Does this function behave properly?
Integration testing
Does the application behave properly?
![Page 23: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/23.jpg)
Unit testing
tests independent functions
fast and focused
makes sure independent pieces work
![Page 24: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/24.jpg)
How to do it
1. think about what you must implement
2. break it in small functions
![Page 25: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/25.jpg)
How to do it
1. think about what you must implement
2. break it in small functions
3. choose a function and write a test for it. watch it fail.
![Page 26: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/26.jpg)
How to do it
1. think about what you must implement
2. break it in small functions
3. choose a function and write a test for it. watch it fail.
4. write the code that fixes the test
![Page 27: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/27.jpg)
How to do it
1. think about what you must implement
2. break it in small functions
3. choose a function and write a test for it. watch it fail.
4. write the code that fixes the test
check for refactoring opportunities
![Page 28: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/28.jpg)
How does it look like?
Let's see a simple test.
![Page 29: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/29.jpg)
Unit testing
You need to:
separate your JS from the DOM (no inline JS)
structure the code (classes, modules)
separate the definition and the running step (document.ready … )
the smaller the thing to test, the better
![Page 30: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/30.jpg)
Unit testing - don'ts
do not test for the same thing in multiple tests
do not test for texts appearing in the DOM (test for classes and ids)
![Page 31: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/31.jpg)
Unit testing - do's
test the public interface of each object
test for classes and ids (not strings) in the UI
mock out dependecies (HTTP requests & HTML in the page, but also collaborators)
maintain the tests as you do with the code
![Page 32: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/32.jpg)
Many tools
Frameworks
jasmine, mocha, buster.js
Separate assertion libraries
chai
Tools
to run the tests from the command line, to integrate with CI
![Page 33: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/33.jpg)
Added benefits
better structured code
![Page 34: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/34.jpg)
And…
![Page 35: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/35.jpg)
But…
the individual pieces work
there's no guarantee that they work well together!
![Page 36: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/36.jpg)
Integration testing
is the application as a whole working as expected?
also called acceptance testing
![Page 37: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/37.jpg)
Integration testing
create scenarios and test that they work
have to setup the whole application stack to a known state
![Page 38: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/38.jpg)
Integration testing
slow
do not know about the implementation of individual pieces
![Page 39: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/39.jpg)
Conclusion
test your code!
unit tests and integration tests complement each other
![Page 40: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/40.jpg)
Conclusion
test your code!
unit tests and integration tests complement each other
think of the kittens!
![Page 41: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/41.jpg)
Starring
Tests
mocha as Test framework
chai as Assertive guy
sinon as Mocking and spying specialist
Code
jQuery
Rainbow as Code stylist
markdown css as Text stylist
![Page 42: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/42.jpg)
Presentation
http://www.flickr.com/photos/kaibara/4068996309/ as Test Ninja Cat
![Page 43: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/43.jpg)
Check out the code
https://github.com/dira/js-testing-presentation
![Page 44: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/44.jpg)
Thank you!
Questions?
![Page 45: Testing Javascript applications - GitHub · Show me the code! no code to show :(let's make a new app! :) what will I write the presentation in? let's write some code for showing presentations!!](https://reader034.fdocuments.in/reader034/viewer/2022042307/5ed39d2ea6e11e2c6714deb0/html5/thumbnails/45.jpg)