better code through tdd

Better Code through TDD

Wolfram KriesingCTO, uxebu

@wolframkriesing

Freitag, 12. April 13

http://140byt.es

Warming up: shorten please!


http://140byt.es

http://140byt.es

Try it out!

Browser

node.jsFreitag, 12. April 13

uxebu

100%Technology

Company- since 2008- remote team


TDD using Jasmine


Why TDD?

• Better tool than Debugging

• Verifies Refactoring

• Sustainable


Jasmine

• JavaScript quasi standard

• For nodejs+browser (server+client)

• Built-in Spies

• Custom Matchers make awesome errors!!!

http://pivotal.github.com/jasmine/




Jasmine - Matchers


Jasmine - Matchers, watch out!


Matchers - toContain, not


Custom Matchers - toBeInstanceOf


Custom Matchers


Spies

• Decoupled Testing

• Fast Tests (Removes waits, Removes timings)

• Better Architecture

• Async Testing


Spies


TDD is just the start...


Our Process

Repo

Dev CI

Flowdock

All Devs


CI - Continuous Integration

• All projects

• Automated Test runs (multiple browsers/devices)

• Build

• Code coverage

• On Linux!



http://siliconforks.com/jscoverage/




Embedded Jasmine Test Runner

Test

ResultTest Platforms


Better code?


The problem


S3

UploadHTML5 files to Amazon S3 (bucket)


Assets

index.html

movie.js


• it‘s a prototype ....... +1

• is actually async (ignored) ......... -1

• runs all uploads in parallel ........ +1

• no error handling ........ -1

• NEEDS WORK


• still a prototype ....... +1

• is actually async ......... +1

• does NOT run uploads in parallel ........ -1

• partly error handling ........ 0

• NEEDS WORK


HTTP PUT

hard codedhidden

S3Uploader!!!!!


• S3Uploader.js

• uploads from a buffer

• needs to take S3 config


TDD please....


S3Put.js

upload from filename

upload from buffer

S3Uploader.js HTTP PUT


S3Uploader


S3Put.js

upload from filename

upload from buffer

S3Uploader.js HTTP PUT

:-(


Uploader.js

S3Put.js

from filename

upload from buffer

S3Uploader.js

HTTP PUT

from buffer


ClassMethods


All tests green? Refactor!


S3Put.js

upload from buffer

S3Uploader.js

HTTP PUT

Uploader.js

from filename

from buffer


S3Put.js

upload from buffer

S3Uploader.js

HTTP PUT

Uploader.js

from filename

from buffer

FileUploader.js

from filename

from buffer


Looking at the big picture again ...



• runs all uploads in parallel ........ -1

• error handling ........ 0

• NEEDS WORK


FileUploader.uploadFromFilesNames



• runs all uploads in parallel ........ +1

• error handling ........ +1

• upload multiple files :)

New requirement


FileUploader.js

S3Put.js

from filename

upload from buffer

S3Uploader.js

HTTP PUT

from buffer

from filenames


• Get to know what you really need

• Just as much as necessary

• It‘s a proof of concept

• Reveals the API

Prototyping


• 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


Thank you

@wolframkriesing

Wolfram Kriesing, CTOuxebu
