TDD for
User Interfaces
Fabian Jakobs <fabian.jakobs@1und1.de>
qooxdoo Team <http://qooxdoo.org>
Dienstag, 9. Juni 2009

Agenda
• What is Test Driven Development?
• TDD for user interfaces
• Example
Dienstag, 9. Juni 2009

TDD
Dienstag, 9. Juni 2009

„Clean code that works“
Ron Jeffrie
Dienstag, 9. Juni 2009

Clean Code
Good Design Testable
Modular
Few Extensible
Dependencies
Dienstag, 9. Juni 2009

That Works
Fast
In Time
Satisfies
Requirements
Robust Happy
Users
Dienstag, 9. Juni 2009

Write Use
Code
Dienstag, 9. Juni 2009

TDD Mantra
•Red
• Green
• Refactor
Dienstag, 9. Juni 2009

Red
„Don‘t write production code
unless to make a failing test pass!“
Dienstag, 9. Juni 2009

Red
What do I expect
from the code
Write Test
Code
Dienstag, 9. Juni 2009

Green
„Make the test pass with the
easiest code possible!“
Dienstag, 9. Juni 2009

Green
What is the
easiest code to
make the test
pass?
Write
Code
Dienstag, 9. Juni 2009

Refactor
„Remove all duplication
introduced by making the test
pass!“
Dienstag, 9. Juni 2009

Refactor
I have to remove
duplication!
Write
Code
Dienstag, 9. Juni 2009

„Edit and Pray“
vs.
„Cover and Modify“
Michael Feathers
Dienstag, 9. Juni 2009

Edit & Pray
• Carefully plan
• Make the change
• Start the application and
check the change
• Poking aroud
Dienstag, 9. Juni 2009

Cover & Modify
• Write test
• Make the change
• Run all tests
Dienstag, 9. Juni 2009

Tests give confidence in the
code.
„I better don‘t touch this area of the code“
Dienstag, 9. Juni 2009

Tests are dokumentation
„Every test is an executable example.“
Dienstag, 9. Juni 2009

Tests guide the design
„We see the code from the user‘s
perspective“
Dienstag, 9. Juni 2009

Testing GUIs
Dienstag, 9. Juni 2009

TDD for GUIs
• GUI Code hard to test
therefore
• Isolate GUI Code
• Keep complexity low
Dienstag, 9. Juni 2009

Model-View-Controller (MVC)
Controller
User Event Update State Change
Change Notification
View Model
State Query
Dienstag, 9. Juni 2009 Zustand lesen

Model-View-Presenter (MPV)
User Event Change Notification
View Presenter Model
Update State Query/Change
Dienstag, 9. Juni 2009 Zustand lesen

Example
Dienstag, 9. Juni 2009

View
• Properties
• Display
• Memory
• Operation
• Events
• Button press
Dienstag, 9. Juni 2009

Model (State Machine)
• States
• Number
• Wait for Number
• Error
• Properties
• State
• Input
• Value
• Error Message
• Memory
• Operation
• Methods
• Read Token
Dienstag, 9. Juni 2009

Presenter
View Model
P
• Properties
r
• Properties
e • State
• Display
s • Input
• Memory e • Value
n • Error Message
• Operation
t • Memory
• Events e • Operation
r • Methods
• Button press
• Read Token
Dienstag, 9. Juni 2009

Testing the Presenter
PresenterTest
ViewMock Presenter ModelMock
Dienstag, 9. Juni 2009 Zustand lesen

Testing the Presenter
PresenterTest
Dienstag, 9. Juni 2009 Zustand lesen

Testing Events
PresenterTest
ModelMock
ViewMock
Presenter
Dienstag, 9. Juni 2009 Zustand lesen

How to test the view?
Dienstag, 9. Juni 2009

Test the „wiring“
• Test the API used by the Presenter
• There is a lot testable code in the view
Dienstag, 9. Juni 2009

Testing the Events
• Test just below the „native“ events
• Simulate „native“ events
Dienstag, 9. Juni 2009

Testing the Look & Feel
• Themes are code, too
• It‘s impossible to automatically test the
look
BUT
• View has few dependencies
• View can be run in isolation
Dienstag, 9. Juni 2009

Mini-Programs
Dienstag, 9. Juni 2009

Conclusion
TDD can be applied to GUI
code if the architecture is right.
Dienstag, 9. Juni 2009

„Legacy code is code
without tests“
Michael Feathers
Dienstag, 9. Juni 2009

Questions?
Dienstag, 9. Juni 2009

Resources - Code
git clone git://github.com/fjakobs/Calculator.git
Dienstag, 9. Juni 2009

Resources / TDD
• Literature
• „Test Driven Development by Example“, Kent Beck
• „Working Effectively with Legacy Code“, Michael
Feathers
• „Clean Code: A Handbook of Agile Software
Craftsmanship“, Robert C. Martin
• Online-presentations
• „Test Driven Development?“, Frederik Kalseth
http://iridescence.no/post/Slides-From-my-TDD-
Talk.aspx
• „Test Driven Development Best Practices for
Eclipse RCP“, Kevin Taylor, http://live.eclipse.org/
node/700
Dienstag, 9. Juni 2009

Resources / MVP
• Martin Fowler
• Passive View, http://www.martinfowler.com/eaaDev/
PassiveScreen.html
• GUI Architectures, http://www.martinfowler.com/eaaDev/
uiArchs.html
• Microsoft
• View Testability, http://msdn.microsoft.com/en-us/library/
cc304742.aspx
• Design Patterns - Model View Presenter, http://
msdn.microsoft.com/de-de/magazine/cc188690(en-us).aspx
• „Build Your Own CAB“, Jeremey D. Miller, http://
codebetter.com/blogs/jeremy.miller/archive/2007/07/25/the-
build-your-own-cab-series-table-of-contents.aspx
Dienstag, 9. Juni 2009