Tdd For GuIs

Transcript of Tdd For GuIs

TDD forUser Interfaces

Fabian Jakobs <fabian.jakobs@1und1.de>qooxdoo Team <http://qooxdoo.org>

Dienstag, 9. Juni 2009

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

mailto:fabian.jakobs@1und1.de

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

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

Tdd For GuIs

Technology

Transcript of Tdd For GuIs

Making GUIs Narcissistic: Toolkit for Managing Space and

GUIs, Layout, Drawing

TDD for the Win

Implementing GUIs in Java

Python GUIs

DOOCS Overview GUIs

Creating Contextual Help for GUIs Using Screenshotsbederson/images/pubs_pdfs/p145-yeh.pdf · Creating Contextual Help for GUIs Using Screenshots Tom Yeh, Tsung-Hsiang Chang§, Bo

Git for folk who like GUIs

Guis en java-1pp_2012_

Building GUIs with MATLAB

Matlab GUIs for Ocean Satellite Data Products · Matlab GUIs Peter Cornillon Matlab GUIs Basic Idea Demo Remaining Issues Geospatial Datasets Matlab GUIs for Ocean Satellite Data

MEDM, IDL and Python GUIs and Scripting for EPICS

TDD for Javascript developers

An Introduction to GUI Development using R. Overview Introduction –R Interfaces –GUIs for programming Programming for GUIs –GUIs for teaching how to program.

3461 Laying Out Components Interior Design for GUIs.

Introduction to GUIs - cs.cmu.edualdrich/214/slides/gui-intro.pdfCharlie Garrod, Christian Kaestner, ... Pseudocodefor GUIs ... see

Beamline GUIs at ALBA

JavaFX for ooRexx – Creating Powerful Portable GUIs for … · JavaFX for ooRexx – Creating Powerful Portable GUIs for ooRexx Rony G. Flatscher (Rony.Flatscher@wu.ac.at), WU Vienna

Creating Contextual Help for GUIs Using Screenshotsup.csail.mit.edu/other-pubs/uist2011-sikuli-guide.pdfCreating Contextual Help for GUIs Using Screenshots Tom Yeh, Tsung-Hsiang Chang§,

TDD - TDD A New Engine for Mobile Broadban… · TDD Spectrum Becoming a Key Resource 5 TDD Licensed blocks released TDD bands in major countries and regions Large number of TDD licenses