How to write simple tests in Javascript
Let's explore simple unit tests using jest
This article was originally posted on my personal blog
This article is going to show you the basic of writing tests in Javascript, If you are interested in testing an Expressjs server, check out this article from Mbuyu that explains on TDD(Test Driven Development).
At BongoHive we have been shifting to more test coverage in most of the code written and this is the effort to share with the community the basic approach.
N.B: The example shown in this article was an effort during pair programming with Francis.
Introduction
As Mbuyu Makayi explained in his article, sometimes you find yourself in a situation where your code isn’t working as expected because of small or big changes you made, now imagine you had this feature and it was working perfectly but when demoing it to the client it just crashes 🥺 unexpectedly.
As developers our job isn’t just to develop features that work but to ensure that those features will still work even in the future when other changes are made to the codebase.
We don’t write tests to check if our code works. We write tests to be able to change it in the future with certain degree of confidence that we don’t break anything.
In this introduction we are going to write unit tests, these are basic tests to make sure an individual function is working as expected. we will use Jest a testing framework from facebook.
a typical example would look like this.
What we are going to build
We are going to use a functional approach to build small pure functions, remember a function should only do one thing and do it well, this makes it easy to test as you will see in the following examples.
Problem We have an input field and we expected the users to type any kind of phone number, but let’s say we want to do an internal validation, we could give the user feedback that their phone numbers are wrong but for the sake of this exercise, let’s just format the given value and test if our functions are working.
The numbers we expect from the users can be in this format, +2609XXXXXX, 09XXXXXXXX, 9XXXXXXXX the format we are looking for is this 260 9XXXXXXXX
Let’s start with making sure there is no (+) in the given number
REMOVE SYMBOL
The function above basically does one thing, it checks if the given value contains a ”+” and removes if it’s there or it will just return the given value as it was.
Now let’s write a simple for this function using Jest
So far the tests we have written are only functional and logical tests just to check if our functions work as expected, now we could also test how our function behaves even we give it a wrong type, check out jest matchers there are many you can use for different cases of your tests.
REMOVE PREFIX
We need to write another function that checks if the user typed in the number with a country code, this could be something like this 260934334 since our goal is to properly format the number, we can get rid of the country code and append it later on. Let’s do that
If you are wondering why I didn’t use the ”===” It is because of type coersion if you compare 2 as a number with a “2” as a string, in Javascript if both types are not the same it will try and convert one to an equivalent value of the other. so if we do 2 == "2" we end up with 2 == 2 which is true, however if you use ”===” the case will be different.
Let’s write unit tests for our removePrefix function, we will simply provide our function with different values to see if it will work as expected.
So far we have written 2 functions that we will use to clean up the input we will get from the user.
- removeSymbol()
- removePrefix()
If you are wondering why we separated the 2 functions, the reason is that we want to be able to test these functions independently from each other.
If we wanted we can use our functions this way removePrefix(removeSymbol(value)) but we will look at a better way of doing this.
APPEND THE CORRECT COUNTRY CODE
Now that we have cleaned the input value from the user, we can append it with a correct country code and the desired space, remember that our number should be formatted like this 260 97139798
There are many ways we could do this, but I will go through a simpler approach which is more functional and I will explain the implementation.
we are going to use a library called ramdajs which provides easy to use helpers for functional data manipulation, and we just need 2 functions from it(compose and curry). You can check here for the finished code.
The above function will be used partially in our next compose function we are going to create, this is to allow us to partially pass arguments and return a function that we can pass to the compose with one argument, after the input has been cleaned. 😉
currying is a method of returning a function if the passed arguments didn’t satisfy the function in question, as Dr. Axel explained
The idea is as follows: If you don’t provide all parameters for a function, it returns a function whose input are the remaining parameters and whose output is the result of the original function.read more on this here.
compose or functional composition is a way of combining two or more functions intro a new function, one important thing to keep in mind is that it runs from right to left. ← ← ← ← ←
our final function is a combination of 3 functions we created above, but since this is a compose function it runs from right to left, so in this case it will start with removeSymbol, then removePrefix then finally with our appendCountryCodesince the function will be curried, you will need to pass with a final argument therefore
formatNumber(numberToformat)(countryCode)
Now we can write unit tests for either the formatNumber or appendCountryCode, if you want to can test both, I am going to test the formatNumber since it makes use of the appendCountryCode curried function.
Conclusion
In this article we only demonstrated writing simple functions and testing them using jest matchers, we also got introduced to the bits of the functional programming using ramdajs.
Jest is a javascript testing framework that provides you with all the tools you need to get up and running with your tests. In the next article we will look at how to test the DOM in react and we will use Test Driven Development.
The live demo for all the code demonstrated in this article is here.
Other articles you might find interesting
Thank you for reading!!
