So in late September 2020, I got a task to contribute new features that possible to add to a specific web application project. A little bit background, the main purpose of this web is to delivering educational content from any contributors to people through the public web, so everyone can register to the web as a contributor and make any educational content as they want, and also people don’t need to register to the page if they just want to see the contents. Of course, the web has built with an approval system, so the content will be delivered to the home page as long they meet the qualifications.
A Brief Things to Say before Start
I come with an idea to make a random content on the front page, I got this idea because I believe some people want to see another side of contents that they never see. Getting new things from you never see is a good thing right? that’s why I want to add this.
Because this is an open-source and also there is a development before me, so first I need to learn how they coded, learn the style they used, learn the file structure, and did the first setup. The file structure is the hardest part for me, but I managed to get it all done in 10–30 minutes because I am already familiar with that kind of environment. Not all of them but at least at that time period, I knew some parts and what I can and should do in that project.
For developers, just to know what kind of project I worked with, these are the characteristics the project have:
- Django for back-end and front-end.
- PostgreSQL as the main database
- GitHub Flow-like (There is no staging, just development and master)
- The pipeline contains tests, lint check, deploy to a dynamic analysis tool, and deploy to Heroku (Production Server)
The content randomizer has been implemented by following the TDD cycles, so I begin it by creating a test first, continue with the implementation, and ensure there is no failure task. You realized that I don’t set up a skeleton of code along with the test, it’s because I only insert some codes to an existing function for the functionality I will make.
Test Unpredicted Result
This section is actually an interesting part because I will show you how I create a test to test unpredicted results. It’s so not developer things when comes to unpredictable. Because every functionality has the developer made should be predicted with a certain environment and input since the functionality is logically instructed.
So before I jump to test, I need to think which one from the functionality that is predictable and what is not. Let’s take a look at what I got.
- The page returns 200 code
- The content of the randomized list has the same contents as original
- Position of content in the randomized list
Anything else? This is the best I got, just comment if you found another. As you can see there is something we can do even though it’s random. So here is the test code for predictable things.
So in setup, I actually only create two contents so that’s why I only check two items there.
How about the unpredictable things that I just mentioned? Actually, there is a way to test that. We know that the purpose of this functionality is showing each content in any position, so I came up with an idea that we need to run the same test twice and check those two lists that must have the different content orders. Another problem arises, how if these two lists get a chance to have the same order of content? That’s why we need to run these tests again until it successfully passed. But how if it never successfully passed? to overcome this we could set a maximum time to run all same tests or set a maximum number of the calling same tests. Surely, the second option is more preferable, that’s why I choose it.
Here are the codes to test unpredictable things.
By setting the number of tests is 10, it’s surely enough will pass the test with a probability is almost 100%. Because normally tests will pass in a first or second iteration.
Making a Random Functionality
Finally, we are in the implementation step, create a content randomizer. Since the web has passed through first development, which means the web has successfully show educational content on the front page before, so the codes for that functionality has existed. I only insert a little bit codes and I’m done. It’s only 3–5 code lines to put, you can see that codes below.
Surely, this feature is so easy to implement but the test a little bit takes a time to think. Even it has small codes but this feature is powerful, you can reach any content even it’s been in the darkest place if lucky.
TDD is so interesting to have. Personally, TDD helps me to scope my implementation. Sometimes as a developer, we want to implement far than what requirements want, better than requirements, so the users or may developers will be satisfied with the improvisation of improvements. But since it is driven by test, our implementation will not be going far because the tests are limited.