tdd for guis
DESCRIPTION
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.TRANSCRIPT
![Page 1: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/1.jpg)
TDD forUser Interfaces
Fabian Jakobs <[email protected]>qooxdoo Team <http://qooxdoo.org>
Dienstag, 9. Juni 2009
![Page 2: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/2.jpg)
Agenda
• What is Test Driven Development?
• TDD for user interfaces
• Example
Dienstag, 9. Juni 2009
![Page 3: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/3.jpg)
TDD
Dienstag, 9. Juni 2009
![Page 4: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/4.jpg)
„Clean code that works“
Ron Jeffrie
Dienstag, 9. Juni 2009
![Page 5: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/5.jpg)
Clean Code
FewDependencies
Modular
Good Design
Extensible
Testable
Dienstag, 9. Juni 2009
![Page 6: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/6.jpg)
That Works
SatisfiesRequirements
Fast
Robust
In Time
HappyUsers
Dienstag, 9. Juni 2009
![Page 7: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/7.jpg)
CodeWrite Use
Dienstag, 9. Juni 2009
![Page 8: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/8.jpg)
TDD Mantra
• Red
• Green
• Refactor
Dienstag, 9. Juni 2009
![Page 9: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/9.jpg)
Red
„Don‘t write production code unless to make a failing test pass!“
Dienstag, 9. Juni 2009
![Page 10: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/10.jpg)
CodeWrite Test
What do I expect from the code
Red
Dienstag, 9. Juni 2009
![Page 11: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/11.jpg)
Green
„Make the test pass with the easiest code possible!“
Dienstag, 9. Juni 2009
![Page 12: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/12.jpg)
CodeWrite
What is the easiest code to make the test
pass?
Green
Dienstag, 9. Juni 2009
![Page 13: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/13.jpg)
Refactor
„Remove all duplication introduced by making the test
pass!“
Dienstag, 9. Juni 2009
![Page 14: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/14.jpg)
CodeWrite
I have to remove duplication!
Refactor
Dienstag, 9. Juni 2009
![Page 15: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/15.jpg)
„Edit and Pray“vs.
„Cover and Modify“Michael Feathers
Dienstag, 9. Juni 2009
![Page 16: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/16.jpg)
Edit & Pray
• Carefully plan
• Make the change
• Start the application and check the change
• Poking aroud
Dienstag, 9. Juni 2009
![Page 17: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/17.jpg)
Cover & Modify
• Write test
• Make the change
• Run all tests
Dienstag, 9. Juni 2009
![Page 18: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/18.jpg)
Tests give confidence in the code.
„I better don‘t touch this area of the code“
Dienstag, 9. Juni 2009
![Page 19: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/19.jpg)
Tests are dokumentation
„Every test is an executable example.“
Dienstag, 9. Juni 2009
![Page 20: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/20.jpg)
Tests guide the design
„We see the code from the user‘s perspective“
Dienstag, 9. Juni 2009
![Page 21: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/21.jpg)
Testing GUIs
Dienstag, 9. Juni 2009
![Page 22: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/22.jpg)
TDD for GUIs
• GUI Code hard to test
• Isolate GUI Code
• Keep complexity low
therefore
Dienstag, 9. Juni 2009
![Page 23: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/23.jpg)
Model-View-Controller (MVC)
Model
Controller
State Change
State Query
View
Zustand lesen
Change Notification
UpdateUser Event
Dienstag, 9. Juni 2009
![Page 24: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/24.jpg)
Model-View-Presenter (MPV)
ModelPresenterView
Zustand lesen
State Query/Change
Change Notification
Update
User Event
Dienstag, 9. Juni 2009
![Page 25: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/25.jpg)
Example
Dienstag, 9. Juni 2009
![Page 26: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/26.jpg)
View
• Properties
• Display
• Memory
• Operation
• Events
• Button press
Dienstag, 9. Juni 2009
![Page 27: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/27.jpg)
Model (State Machine)
• States
• Number
• Wait for Number
• Error
• Properties
• State
• Input
• Value
• Error Message
• Memory
• Operation
• Methods
• Read Token
Dienstag, 9. Juni 2009
![Page 28: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/28.jpg)
Presenter
• Properties
• State
• Input
• Value
• Error Message
• Memory
• Operation
• Methods
• Read Token
• Properties
• Display
• Memory
• Operation
• Events
• Button press
Presenter
ModelView
Dienstag, 9. Juni 2009
![Page 29: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/29.jpg)
Testing the Presenter
ModelMockPresenterViewMock
Zustand lesen
PresenterTest
Dienstag, 9. Juni 2009
![Page 30: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/30.jpg)
PresenterTest
Zustand lesen
Testing the Presenter
Dienstag, 9. Juni 2009
![Page 31: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/31.jpg)
Testing Events
Zustand lesen
ModelMockViewMock
Presenter
PresenterTest
Dienstag, 9. Juni 2009
![Page 32: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/32.jpg)
How to test the view?
Dienstag, 9. Juni 2009
![Page 33: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/33.jpg)
• Test the API used by the Presenter
• There is a lot testable code in the view
Test the „wiring“
Dienstag, 9. Juni 2009
![Page 34: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/34.jpg)
• Test just below the „native“ events
• Simulate „native“ events
Testing the Events
Dienstag, 9. Juni 2009
![Page 35: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/35.jpg)
• Themes are code, too
• It‘s impossible to automatically test the look
• View has few dependencies
• View can be run in isolation
Testing the Look & Feel
BUT
Dienstag, 9. Juni 2009
![Page 36: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/36.jpg)
Mini-Programs
Dienstag, 9. Juni 2009
![Page 37: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/37.jpg)
Conclusion
TDD can be applied to GUI code if the architecture is right.
Dienstag, 9. Juni 2009
![Page 38: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/38.jpg)
„Legacy code is code without tests“
Michael Feathers
Dienstag, 9. Juni 2009
![Page 39: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/39.jpg)
Questions?
Dienstag, 9. Juni 2009
![Page 40: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/40.jpg)
Resources - Code
git clone git://github.com/fjakobs/Calculator.git
Dienstag, 9. Juni 2009
![Page 41: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/41.jpg)
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
![Page 42: Tdd For GuIs](https://reader034.vdocuments.mx/reader034/viewer/2022051323/549d0bf2ac7959d32a8b4906/html5/thumbnails/42.jpg)
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