Tdd For GuIs

TDD forUser Interfaces

Fabian Jakobs <[email protected]>qooxdoo Team <http://qooxdoo.org>

Dienstag, 9. Juni 2009

http://creativecommons.org/licenses/by-nc-sa/3.0/de/







mailto:[email protected]

mailto:[email protected]

http://qooxdoo.org

http://qooxdoo.org

Agenda

• What is Test Driven Development?

• TDD for user interfaces

• Example









TDD









„Clean code that works“

Ron Jeffrie









Clean Code

FewDependencies

Modular

Good Design

Extensible

Testable









That Works

SatisfiesRequirements

Fast

Robust

In Time

HappyUsers









CodeWrite Use









TDD Mantra

• Red

• Green

• Refactor









Red

„Don‘t write production code unless to make a failing test pass!“









CodeWrite Test

What do I expect from the code

Red









Green

„Make the test pass with the easiest code possible!“









CodeWrite

What is the easiest code to make the test

pass?

Green









Refactor

„Remove all duplication introduced by making the test

pass!“









CodeWrite

I have to remove duplication!

Refactor









„Edit and Pray“vs.

„Cover and Modify“Michael Feathers









Edit & Pray

• Carefully plan

• Make the change

• Start the application and check the change

• Poking aroud









Cover & Modify

• Write test

• Make the change

• Run all tests









Tests give confidence in the code.

„I better don‘t touch this area of the code“









Tests are dokumentation

„Every test is an executable example.“









Tests guide the design

„We see the code from the user‘s perspective“









Testing GUIs









TDD for GUIs

• GUI Code hard to test

• Isolate GUI Code

• Keep complexity low

therefore









Model-View-Controller (MVC)

Model

Controller

State Change

State Query

View

Zustand lesen

Change Notification

UpdateUser Event









Model-View-Presenter (MPV)

ModelPresenterView

Zustand lesen

State Query/Change

Change Notification

Update

User Event









Example









View

• Properties

• Display

• Memory

• Operation

• Events

• Button press









Model (State Machine)

• States

• Number

• Wait for Number

• Error

• Properties

• State

• Input

• Value

• Error Message

• Memory

• Operation

• Methods

• Read Token









Presenter

• Properties

• State

• Input

• Value

• Error Message

• Memory

• Operation

• Methods

• Read Token

• Properties

• Display

• Memory

• Operation

• Events

• Button press

Presenter

ModelView









Testing the Presenter

ModelMockPresenterViewMock

Zustand lesen

PresenterTest









PresenterTest

Zustand lesen

Testing the Presenter









Testing Events

Zustand lesen

ModelMockViewMock

Presenter

PresenterTest









How to test the view?









• Test the API used by the Presenter

• There is a lot testable code in the view

Test the „wiring“









• Test just below the „native“ events

• Simulate „native“ events

Testing the Events









• 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









Mini-Programs









Conclusion

TDD can be applied to GUI code if the architecture is right.









„Legacy code is code without tests“

Michael Feathers









Questions?









Resources - Code

git clone git://github.com/fjakobs/Calculator.git









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









http://iridescence.no/post/Slides-From-my-TDD-Talk.aspx




http://live.eclipse.org/node/700




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









http://www.apple.com/de/




http://msdn.microsoft.com/en-us/library/cc304742.aspx




http://msdn.microsoft.com/de-de/magazine/cc188690(en-us).aspx




http://codebetter.com/blogs/jeremy.miller/archive/2007/07/25/the-build-your-own-cab-series-table-of-contents.aspx






Technology

Tdd For GuIs