JavaScript Testing
This article gives an overview on what is JavaScript testing.
Your test must make your code better. — Kent C. Dodds
What is JavaScript testing?
The technical definition for testing is to throw an error when something wrong is happening, and the error used as a caution for developers to know.
The testing process is to execute some code before it goes into other development processes to make sure no one harms the actual working code.
When you write a function that takes inputs and returns output, how do you test this small function? For example, we have one function take two inputs and return the summation of them. We need to make sure the summation function return the right value every time. How we do that?
Check the code sample in JavaScript for the summation function
However, this manual type of testing not flexible at all, because when one case throws an error, we can’t know which line the error accrued, and what is the error happening. Also, we can’t continue the whole test cases and give the number of success cases and failed one, check the code bellow for fixing these issues.
expect, test, logs and run these test using jest framework. Jest is a testing framework for javascript.The user doesn’t care about the implementation details. — Kent C. Dodds
Why we need testing? We need testing to catch bugs before it goes from our hands.
Types of bugs
The bug is something wrong happening like an error, wrong behaviour, wrong data, and the user can’t continue the flow. And here are the typical bugs types.
- User interface.
- Performance.
- Integration.
- Business logic.
- Security.
- Scaling.
How to prevent bugs
We have bugs shown when writing code, these types of bugs can catch in the implementation phase, these bugs called static bugs.
- When you use an undefined variable.
- Wrong arguments type for a function.
Using flow-type, typescript to prevent these types of errors when you are coding is recommended in most cases.
Types of testing
Testing is the process to make sure everything is going to the right place. Making sure every input give the same output every time passed. Testing gives judges for the quality of the product.
Unit testing
Testing one thing or one unit that do one job with given input and return output. Give it some inputs as testing samples to make sure no one damages your code. Any dependency on the unit testing developer needs to mock it.
Unit tests are one of the reasons to use functional programming and pure functions as much as possible. The purer your application is, the more comfortable you can test it.
When you test, you don’t concern what the implementation details for this unit your concerns must be if it is working or not. Expect input to be equal to a given output. You should cover all small pure units of the application-utils, services and helpers because all of your team use them.
Don’t add too much logic to your test it’s confusing. The user doesn’t care if it is a span or div. — Kent C. Dodds
Mock a test dependency
Mock is to write similar code for a library or something you use in your component, and you don’t care what the implementation of that library, or when you call an API inside your component, no need to call it every time you run the test. You know the expected result for an API so no need to call it and wait for the server to return results.
Also, it can be used when the implementation not ready yet like you are waiting for a module from other people on the company and you expected the value or the component to be something so you can mock it.
Integration testing
Integration testing is the next step after you have done with unit testing. Integration is more complicated than unit testing because it shows how things work together and how things changed from state to another.
You can also use integration tests to show how your components work together. Integration testing phase can catch bugs that when you fix a bug in one component and break the other.
Here is an example from testing workshop how to implement integration testing for user login.
Integration testing is a little harder than unit testing. With integration testing stick with the happy path and test the edges cases with unit testing.
Snapshot testing
Snapshot testing is a useful tool to make sure UI doesn’t change from the implementation phase, because you don’t need your users going made of this.
Snapshot testing gives you an idea when something changed like CSS or HTML element.
Snapshot testing helps the programmers to make sure they don’t change the user behaviour with the wrong way.
End to End testing
End to End testing phase to test the user flow and make sure flow is similar to user interaction. Like clicking a button, go to some links, log in. Also, Using the application as a real user plus you see the behaviour by yourself and simulate the user behaviour.
It is important to remember that these tests are the hardest to set up. Imagine yourself creating an environment to run a test on different machines, devices, browser types and versions.
End to End testing operates the application as a black box and what the user does. Cypress is one of an end to end testing experience.
Fast, easy and reliable testing for anything that runs in a browser. — Cypress.io
Conclusion
Finally, these types not the only types of testing out there, there are others (e.g. Regression testing, Manual testing, Security testing, Localization testing, Penetration testing, Fuzz testing, Stress testing, Usability testing, User acceptance testing.
For me, I see learning testing change how you write code because test must make your code better and less coupled.
Why jest
I am using jest framework for testing right now, don’t stop here and give it a try it is a perfect tool and I love it. It is my first tool for testing so I can’t make a comparison between other testing frameworks out there. For more things about it and how to configure it watch Kent C. Dodds testing workshop.
