$30 off During Our Annual Pro Sale. View Details »

intro to javascript unit tests for client side

intro to javascript unit tests for client side

http://www.bymichaellancaster.com/articles/2015-08-12-client-side-javascript-unit-tests-for-front-end-developers/

Unit tests for UI developers is an underground world and today we will explore this world a bit.

The first question you need to answer is, why unit test my code? that will give you a better understanding of why unit tests are important and useful.
Here a few points.

Reduce bugs (new and/or existing features)
Serve as documentation
Improve Software Design
Reduce fear (you can write code with no fear of breaking something else)
Unit tests are meant to be small but what I mean by that is, let's say you have a function called foo() that calls two other functions fooUno() and fooDos() each function has a specific logic/goal, let's also say that one of those functions inside foo() make an XHR request..
You don't want to make an XHR request because it's slow and the XHR might depend on something else from the system, but foo() require the data from the function that make XHR request, so what do you do? this scenario is very common for UI developers.

One of the ways to achieve isolation and small unit tests is using Spies, Stubs and Mocks understanding them will help you write better unit tests, I'm going to talk more about it later.

A good structure for unit tests is 3A's Arrange, Act, Assert (not applicable to all scenarios), where Arrange is the set up of the object/function being tested (e.g stub a dependency), Act is when you act on the object being tested (e.g call the function) and Assert where you claim the object. (e.g assert that the function was called with xyz arguments);

Michael Lancaster

November 19, 2015
Tweet

More Decks by Michael Lancaster

Other Decks in Technology

Transcript

  1. Javascript Unit Test for humans

    View Slide

  2. Michael Lancaster
    @weblancaster
    @weblancaster
    Senior Interactive Developer
    http://www.bymichaellancaster.com/blog/client-side-javascript-unit-tests-for-front-end-developers/

    View Slide

  3. “Program testing can be used to show
    the presence of bugs, but never to show
    their absence!”
    Edsger Dijkstra

    View Slide

  4. View Slide

  5. So, why unit test at all?

    View Slide

  6. View Slide

  7. View Slide

  8. NIST report that the relative cost to repair a defect
    found in an operational system is 470 to 880 times
    the amount to repair a defect found at the start of the
    life cycle when requirements are being formulated.
    *NIST (National Institute of Standards and Technology)

    View Slide

  9. Productivity
    Security
    Improve code design
    Reduce bugs
    Reduce fear
    Usability
    Quality
    Benefits…
    Documentation

    View Slide

  10. View Slide

  11. How to start?

    View Slide

  12. Make unit tests part of the culture
    and processes

    View Slide

  13. Make the process easy
    and people will do it

    View Slide

  14. View Slide

  15. Automate all the things

    View Slide

  16. Write unit test as you code (ideally before)
    Test before push
    Test in your CI

    View Slide

  17. What tools to use?

    View Slide

  18. http://karma-runner.github.io/0.13/index.html

    View Slide

  19. http://mochajs.org/

    View Slide

  20. http://chaijs.com/

    View Slide

  21. http://sinonjs.org/
    Sinon.js

    View Slide

  22. Show me some code
    * https://github.com/weblancaster/karma-mocha-chai-sinon

    View Slide

  23. Conclusion…
    • Make unit tests part of the culture
    • Make unit test processes easy
    • Unit test your code as you go (ideally before)
    • Structure unit tests in 3A (Arrange, Act, Assert)
    • Automate all the things

    View Slide

  24. Thanks!
    http://www.bymichaellancaster.com/blog/client-side-javascript-unit-tests-for-front-end-developers/

    View Slide