Escaping Legacy Workshop - XP Days Benelux 2024

Escaping legacy is hard. You have a product in the hands of users, but delivery gets slow, defects are common, and when you want to build a new feature no one can say how long it’s going to take. Engineering is talking about a rewrite, but you can’t just stop and wait.

In this workshop I show how you, as product owner, QA, manager, or engineering lead, can use familiar practices, like Story Mapping and Example Mapping to improve testing, plan refactoring, or even re-work, iteratively and safely.

Assuming a legacy system, in this workshop we start with an existing app and reverse engineer it:
* discover what the functionality is,
* capture it in tests, whether low resolution, or high resolution, and
* prioritize to integrate with our plans for new work and risk

In the workshop you will go through discovery of a familiar existing app, and practice using Story Mapping and Example Mapping to bring the app under test. You work in small groups through the exercises, and can experience how this generates insight and translates into both a solid test strategy, as well as the freedom to be able plan work on a legacy system again.

Transcript

1. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Escaping Legacy Bringing a legacy system under test
2. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Who are we? Suzanne Lagerweij @suzylagerweij@mastodon.social @suzyla.bsky.social Wouter Lagerweij @wouterla@mastodon.social @wouterla.bsky.social 2
3. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 3
4. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 4
5. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 5
6. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Legacy 6 https://codescene.com/hubfs/calculate-business-costs-of-technical-debt.pdf
7. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Legacy is all the attributes of a system, including the organization building the system, that prevent us from delivering at the pace and quality needed and expected by the market. 7
8. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com How? • Take small steps • Integrate the work in the organisation and new feature work • Get in control first • Don’t rush • Keep quality high • Keep it simple 8
9. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Get in control 9
10. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Get in control • Find out what your system does ◦ At a high level ◦ In detail where needed • Then, prove it ◦ Testing high-level, low-resolution ◦ Testing low-level, high-resolution 10 …but not all at once!
11. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 11
12. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 12
13. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 13
14. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Start a ‘Heatmap’ The Functional Breakdown Colour coded for the testing we have available The Heatmap • Our overview for the level of control over our system: ◦ What are we testing? ◦ How are we testing it? 14
15. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 15 Let’s start with a Functional Breakdown Our example
16. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Spotify 16
17. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Heatmap 17 Home Search Library Play
18. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Spotify: Home 18 Home screen <suggestions> More of what you like Made for …. Keep the vibe going Recently played Mood Your heavy rotation
19. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Spotify: Search 19 Search Browse all Your top genres Search bar
20. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Spotify: Play 20 Player Manage devices Artist Player controls Title Add to my library Share to socials Cover Playlist Extra actions Back to Home Behind the lyrics
21. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Spotify: Library 21 Your Library Songs Stations Playlists Made for You Albums Artists Podcasts Settings Recently Played Profile
22. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Back to the Heatmap 22
23. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Example of advanced Heatmap 23
24. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 24
25. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 25
26. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Priorities? Start with fear. 26
27. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Priorities: or, in more detail… Recent: new features, new areas of code are more vulnerable Core: essential functions must continue to work Risk: some areas of an application pose more risk Configuration sensitive: code dependent on settings can be vulnerable Repaired: bug fixes can introduce new issues Chronic: some areas in an application may be perpetually sensitive to breaking RCRCRC by Karen Johnson, via Matt Heusser 27
28. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com What is a Story Map? 28 • Follow the flow through the application (user steps) • Specific User Stories in that flow (detailed actions) • Slices (things that go well together, variations on a flow) • Priority (what do we do/test first?) • Difference with building new functionality: ◦ Priorities ◦ Testing effort instead of implementation effort ◦ Dependencies ◦ Granularity ◦ We know more! User Story Mapping by Jeff Patton
29. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com What is a Story Map? 29 User Story Mapping by Jeff Patton • Follow the flow through the application (user steps) • Specific User Stories in that flow (detailed actions) • Slices (things that go well together, variations on a flow) • Priority (what do we do/test first?) • Difference with building new functionality: ◦ Priorities ◦ Testing effort instead of implementation effort ◦ Dependencies ◦ Granularity ◦ We know more!
30. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Elements of a Story Map
31. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Our Story Map of Manage Playlist 31 Create and play Find and edit Sort Share Later
32. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Back to the Heatmap 32 Search Home Create and play Library Playlist Manage Playlist Play Find and edit Sort Share
33. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com How to make a Story Map • We start with flow horizontally (orange) • Each step in the flow can have multiple stories (yellow) • Use the vertical to create different levels of priority (slices) (pink) • Make each horizontal ‘slice’ something you can give a name to • We do this together (three amigos) 33
34. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Story Mapping of Spotify Search - Part 1 • Put the backbone cards (orange) in the right order 34 Now you try!
35. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 35
36. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Our Story Map of Manage Playlist 36 Create and play Find and edit Sort Share Later
37. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Story Mapping of Spotify Search - Part 2 • Use the Story Cards (yellow) and create your Story Map • Find variations of the flow using the Stories, creating horizontal grouping • Give each slice a name describing the variation it represents 37
38. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Back to the Heatmap 38 Search Home Create and play Library Playlist Manage Playlist Play Find and edit Sort Share
39. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Automate? Wait. We’re finding out what functionality there is to be tested Let humans test, don’t restrict them more than necessary Once you’ve discovered what is interesting about the functionality, maybe, automate Or, better, go into detail with an example map to get more high resolution tests 39
40. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 40
41. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Back to the Heatmap • Put each named Slice on the Heat Map 41 Validation Automated E2E Low Level Unknown Manual Search Home Create and play Library Playlist Manage Playlist Play Find and edit Sort Share
42. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Validation • High-level, low resolution, human end-to-end testing • High-level, low resolution, automated end-to-end testing • Low-level, high resolution, automated example based tests 42 Validation Automated E2E Low Level Unknown Manual
43. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Types of testing 43
44. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 44
45. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 45
46. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 46
47. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 47
48. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 48
49. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 49
50. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 50
51. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 51
52. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Example Mapping https://cucumber.io/blog/bdd/example-mapping-introduction/ “A simple, low-tech method for making conversations short and powerfully productive” -- Matt Wynn
53. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Example Mapping https://cucumber.io/blog/bdd/example-mapping-introduction/ • Examples on GREEN cards “Illustrate concrete behaviour of the system” • Rules on BLUE cards “Logical groupings of examples around a particular condition” Often: acceptance criteria, business rules, requirements • Questions or Assumptions on RED cards “Topics that would block the discussion” • User Stories on YELLOW cards “We often split off separate stories to discuss at a later stage”
54. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Validation: Example Mapping For a story: - List the business rules - Provide examples that illustrate the rule - Capture open questions Centered around business rules Examples can (later) be formalised in the form of a test: Input -> Action -> Outcome (Given/When/Then, Arrange/Act/Assert) 54 Example Mapping by Matt Wynne
55. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Examples of Examples 55
56. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Example Mapping 56 Now you try! • Take the ‘Search on song title’ story • Write at least two Rules • Write at least one or two Examples per Rule
57. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com What’s a good example? • Concrete • All the necessary information • Illustrates the rule • Agreed
58. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 58
59. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 59
60. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Example Mapping 60 • Take the another story • Write at least two Rules • Write at least one or two Examples per Rule
61. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Back to the Heatmap 61 Validation Automated E2E Low Level Unknown Manual Search Home Create and play Library Playlist Manage Playlist Play Find and edit Sort Share
62. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Back to the Heatmap 62
63. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 63
64. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Agenda • Introduction ◦ Legacy! • The Heat Map • The Story Map ◦ Sprint 1: The Backbone of a Story Map ◦ Sprint 2: Story Map and slices into key journies • Validation: High and low resolution testing • Example Mapping ◦ Sprint 3: Example Mapping: Search Song ◦ Sprint 4: Example Mapping • Iterate! • Closing 64
65. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Takeaways: Get back in control ◦ What does it do? (functional breakdown) ◦ How is it tested? (heatmap) ◦ Go broad for overview (Story Map, manual/e2e tests) ◦ Dive deep where necessary (Example Map, detailed tests) ◦ Iterate! 65
66. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Thank you! 66 Buy the book! escapinglegacy.com
67. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Extra slides, validation, scenarios 67
68. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Validation Each slice from the Story Map can be a test Search for a Song <assumes app opened, user logged in> Go to Search Search for (part of) a Song’s name Tap the Song to start it playing 68
69. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Validation Each slice from the Story Map can be a test Recent Searches Go to Search Search for any term Go back to Home Go back to Search See term appear on top of Recent Searches Delete term from Recent Searches Check by restarting Search Delete all items from Recent Searches Check by restarting Search 69
70. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Automate? Wait. We’re finding out what functionality there is to be tested Let humans test, don’t restrict them more than necessary Once you’ve discovered what is interesting about the functionality, maybe, automate Or, better, go into detail with an example map to get more high resolution tests 70
71. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Validation • High-level, low resolution, human end-to-end testing • High-level, low resolution, automated end-to-end testing • Low-level, high resolution, automated example based tests 71 Validation Automated E2E Low Level Unknown Manual
72. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Examples can be formalised into Scenarios Scenario: Playlist without name is auto-numbered Given existing Playlists | My Playlist #1 | | My Playlist #2 | When a new playlist without name is added Then that new playlist is given the name ‘My Playlist #3’ Scenario: Playlist without name gets next available slot Given existing Playlists | My Playlist #1 | | My Playlist #3 | When a new playlist without name is added Then that new playlist is given the name ‘My Playlist #2’ 72
73. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com pseudocode Scenarios are implemented at same level the functionality lives Scenario: Playlist without name is auto-numbered Given existing Playlists | My Playlist #1 | | My Playlist #2 | When a new playlist without name is added Then that new playlist is given the name ‘My Playlist #3’ function testPlaylistNameAutoNumber() { playlists.addAll(‘My Playlist #1’, ‘My Playlists #2’) playlists.add(‘’) expect(playlists.getAll()).toContain(‘My Playlist #3’) } 73
74. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Back to the Heatmap 74 Validation Automated E2E Low Level Unknown Manual Search Home Create and play Library Playlist Manage Playlist Play Find and edit Sort Share
75. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com Future? Test Result Failed Attention 😄 75 Validation Automated E2E Low Level Unknown Manual Search Home Create and play Library Playlist Manage Playlist Play Find and edit Sort Share
76. wouter@lagerweij.com #XPDAYS suzanne@lagerweij.com 76