0
Frontend. JavaScript. Unit.
Testing. Namics.
Thomas Junghans. Senior Frontend Engineer.
3. September 2013
JavaScript Unit Testing
Why test?
More confidence in code
Tests are a kind of documentation
Tests help find bugs
Refactor without worrying
No time to test
Don’t aim to test everything
We always have time to…
…test a little.
…test as much as possible.
Few tests ...
Quote
“Hard to write tests don't get written. Fragile tests
don't get believed”
	
  
- @sjayers, Twitter
Writing tests is easy, right?! Right!
Tests must be easy to write
Tests must be easy to understand
Writing tests needs a l...
Keep it simple stupid (KISS)
If testing is a pain you, are doing it wrong!
If testing is too complicated, you are doing it...
Reduce dependencies
Keep JS-dependencies to a minimum
Does your code really depend on jQuery or similar?
The "lighter" the...
Avoid fixtures
DOM access is expensive
Fixtures need maintenance
Keep fixtures as small as possible
The fixture is not the...
Only test code you wrote
Everyone should test their own code
Don’t test code you didn’t write
Don’t test code that has alr...
Nothing to test here
$('.foo')!
!.hide()!
!.addClass('bar')!
!.css('width', '360')!
!.show();!
Quote
“When externalizing business-to-UI logic into
separate classes, it’s also much easier to test.”
	
  
-­‐	
  	
  Step...
Separation of Concerns
http://en.wikipedia.org/wiki/Separation_of_concerns
Split UI and Business Logic to allow for unit t...
Bad example
Tight coupling between UI and logic
The values of .augend and .addend cannot be tested
The sum cannot be teste...
Good Better example
•  The logic has been moved to the function add
•  The function add can now easily be tested
•  The fu...
Advantages of QUnit
Small footprint (1 x JS, 1 x CSS)
Easy to use
–  ok(expression, ‘comment’);
–  strictEqual(iReturnTrue...
Recommended Reading
Writing Testable JavaScript – Rebecca Murphey
http://alistapart.com/article/writing-testable-javascript
Upcoming SlideShare
Loading in...5
×

JavaScript Unit Testing

369

Published on

The slides for the talk I held on my approach on JavaScript unit testing. The focus lies on making testing easy and how to achieve this.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
369
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript Unit Testing"

  1. 1. Frontend. JavaScript. Unit. Testing. Namics. Thomas Junghans. Senior Frontend Engineer. 3. September 2013
  2. 2. JavaScript Unit Testing
  3. 3. Why test? More confidence in code Tests are a kind of documentation Tests help find bugs Refactor without worrying
  4. 4. No time to test Don’t aim to test everything We always have time to… …test a little. …test as much as possible. Few tests are better then no tests
  5. 5. Quote “Hard to write tests don't get written. Fragile tests don't get believed”   - @sjayers, Twitter
  6. 6. Writing tests is easy, right?! Right! Tests must be easy to write Tests must be easy to understand Writing tests needs a little practice Writing tests should become natural
  7. 7. Keep it simple stupid (KISS) If testing is a pain you, are doing it wrong! If testing is too complicated, you are doing it wrong! It has to be easy, otherwise you are doing it wrong J
  8. 8. Reduce dependencies Keep JS-dependencies to a minimum Does your code really depend on jQuery or similar? The "lighter" the tests, the better and quicker  
  9. 9. Avoid fixtures DOM access is expensive Fixtures need maintenance Keep fixtures as small as possible The fixture is not the test subject
  10. 10. Only test code you wrote Everyone should test their own code Don’t test code you didn’t write Don’t test code that has already been tested  
  11. 11. Nothing to test here $('.foo')! !.hide()! !.addClass('bar')! !.css('width', '360')! !.show();!
  12. 12. Quote “When externalizing business-to-UI logic into separate classes, it’s also much easier to test.”   -­‐    Stephan  Schmidt,  27.11.2007,     h#p://codemonkeyism.com/people-­‐dont-­‐get-­‐the-­‐difference-­‐between-­‐business-­‐and-­‐ui-­‐logic/  
  13. 13. Separation of Concerns http://en.wikipedia.org/wiki/Separation_of_concerns Split UI and Business Logic to allow for unit testing Testing Business Logic is easy Testing UI is not (so easy)
  14. 14. Bad example Tight coupling between UI and logic The values of .augend and .addend cannot be tested The sum cannot be tested The logic of adding to values together cannot be reused else where $('button.calc').on('click', function (e) {! var sum = $('input.augend').val() + ! $('input.addend').val();! ! $('input.sum').val(sum);! });!
  15. 15. Good Better example •  The logic has been moved to the function add •  The function add can now easily be tested •  The function add can be reused •  (There's still more decoupling to do, but we'll leave that for now) function add(a, b) {! return a + b;! }! ! $('button.calc').on('click', function (e) {! var augend = $('input.augend').val(),! addend = $('input.addend').val(),! ! ! sum = add(augend, addend);! ! $('input.sum').val(sum);! });!
  16. 16. Advantages of QUnit Small footprint (1 x JS, 1 x CSS) Easy to use –  ok(expression, ‘comment’); –  strictEqual(iReturnTrue(), true, 'Should be true'); Viewable in browser Automation possible using GruntJS
  17. 17. Recommended Reading Writing Testable JavaScript – Rebecca Murphey http://alistapart.com/article/writing-testable-javascript
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×