Contents
1️⃣ Why ZIEN Adopted TDD(Test-Driven Development) for Frontend
What constitutes good code? While standards may vary, everyone can agree that code with clear intent and well-modularized structure represents quality code.
From this perspective, TDD goes beyond simply writing test code first—it’s an effective methodology that ensures the developer’s intent is clearly communicated while naturally resulting in modularized code. When developing with TDD, you end up creating code in modular units to satisfy the test cases.
2️⃣ Applying TDD in Practice
To create better code, our frontend team carefully considered where to initially apply TDD.
We decided to start with the most critical aspect: UI/UX. There are two primary reasons for applying TDD to UI/UX testing.
First, we prioritized user experience.
UI/UX represents the first "appearance" of a service that users encounter. An unfriendly service leaves unsatisfactory experiences. Through TDD, we ensured UI stability and created a framework for quickly incorporating design changes and feedback.
Second, it allows rapid validation of changes.
Since UI/UX frequently undergoes modifications, TDD allows us to quickly verify the impact of code changes on existing functionality. It acts like an automated checklist for rapid change validation.
Additionally, we chose the Controller-Presenter development pattern for UI/UX testing.
The Controller handles fetching asynchronous data or processing business logic.
The Presenter manages the logic related to the UI displayed to users
This pattern enables clear separation between UI and business logic, allowing independent testing of each component. Consequently, we can focus on UI/UX testing by safely testing only the Presenter.
3️⃣ Refining the TDD Approach
TDD follows a simple Red - Green - Refactor cycle.
Red: Write a failing test
Green: Write minimal code to pass the test
Refactor: Remove duplication and improve code
Now, let’s take a closer look at how we applied this cycle in practice.
3.1. Red: Writing Failing Test Code
In TDD's initial stages, we defined app features and components based on UI specifications, then wrote corresponding test codes.
For instance, we defined test codes for user interactions such as:
Checking if button click changes state
Verifying list item click triggers screen transition
At this stage, all tests fail since actual functionality isn't implemented. The crucial point is transforming functional requirements from UI specifications directly into test codes, effectively making test codes serve as functional specifications.
3.2. Green: Writing Minimal Passing Code
After writing test codes, we implemented code to pass these tests.
The key was starting from a test failure scenario and writing code directed toward resolving that failure. During actual code implementation, we focused on passing tests rather than comprehensive feature development, beginning with the simplest implementation possible.
This approach allowed us to complete features with minimal code and verify functionality through testing, advantageously reducing unnecessary code and complex logic.
3.3. Refactor: Refactoring the Code
Once functionality worked correctly, we refactored code to enhance readability and maintainability.
This wasn't merely about cleaning code style but focused on improving comprehensibility and extensibility. For example:
Modularizing components
Separating functionalities into distinct functions
During refactoring, confirming existing code's continued proper functioning was crucial. We consistently verified that original tests passed after each refactoring, thereby ensuring code stability.
4️⃣ Expected Benefits and Future Challenges
Though we've only recently applied TDD and recognize areas for improvement, we've noticed more intentionally modularized code compared to previous approaches.
Moving forward, capturing diverse test cases to improve test code quality will be essential. We believe that maintaining test codes alongside project development will transform them into an excellent guide. We hope this guide can serve as a milestone helping subsequent team members easily follow our path. ☺️
