bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
Why Should We Separate the Utility Functions?
Our workshops are restarting!
Join the FREE ONLINE React Native workshop on August 11, and learn how to connect native modules to build an awesome Music Creator.
Join the workshop and invite your peers as well! For full details and registration visit the event page:
What is the rule of utility function for us? Keep it simple, this is the base. It has to be like a tiny robot. It performs a specific function, but it does perfectly. For example, a simple mathematical function, like a calculation of circle area could be a utility function. It is simple, reusable and easy to test.
Let’s look a process to create well tested, reusable utility function. I’m going to use test-driven development (TDD), so at first, let’s create the tests. I’m using Jest for that.
At first, we have to define the goal: we need a function which can calculate a circle area with the given radius. It is a very basic function that uses a simple mathematical formula:
Where A is the area, r is the radius of the circle and π is a constant number.
The first group defines tests for the optimistic-use. In these cases, the radius parameter is always a non-negative number, so the result is a valid, non-negative number. All right, we are good. But what if I don’t give a radius parameter? The function will throw an error because the parameter is undefined what is not a number. Let’s write a test to cover it. The question is what would like to give back if the radius parameter is incorrect. We can throw an error and then handle it in the catch section but in this example, I want to give back number 0.
That looks good, but there are some other cases when the parameter is incorrect and we should give back 0. Let’s define these negative test cases.
Finally, define the test group of negative numbers. In this case, the function should give back 0 because negative radius numbers are invalid too. It is an interesting case because the formula gives valid result for negative radius numbers, but I think this is not exactly what we want in our application.
Red Green Refactor
If I run the jest test now, it gives me a ton of errors. This is the essence of TDD, we have tests, we create the function which turns these to green.
The first test says: if we don’t give radius parameter, the function should give back 0. It’s perfect, we have our first green test. Let’s continue.
The following two tests say we should handle the incorrect cases. The solution to these:
Now we have a function with strong incorrect case handling. Finally, we have to create the positive paths with the given formula.
We are ready now. We have a beautiful, smart little function with the correct usage. In the end, with a little change we can make the code even more beautiful:
We have created a basic function with extensive test cases. Now if we use it anywhere in our application, we can be sure it works well, and if we build our application from this kind of little and stable pieces, we avoid a ton of errors.
The separation of util functions can be a good idea, because in this case we can keep this small, well tested pieces together and we can use them anytime in our application. As we have seen, the TDD and the red green refactor could be very useful tools for this.
So keep it simple, test it well and use it happily!
What do you think?
Have some comments or want to ask some questions? Share them with us via e-mail to firstname.lastname@example.org and we can set up a talk with our engineers.
Read moreSee all software engineering
Build your own Christmas chat tree
Or should we say Chat-mas tree?😜 Create a working chat application in 2 hours using React, SSE (Server-Sent Events) and OneSignal on Heroku.
5 Ways to Connect Redux Actions
This article provides 5 ways of defining mapDispatchToProps with explanations. Great introduction to our Redux Saga Workshop!
Bene Studio Serverless Workshop - Calorie Counter App
Kickstart your React Native app with Firebase – Cloud Firestore (Tutorial #2)
In this series we will create an iOS and Android application — called Fakestagram — with React Native, using some of Firebase services....
Redux-Saga To The Rescue
In this blog post, we are checking back to our 25. September Redux Saga Workshop. On 19. October we are trying out a new JS Framework for cross-platform...