Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© MIRANTIS 20134 PAGE 
Making frontend 
better: 
unit-testing 
Alexandra Morozova
© MIRANTIS 2014 
Preface
© MIRANTIS 2014 
Agenda 
•Why is unit-testing JS needed? 
•Specifics of unit-tests in JS 
•Instruments overview 
•Best pra...
Why do we need all these 
tests? 
© MIRANTIS 2014 PAGE
Big changes done quickly 
© MIRANTIS 2014 PAGE
Fuel example 
© MIRANTIS 2014 PAGE
Fuel example 
© MIRANTIS 2014 PAGE
Step closer to PERFECT 
CODE 
© MIRANTIS 2014 PAGE
Understanding the design 
© MIRANTIS 2014 PAGE
© MIRANTIS 2014 PAGE 
Less time 
for testing
Self-documented code 
© MIRANTIS 2014 PAGE
Tests allow 
REFACTORING 
© MIRANTIS 2014 PAGE
Testing is FUN! 
© MIRANTIS 2014 PAGE
© MIRANTIS 2014 
A few cons 
•Slow down the development process 
•Share the same blind point with the code 
•Do not prove ...
© MIRANTIS 2014 
Basic terms 
•Assertion - defining if test is ok or not 
expect(26+2).to.equal(28);
© MIRANTIS 2014 
Basic terms 
•Fixture - fixed state of software to test, 
basis for tests (AJAX) 
beforeEach(function() {...
© MIRANTIS 2014 
Basic terms 
•method Stub - function with pre-programmed 
behaviour 
var fn = foo.stub().throws(Error); 
...
© MIRANTIS 2014 
Basic terms 
•Spy - function that records arguments, 
scope, return value, exception thrown for 
all its ...
© MIRANTIS 2014 
Basic terms 
•Mock - fake object with pre-programmed behavior (like 
stub) and pre-programmed expectation...
© MIRANTIS 2014 
Basic Structure 
•Setup - beforeEach(), before() 
•Prepare data for test 
•Call a method 
•Check output d...
© MIRANTIS 2014 
Setup
Prepare, call & check 
© MIRANTIS 2014
© MIRANTIS 2014 
Tear down
© MIRANTIS 2014 
Instruments 
Entire space of 
frameworks...
© MIRANTIS 2014 
Instruments 
Entire space of 
frameworks...
© MIRANTIS 2014 
Karma 
Entire space of 
frameworks...
© MIRANTIS 2014 
Karma 
$ npm install karma 
Karma with 
Require.js 
Entire space of 
frameworks...
Example: Backbone Model 
© MIRANTIS 2014
Example: Backbone Collection 
© MIRANTIS 2014
Example: Backbone Collection 
© MIRANTIS 2014
© MIRANTIS 2014 
Best practices 
• Fast 
• Isolated 
• Consistent 
• Self-descriptive 
• Single responsibility 
• No excep...
© MIRANTIS 2014 
Conclusion 
• Each test verifies a small chunk of code 
• Unit tests work better in isolation 
• Mocks, s...
Q&A 
© MIRANTIS 2013 PAGE
Upcoming SlideShare
Loading in …5
×

Unit testing js

Unit tests in js overview

Agenda:
1. Why is unit-testing javascript needed?
2. Specifics of unit-tests in javascript
3. Instruments overview
4. Best practices and approaches
5. Conclusions

  • Login to see the comments

  • Be the first to like this

Unit testing js

  1. 1. © MIRANTIS 20134 PAGE Making frontend better: unit-testing Alexandra Morozova
  2. 2. © MIRANTIS 2014 Preface
  3. 3. © MIRANTIS 2014 Agenda •Why is unit-testing JS needed? •Specifics of unit-tests in JS •Instruments overview •Best practices and approaches
  4. 4. Why do we need all these tests? © MIRANTIS 2014 PAGE
  5. 5. Big changes done quickly © MIRANTIS 2014 PAGE
  6. 6. Fuel example © MIRANTIS 2014 PAGE
  7. 7. Fuel example © MIRANTIS 2014 PAGE
  8. 8. Step closer to PERFECT CODE © MIRANTIS 2014 PAGE
  9. 9. Understanding the design © MIRANTIS 2014 PAGE
  10. 10. © MIRANTIS 2014 PAGE Less time for testing
  11. 11. Self-documented code © MIRANTIS 2014 PAGE
  12. 12. Tests allow REFACTORING © MIRANTIS 2014 PAGE
  13. 13. Testing is FUN! © MIRANTIS 2014 PAGE
  14. 14. © MIRANTIS 2014 A few cons •Slow down the development process •Share the same blind point with the code •Do not prove that work one with another
  15. 15. © MIRANTIS 2014 Basic terms •Assertion - defining if test is ok or not expect(26+2).to.equal(28);
  16. 16. © MIRANTIS 2014 Basic terms •Fixture - fixed state of software to test, basis for tests (AJAX) beforeEach(function() { loadFixtures(‘dummymarkup.html’); })
  17. 17. © MIRANTIS 2014 Basic terms •method Stub - function with pre-programmed behaviour var fn = foo.stub().throws(Error); expect(fn).to.throw(Error);
  18. 18. © MIRANTIS 2014 Basic terms •Spy - function that records arguments, scope, return value, exception thrown for all its calls sinon.spy(cursor, ‘hide’);
  19. 19. © MIRANTIS 2014 Basic terms •Mock - fake object with pre-programmed behavior (like stub) and pre-programmed expectations => stubs+spies var mock = sinon.mock(“jQuery”);
  20. 20. © MIRANTIS 2014 Basic Structure •Setup - beforeEach(), before() •Prepare data for test •Call a method •Check output data •Tear down - afterEach(), after()
  21. 21. © MIRANTIS 2014 Setup
  22. 22. Prepare, call & check © MIRANTIS 2014
  23. 23. © MIRANTIS 2014 Tear down
  24. 24. © MIRANTIS 2014 Instruments Entire space of frameworks...
  25. 25. © MIRANTIS 2014 Instruments Entire space of frameworks...
  26. 26. © MIRANTIS 2014 Karma Entire space of frameworks...
  27. 27. © MIRANTIS 2014 Karma $ npm install karma Karma with Require.js Entire space of frameworks...
  28. 28. Example: Backbone Model © MIRANTIS 2014
  29. 29. Example: Backbone Collection © MIRANTIS 2014
  30. 30. Example: Backbone Collection © MIRANTIS 2014
  31. 31. © MIRANTIS 2014 Best practices • Fast • Isolated • Consistent • Self-descriptive • Single responsibility • No exceptions handling • Use assertions when needed
  32. 32. © MIRANTIS 2014 Conclusion • Each test verifies a small chunk of code • Unit tests work better in isolation • Mocks, stubs and spies help us • Don’t test everything, but write many tests
  33. 33. Q&A © MIRANTIS 2013 PAGE

×