Frontend Testing - Episode 1

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