Refactoring for UX and Generating Unit Tests
Learn how to refactor an application for a better user experience and generate a complete unit test suite to validate the changes.
We'll cover the following...
Our bug tracker is now functional and robust, but not very user-friendly. A big part of professional development is improving the UX so the app is faster and easier to use. We’ll refactor it to let users update bug status directly from the main page. After that, we’ll use Gemini to generate unit tests to confirm the refactor didn’t break anything and that the new feature works as expected.
Refactoring for an improved user experience
Our first goal is to eliminate the need for users to navigate to a separate “Edit” page just to change a bug’s status. This is crucial in evolving our tool from a simple proof-of-concept into a more professional and efficient application.
Defining the UX problem and the new goal
Currently, updating a bug’s status is clunky. A user have to click “Edit,” wait for a new page, change the status from a drop-down, and then click “Save Changes” to get back to the main list. It’s a slow workflow that adds unnecessary friction.
We aim to refactor the application to allow this action directly on the main index.html
page. We will replace the static text that displays a bug’s status with an interactive form, enabling users to update any bug with a single click and selection, dramatically improving the application’s usability.
Prompting for the full stack refactoring
This change is significant as it impacts our frontend templates and backend application logic. We will craft a single, detailed prompt that describes all the required modifications, trusting the agent to understand the context and apply the changes correctly across both files.
Prompt: Let’s refactor the application to improve the user experience ...