Client-side testing

Testing tools that we use at Vimeo. Full blog post here https://sean.is/writing/client-side-testing-with-mocha-and-karma

Transcript

1. Client-side testing Sean Coker︎ @okcoker︎
2. •  Tests you write for code that generally runs in the browser︎ ︎ Client-side testing
3. •  Tests you write for code that generally runs in the browser︎ ︎ •  JavaScript, HTML, CSS︎ Client-side testing
4. Test coverage •  Tells you how much of your code has been executed in your tests︎
5. Test coverage •  Tells you how much of your code has been executed in your tests︎ ︎ •  A guide, not a definitive measure︎ ︎
6. Test coverage •  Tells you how much of your code has been executed in your tests︎ ︎ •  A guide, not a definitive measure︎ •  Honest coverage is the best coverage︎
7. Tools
8. Grunt︎
9. Mocha︎
10. Mocha︎ with Blanket, Sinon & Chai︎
11. Karma︎
12. Karma︎ with Istanbul︎
13. Grunt
14. Takes care of the necessary BS︎ Grunt
15. Takes care of the necessary BS︎ Grunt Linting︎
16. Takes care of the necessary BS︎ Grunt Compiling︎ ︎
17. Takes care of the necessary BS︎ Grunt Minifying︎ ︎
18. Takes care of the necessary BS︎ Grunt Bundling︎ ︎
19. Takes care of the necessary BS︎ Grunt Watching︎ ︎
20. Takes care of the necessary BS︎ Grunt Replacing︎ ︎
21. Takes care of the necessary BS︎ Grunt Autoprefixer︎
22. Takes care of the necessary BS︎ Grunt Autoprefixer-ing?︎ ︎
23. Takes care of the necessary BS︎ Grunt Testing︎ ︎
24. •  Test framework that runs our test suites︎ ︎ Mocha
25. via http://mochajs.org/ Test suite for an array
26. Test case via http://mochajs.org/
27. •  Test framework that runs our test suites︎ •  Expressive BDD-style assertions with Chai︎ ︎ Mocha
32. •  Test framework that runs our test suites︎ •  Expressive BDD-style assertions with Chai︎ •  Mock functions with Sinon︎ ︎ Mocha
33. calculator.js
34. calculator-test.js
35. Spy on the calculator class’ filter function︎
36. We can test that the filter function was called after calling the add function︎
37. Always make sure to restore the original function︎
38. •  Test runner that runs our mocha tests in multiple environments︎ ︎ ︎ Karma
39. •  Test runner that runs our mocha tests in multiple environments︎ •  Watches test related files for changes and re- runs tests for you︎ ︎ ︎ Karma
40. •  Test runner that runs our mocha tests in multiple environments︎ •  Watches test related files for changes and re- runs tests for you︎ •  Extensible︎ ︎ ︎ Karma
41. •  https://sean.is/writing/client-side-testing-with-mocha-and-karma︎ •  https://github.com/okcoker/client-side-testing︎ •  http://www.elijahmanor.com/unit-test-like-a-secret-agent-with- sinon-js/︎ •  http://tech.pro/tutorial/1589/testable--tested-client-side-code︎ •  http://developers.lyst.com/javascript/testing/2014/03/03/ javascript-unit-testing/︎ Related resources
42. Thanks! Sean Coker︎ @okcoker︎