Your SlideShare is downloading. ×
0
TDD for
                              User Interfaces

                         Fabian Jakobs <fabian.jakobs@1und1.de>
   ...
Agenda



                         • What is Test Driven Development?
                         • TDD for user interfaces
 ...
TDD



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




Dienstag, 9. Juni 2009
Clean Code

            Good Design                                Testable


                                        Modu...
That Works


                         Fast
                                                    In Time

                  ...
Write          Use

                                 Code




Dienstag, 9. Juni 2009
TDD Mantra


                         •Red

                         • Green

                         • Refactor

Diensta...
Red

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



Dienstag, 9. J...
Red


                                  What do I expect
                                   from the code



             ...
Green

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



Diensta...
Green

                          What is the
                         easiest code to
                          make the t...
Refactor

                             „Remove all duplication
                         introduced by making the test
    ...
Refactor


                         I have to remove
                            duplication!



                         ...
„Edit and Pray“
                                  vs.
                         „Cover and Modify“
                        ...
Edit & Pray


             • Carefully plan
             • Make the change
             • Start the application and
      ...
Cover & Modify



              • Write test
              • Make the change
              • Run all tests


Dienstag, 9. ...
Tests give confidence in the
                                     code.

                          „I better don‘t touch th...
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
                                    per...
Testing GUIs



Dienstag, 9. Juni 2009
TDD for GUIs


                         • GUI Code hard to test
                                        therefore

       ...
Model-View-Controller (MVC)



                                             Controller

                         User Even...
Model-View-Presenter (MPV)




                               User Event               Change Notification


              ...
Example




Dienstag, 9. Juni 2009
View

                         •   Properties

                             •   Display

                             •   ...
Model (State Machine)

                                    •   States
                                        •   Number
 ...
Presenter
                            View                        Model
                                           P
     ...
Testing the Presenter

                                         PresenterTest




          ViewMock                      ...
Testing the Presenter
                                         PresenterTest




Dienstag, 9. Juni 2009   Zustand lesen
Testing Events
                                          PresenterTest




                                               ...
How to test the view?



Dienstag, 9. Juni 2009
Test the „wiring“

                         • Test the API used by the Presenter
                         • There is a lot...
Testing the Events

                         • Test just below the „native“ events
                         • Simulate „na...
Testing the Look & Feel

                         • Themes are code, too
                         • It‘s impossible to aut...
Mini-Programs




Dienstag, 9. Juni 2009
Conclusion



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




Diensta...
„Legacy code is code
                            without tests“
                               Michael Feathers




Dienst...
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“, Ke...
Resources / MVP
                         •   Martin Fowler
                             •   Passive View, http://www.marti...
Upcoming SlideShare
Loading in...5
×

Tdd For GuIs

3,751

Published on

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.

Published in: Technology, Business

Transcript of "Tdd For GuIs"

  1. 1. TDD for User Interfaces Fabian Jakobs <fabian.jakobs@1und1.de> qooxdoo Team <http://qooxdoo.org> Dienstag, 9. Juni 2009
  2. 2. Agenda • What is Test Driven Development? • TDD for user interfaces • Example Dienstag, 9. Juni 2009
  3. 3. TDD Dienstag, 9. Juni 2009
  4. 4. „Clean code that works“ Ron Jeffrie Dienstag, 9. Juni 2009
  5. 5. Clean Code Good Design Testable Modular Few Extensible Dependencies Dienstag, 9. Juni 2009
  6. 6. That Works Fast In Time Satisfies Requirements Robust Happy Users Dienstag, 9. Juni 2009
  7. 7. Write Use Code Dienstag, 9. Juni 2009
  8. 8. TDD Mantra •Red • Green • Refactor Dienstag, 9. Juni 2009
  9. 9. Red „Don‘t write production code unless to make a failing test pass!“ Dienstag, 9. Juni 2009
  10. 10. Red What do I expect from the code Write Test Code Dienstag, 9. Juni 2009
  11. 11. Green „Make the test pass with the easiest code possible!“ Dienstag, 9. Juni 2009
  12. 12. Green What is the easiest code to make the test pass? Write Code Dienstag, 9. Juni 2009
  13. 13. Refactor „Remove all duplication introduced by making the test pass!“ Dienstag, 9. Juni 2009
  14. 14. Refactor I have to remove duplication! Write Code Dienstag, 9. Juni 2009
  15. 15. „Edit and Pray“ vs. „Cover and Modify“ Michael Feathers Dienstag, 9. Juni 2009
  16. 16. Edit & Pray • Carefully plan • Make the change • Start the application and check the change • Poking aroud Dienstag, 9. Juni 2009
  17. 17. Cover & Modify • Write test • Make the change • Run all tests Dienstag, 9. Juni 2009
  18. 18. Tests give confidence in the code. „I better don‘t touch this area of the code“ Dienstag, 9. Juni 2009
  19. 19. Tests are dokumentation „Every test is an executable example.“ Dienstag, 9. Juni 2009
  20. 20. Tests guide the design „We see the code from the user‘s perspective“ Dienstag, 9. Juni 2009
  21. 21. Testing GUIs Dienstag, 9. Juni 2009
  22. 22. TDD for GUIs • GUI Code hard to test therefore • Isolate GUI Code • Keep complexity low Dienstag, 9. Juni 2009
  23. 23. Model-View-Controller (MVC) Controller User Event Update State Change Change Notification View Model State Query Dienstag, 9. Juni 2009 Zustand lesen
  24. 24. Model-View-Presenter (MPV) User Event Change Notification View Presenter Model Update State Query/Change Dienstag, 9. Juni 2009 Zustand lesen
  25. 25. Example Dienstag, 9. Juni 2009
  26. 26. View • Properties • Display • Memory • Operation • Events • Button press Dienstag, 9. Juni 2009
  27. 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. 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. 29. Testing the Presenter PresenterTest ViewMock Presenter ModelMock Dienstag, 9. Juni 2009 Zustand lesen
  30. 30. Testing the Presenter PresenterTest Dienstag, 9. Juni 2009 Zustand lesen
  31. 31. Testing Events PresenterTest ModelMock ViewMock Presenter Dienstag, 9. Juni 2009 Zustand lesen
  32. 32. How to test the view? Dienstag, 9. Juni 2009
  33. 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. 34. Testing the Events • Test just below the „native“ events • Simulate „native“ events Dienstag, 9. Juni 2009
  35. 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. 36. Mini-Programs Dienstag, 9. Juni 2009
  37. 37. Conclusion TDD can be applied to GUI code if the architecture is right. Dienstag, 9. Juni 2009
  38. 38. „Legacy code is code without tests“ Michael Feathers Dienstag, 9. Juni 2009
  39. 39. Questions? Dienstag, 9. Juni 2009
  40. 40. Resources - Code git clone git://github.com/fjakobs/Calculator.git Dienstag, 9. Juni 2009
  41. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×