Test driven development (TDD) is one of the central techniques in Extreme Programming. However many people dismiss it for GUI applications because it seems to be too hard to get the user interface code under test. This presentation is about how to apply TDD to GUI applications.

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

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

3. TDD
Dienstag, 9. Juni 2009

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

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

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

7. Write Use
Code
Dienstag, 9. Juni 2009

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

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

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

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

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

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

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

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

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

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

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

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

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

21. Testing GUIs
Dienstag, 9. Juni 2009

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

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

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

25. Example
Dienstag, 9. Juni 2009

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

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

28. 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

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

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

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

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

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

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

35. 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

36. Mini-Programs
Dienstag, 9. Juni 2009

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

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

39. Questions?
Dienstag, 9. Juni 2009

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

41. 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

42. 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