Unit Testing JavaScript

1. Unit Testing JavaScript Using Test Driven Development Jon Kruger Email: jon@jonkruger.com Blog: http://jonkruger.com Twitter: JonKruger

2. Goals of this talk • Explain why you should write unit tests • Show you how to write unit tests for JavaScript code • Show you Test Driven Development in action!

3. I thought this was a .NET user group...

4. Informal Survey

5. What is a unit test? • Tests a small unit of functionality • Must run fast • Isolate external dependencies using mocks and stubs

6. What is not a unit test? • Test that runs against external dependencies (e.g. database, UI, file system) • Test that is slow • Web tests, load tests, performance tests

7. Why write unit tests? • You will write bad code • You (or someone else) will break your code • Someone else will need to understand your code • No compiler for JavaScript • Peace of mind

8. What's in it for me? • Proof that your code works • Fewer bugs (both now and in the future) • Peace of mind

10. Why Test Driven Development? • Design • Edge cases • Separation of concerns • Verification • Documentation • Testable code • When you’re “done” your done

11. The TDD Lifecycle • Get Specs (features or bugs) • Write tests • Watch ‘emfail • Write code • Watch ‘empass • Repeat!

12. Your new accountability partner http://PairProgrammingBot.com

13. ?

14. JavaScript Unit Testing Frameworks JSUnit J3Unit QUnit JSSpec YUI Test Screw-Unit JSNUnit script.aculo.us unit testing TestCase Crosscheck RhinoUnitjqUnit more?

15. Official Measure of Relevance

16. Relevant JavaScript Testing Frameworks QUnit JSSpec YUI Test Screw-Unit

17. JavaScript class design

18. JavaScript class design

19. JavaScript class design

20. QUnit Basics

21. QUnit basics – module()

22. QUnit basics – test()

23. Untestable JavaScript

24. Untestable JavaScript Test won’t run unless it’s run from a page that contains these elements.

25. Testable JavaScript

26. Untestable JavaScript Testing this method will pop up an alert box!

27. Testable JavaScript

28. Untestable JavaScript Unable to test asynchronous AJAX calls.

29. Testable JavaScript – synchronous AJAX

30. Testable JavaScript –stop(), start()

31. ?

32. Sample project – "MiniSudoku"

33. Step 1 – Stub out tests

34. Step 2 – Write tests

35. Step 2 – Write tests

36. Step 2 – Write tests

37. Step 2 – Write tests

38. Step 3 – Run tests (should fail)

39. Step 4 – Create classes

40. Step 4 – Create classes

41. Step 5 – Run tests (should fail)

42. Step 6 – Write actual class code

43. Step 7 – Passing tests!

44. Step 8 – Repeat! • Get Specs (features or bugs) • Write tests • Watch ‘emfail • Write code • Watch ‘empass • Repeat!

45. Step 9 – Celebrate!

46. Hook it up to your .aspx page! • Need to inject UI elements into the tests

47. What do we have? • I know that my code works • I know what my code is supposed to do - tests are my documentation of my code • I know that my code will continue to work • My classes are well-designed • Tests and good design will mean that it will be easier to make changes to the code • Peace of mind!

48. Zero Defects • Hold yourself to higher standard • If your code sucks, then stop writing sucky code. • Make quality a priority

49. ?

50. Resources • QUnit home page • http://docs.jquery.com/QUnit • Integrating QUnit tests into a continuous integration build • http://tinyurl.com/qunitbuild • MiniSudoku source code • http://jonkruger.com/minisudoku/source.php • My blog • http://jonkruger.com • Send me an email! • jon@jonkruger.com • Twitter • http://twitter.com/jonkruger