TDD in Legacy Code - ATDD for System UI Redesign
When the UX/UI Designer changes the redesign, teams have the risk of introducing regression bugs. How should we implement a UX/UI Redesign in a safe way?
🔒Hello, this is Valentina with a premium issue of the Optivem Journal. I help Engineering Leaders & Senior Software Developers apply TDD in Legacy Code. This article is part of the TDD in Legacy Code series. To get these articles in your inbox every week, subscribe:
UX/UI Redesign is risky without tests
UX/UI Redesign is more than just changing colors and fonts, more than just moving elements around. It can involve changing the identifiers and types of UI elements, moving elements across screens, or splitting one UI element into multiple UI elements. These are UI Structural Changes that can easily cause Regression Bugs.
How to use ATDD for UX/UI Redesign
When implementing User Stories, applying ATDD involved writing a failing Acceptance Test to specify the behavior, implementing the behavior, and verifying that the Acceptance Test passes. This is similar to implementing Bug fixes, since both User Stories & Bugs are concerned with behavioral changes.
But how do we handle structural changes - such as UX/UI Redesign? This kind of change affects how the UI looks like but, from end user perspective, the functionality is the same, just the way it’s presented on the UI is different (e.g. instead of inputting data on one screen we’d input it over 5 screens with a “Next“ button separator; or instead of inputting the full name on one field it would be inputted over two fields - first name & last name). It’s just a structural change, not a behavioral change.
How ATDD differs:
For behavioral changes, when applying ATDD we start with writing a failing Acceptance Test.
Regarding structural changes (System UI Redesign), we do NOT write an Acceptance Test. Instead, we update the System UI Driver to reflect the updated UI, and that in turn causes multiple Acceptance Tests to fail.
Let’s illustrate the ATDD cycle for System UI Redesign Tasks:
Here are the steps to introduce ATDD for System UI Redesign in Legacy Code. I’ll provide you with step-by-step guidance on how to apply ATDD in your GitHub Sandbox Project. ⬇️⬇️⬇️