Frontend Testing - Episode 1

An introduction to testing web frontends, and a quick look at testing with Buster.JS

Transcript

1. Frontend Testing Episode #1 A practical guide to getting started with testing JavaScript with Buster.JS fredag den 21. september 12
2. Morgan Roderick • Freelance frontend developer • http://roderick.dk • @mrgnrdrck fredag den 21. september 12
3. Testing frontends? • Testing backends • Unit tests • Integration tests • Logging • Monitoring fredag den 21. september 12
4. What should we test? fredag den 21. september 12
5. What should we test? • Anything the user can do in a browser fredag den 21. september 12
6. What should we test? • Anything the user can do in a browser • JavaScript units fredag den 21. september 12
7. What should we test? • Anything the user can do in a browser • JavaScript units • Templates fredag den 21. september 12
8. What should we test? • Anything the user can do in a browser • JavaScript units • Templates • Full stack with integration tests fredag den 21. september 12
9. Unit tests fredag den 21. september 12
10. Unit tests • Developer centric fredag den 21. september 12
11. Unit tests • Developer centric • Quality over time fredag den 21. september 12
12. Unit tests • Developer centric • Quality over time • Prevent regressions fredag den 21. september 12
13. Unit tests • Developer centric • Quality over time • Prevent regressions • Test one thing in isolation fredag den 21. september 12
14. Buster.JS fredag den 21. september 12
15. Buster.JS • Server fredag den 21. september 12
16. Buster.JS • Server • Runner fredag den 21. september 12
17. Buster.JS • Server • Runner • Built with node fredag den 21. september 12
18. Buster.JS • Server • Runner • Built with node • Replaces JsTestDriver fredag den 21. september 12
19. Buster.JS • Server • Runner • Built with node • Replaces JsTestDriver • Integrates SinonJS fredag den 21. september 12
20. Buster.JS • Server • Runner • Built with node • Replaces JsTestDriver • Integrates SinonJS • Can be used with Jasmine, QUnit, whatever fredag den 21. september 12
21. testCase buster.testCase( 'Greeter', { 'setUp' : function(){ console.log('before test'); }, 'tearDown' : function(){ console.log('after test'); }, 'say method should log to console' : function(){ assert( false ); } }); fredag den 21. september 12
22. assert / refute fredag den 21. september 12
23. assert / refute assert assert.same assert.equals assert.defined assert.isNull assert.match assert.isObject assert.isFunction assert.exception assert.tagName assert.className fredag den 21. september 12
24. assert / refute assert assert.same assert.equals assert.defined assert.isNull assert.match assert.isObject assert.isFunction assert.exception assert.tagName assert.className refute refute.same refute.equals refute.defined refute.isNull refute.match refute.isObject refute.isFunction refute.exception refute.tagName refute.className fredag den 21. september 12
25. Enough talk, let’s see some code! fredag den 21. september 12
26. Point Quad Tree • Multi-dimensional binary search tree for storing point data • http://en.wikipedia.org/wiki/Quadtree fredag den 21. september 12
27. fredag den 21. september 12
28. Lessons learned fredag den 21. september 12
29. Lessons learned • Writing tests is just like writing code, but difficulty^2 fredag den 21. september 12
30. Lessons learned • Writing tests is just like writing code, but difficulty^2 • Use constructors, not module pattern fredag den 21. september 12
31. Lessons learned • Writing tests is just like writing code, but difficulty^2 • Use constructors, not module pattern • Isolate tests fredag den 21. september 12
32. Lessons learned • Writing tests is just like writing code, but difficulty^2 • Use constructors, not module pattern • Isolate tests • Isolate tests fredag den 21. september 12
33. Lessons learned • Writing tests is just like writing code, but difficulty^2 • Use constructors, not module pattern • Isolate tests • Isolate tests • Readability > DRY fredag den 21. september 12
34. Lessons learned • Writing tests is just like writing code, but difficulty^2 • Use constructors, not module pattern • Isolate tests • Isolate tests • Readability > DRY • Read Clean Code fredag den 21. september 12
35. Future topics fredag den 21. september 12
36. Future topics • Spies, stubs and mocks with SinonJS fredag den 21. september 12
37. Future topics • Spies, stubs and mocks with SinonJS • Domain specific tests with custom assertions fredag den 21. september 12
38. Future topics • Spies, stubs and mocks with SinonJS • Domain specific tests with custom assertions • Testing asynchronous code fredag den 21. september 12
39. Future topics • Spies, stubs and mocks with SinonJS • Domain specific tests with custom assertions • Testing asynchronous code • Testing HTML rendering fredag den 21. september 12
40. Future topics • Spies, stubs and mocks with SinonJS • Domain specific tests with custom assertions • Testing asynchronous code • Testing HTML rendering • Integration testing fredag den 21. september 12
41. Thank you! Questions? @mrgnrdrck fredag den 21. september 12