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

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

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

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

TDD using Jasmine
Freitag, 12. April 13

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

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

Jasmine - Matchers
Freitag, 12. April 13

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

Matchers - toContain, not
Freitag, 12. April 13

Custom Matchers - toBeInstanceOf
Freitag, 12. April 13

Custom Matchers - toBeInstanceOf
Freitag, 12. April 13

Custom Matchers
Freitag, 12. April 13

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

Spies
Freitag, 12. April 13

Spies
Freitag, 12. April 13

Spies
Freitag, 12. April 13

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

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

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

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

CI - Continuous Integration
Freitag, 12. April 13

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

Better code?
Freitag, 12. April 13

The problem
Freitag, 12. April 13

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

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

• 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

• 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

Freitag, 12. April 13

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

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

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

Freitag, 12. April 13

Freitag, 12. April 13

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

Freitag, 12. April 13

S3Uploader
Freitag, 12. April 13

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

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

Class
Methods
Freitag, 12. April 13

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

Freitag, 12. April 13

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

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

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

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

FileUploader.uploadFromFilesNames
Freitag, 12. April 13

Freitag, 12. April 13

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

Freitag, 12. April 13

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

• 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

• 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

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