TDD for DOM code is challenging but possible. The presenter demonstrated a simple example of TDD for jQuery code using Jasmine that broke code into small testable modules, isolated dependencies, and allowed for changes with confidence through an integrated CI process and headless test running. Frontend TDD, while difficult, results in code that is better tested and maintained.

1. So who wants to hear
another testing talk?

2. Ok so who is developing
TDD or test first?

3. DOM code?

5. Hi I am Phil, and I'm a
Developer...
@sideshowcoder (github) @ischi (twitter)
working for Cospired

6. Javascript frontend
testing
from failure to good to great

7. TDD for DOM is hard
right?

8. Either they are slow
TDD fast feedback loop with capybara
anyone?

9. Or they can't test what I
need!
function addFive(x) { return x + 5 }
... is not what I do day to day

10. They are hard to setup
1 hour project 2 hour setup?
What about CI integration?

11. But I want to testdrive my
code!
because my code is better when I do

12. Ok so lets see is it really
so hard?
lets walk through a simple example

13. DEMO
https://github.com/sideshowcoder/frontend-
tdd-with-jasmine

14. Yeah I know just some
jQuery...
but I hope it shows some principles

15. Breaking code up by
responsibility
Small modules enable reuse
*do one thing and do it well!*

16. Be aware of your
dependencies
On which parts of the DOM do I rely on?
Which other plugins do I need?

17. Changes are easier
Everything has it's place

18. And I got some
confidence that it does
what it says it does*
*different from 'it does what I want it to do'
but it's a start!

19. Tests can be integrated in
CI
rake jasmine:ci

20. They can be run
headlessly
phantom-jasmine, jasmine-guard, jasmine-
headless-webkit

21. So yes it is possible to
TDD frontend code
IMHO

22. Questions?
And thank you all for listening!