Like its name, test-driven development is a software development framework that enforces its practitioners to write the test first, before the implementation. In another word, in this framework, the developers have to create a certain parameter of a program, manifested in unit tests, before they create the implementation.
This framework emerges in the late preceding millennia, developed by Kent Beck, as a part of Extreme Programming. The early form of this framework was manifested as below:
- Write a test for the next bit of functionality you want to add.
- Write the functional code until the test passes.
- Refactor both new and old code to make it well structured
These three steps are done in cycle for several times. This framework was called as Test-First Programming by XPE2. In Test Driven Development, we have three steps that are familiar with the Test-First Programming framework, that is usually called Red-Green-Refactor.
Red: Writing tests that included the expectation of your program, the tests fail because of the absence of the code.
Green: Writing a code which the test will pass
Refactor: Fix the code like adding a design pattern to reduce code duplication.
Implementation of TDD in my project
I handle the frontend in my project, so usually, the tests I wrote were functional tests, that make sure the components I made do as exactly as I wish them to do. I’m using Chrome Driver to execute my functional tests. Let’s say that we want to create Welcome Pages that looks like this:
from the mock-up, we can see that there are 2 buttons on each of the page, one leads to the previous page, one leads to the next page.
the test will be like this:
Push it with [red] tag
After that, we create the implementation of the test, which has to include a button that will lead users to the next welcome page if they click the next button.
Push it with [green] tag
After that, when checking SonarQube, a tool to identify whether our code already complies with the rules and to identify code smells, I noticed that there were some code duplications happening. The duplication happens because I import the script in each HTML file.
In this step, I’m refactoring by making a baseWelcome.html that contains the script that I use in every HTML file. But because I wrote a test before, I don’t have to worry about whether the refactored code still does as I wish.
Other than that, I created too many js files that code duplication.
After that, push it again with [refactor] tag
Benefit of TDD for Group Project
- Ease of Resolving Conflict
After we merge our code with our friend’s code, if we don’t have test for our code, we have to test the functionality again to make sure the funcionality still working after merging.
Test can be useful to document our code and make sure the next person handling the code understands well about the expected behavior of the code.