This document discusses using test-driven development (TDD) with the JavaScript testing framework Jasmine. It recommends TDD as a better tool than debugging for writing tests first to verify code and refactoring. The document provides an example of using TDD to develop a file uploader for Amazon S3, starting with tests for uploading from file names and buffers, then refactoring the code into separate classes and modules as the tests drive the design. It emphasizes letting the architecture emerge through prototyping and TDD rather than predetermining the design.

1. Better Code through TDD
Wolfram Kriesing
CTO, uxebu
@wolframkriesing
Freitag, 12. April 13

2. http://140byt.es
Warming up: shorten please!
Freitag, 12. April 13

3. Try it out!
Browser
node.js
Freitag, 12. April 13

4. uxebu
100%Technology
Company
- since 2008
- remote team
Freitag, 12. April 13

5. TDD using Jasmine
Freitag, 12. April 13

6. Why TDD?
• Better tool than Debugging
• Verifies Refactoring
• Sustainable
Freitag, 12. April 13

7. Jasmine
• JavaScript quasi standard
• For nodejs+browser (server+client)
• Built-in Spies
• Custom Matchers make awesome errors!!!
http://pivotal.github.com/jasmine/
Freitag, 12. April 13

8. Jasmine - Matchers
Freitag, 12. April 13

9. Jasmine - Matchers, watch out!
Freitag, 12. April 13

10. Matchers - toContain, not
Freitag, 12. April 13

11. Custom Matchers - toBeInstanceOf
Freitag, 12. April 13

12. Custom Matchers - toBeInstanceOf
Freitag, 12. April 13

13. Custom Matchers
Freitag, 12. April 13

14. Spies
• Decoupled Testing
• Fast Tests (Removes waits, Removes timings)
• Better Architecture
• Async Testing
Freitag, 12. April 13

15. Spies
Freitag, 12. April 13

16. Spies
Freitag, 12. April 13

17. Spies
Freitag, 12. April 13

18. TDD is just the start...
Freitag, 12. April 13

19. Our Process
Repo
Dev
CI
Flowdock
All Devs
Freitag, 12. April 13

20. CI - Continuous Integration
• All projects
• Automated Test runs (multiple browsers/devices)
• Build
• Code coverage
• On Linux!
Freitag, 12. April 13

21. CI - Continuous Integration
http://siliconforks.com/jscoverage/
Freitag, 12. April 13

22. CI - Continuous Integration
Freitag, 12. April 13

23. Embedded Jasmine Test Runner
Test
ResultTest Platforms
Freitag, 12. April 13

24. Better code?
Freitag, 12. April 13

25. The problem
Freitag, 12. April 13

26. S3
Upload
HTML5 files to Amazon S3 (bucket)
Freitag, 12. April 13

27. Assets
index.html
movie.js
Freitag, 12. April 13

28. • it‘s a prototype ....... +1
• is actually async (ignored) ......... -1
• runs all uploads in parallel ........ +1
• no error handling ........ -1
• NEEDS WORK
Freitag, 12. April 13

29. • still a prototype ....... +1
• is actually async ......... +1
• does NOT run uploads in parallel ........ -1
• partly error handling ........ 0
• NEEDS WORK
Freitag, 12. April 13

30. Freitag, 12. April 13

31. HTTP PUT
hard coded
hidden
S3Uploader!!!!!
Freitag, 12. April 13

32. • S3Uploader.js
• uploads from a buffer
• needs to take S3 config
Freitag, 12. April 13

33. TDD please....
Freitag, 12. April 13

34. Freitag, 12. April 13

35. Freitag, 12. April 13

36. S3Put.js
upload from
filename
upload from
buffer
S3Uploader.js HTTP PUT
Freitag, 12. April 13

37. Freitag, 12. April 13

38. S3Uploader
Freitag, 12. April 13

39. S3Put.js
upload from
filename
upload from
buffer
S3Uploader.js HTTP PUT
:-(
Freitag, 12. April 13

40. Uploader.js
S3Put.js
from filename
upload from
buffer
S3Uploader.js
HTTP PUT
from buffer
Freitag, 12. April 13

41. Class
Methods
Freitag, 12. April 13

42. All tests green? Refactor!
Freitag, 12. April 13

43. Freitag, 12. April 13

44. S3Put.js
upload from
buffer
S3Uploader.js
HTTP PUT
Uploader.js
from filename
from buffer
Freitag, 12. April 13

45. S3Put.js
upload from
buffer
S3Uploader.js
HTTP PUT
Uploader.js
from filename
from buffer
FileUploader.js
from filename
from buffer
Freitag, 12. April 13

46. Looking at the big picture again ...
Freitag, 12. April 13

47. • is actually async ......... +1
• runs all uploads in parallel ........ -1
• error handling ........ 0
• NEEDS WORK
Freitag, 12. April 13

48. FileUploader.uploadFromFilesNames
Freitag, 12. April 13

49. Freitag, 12. April 13

50. • is actually async ......... +1
• runs all uploads in parallel ........ +1
• error handling ........ +1
• upload multiple files :)
New requirement
Freitag, 12. April 13

51. Freitag, 12. April 13

52. FileUploader.js
S3Put.js
from filename
upload from
buffer
S3Uploader.js
HTTP PUT
from buffer
from filenames
Freitag, 12. April 13

53. • Get to know what you really need
• Just as much as necessary
• It‘s a proof of concept
• Reveals the API
Prototyping
Freitag, 12. April 13

54. • Let the architecture come by itself
• Don‘t turn off the brain
• Have clear interfaces - so you can mock them
• Use explicit names and the API modules evolve
TDD
Freitag, 12. April 13

55. Thank you
@wolframkriesing
Wolfram Kriesing, CTO
uxebu
Freitag, 12. April 13