Unit Testing In Angular
“So I have to write some code to check if my code is correct”, sounds weird, but it’s the need of the hour, writing test case is very important as it improves the code quality, maintainability and accuracy.
Writing test cases gives us confidence in our code, as we cover the scenarios which can possibly occur while the code is in execution. It’s one of the boosting factor for the developers to have some faith code in the unexpected scenarios.
Writing test cases requires some sort of framework and a tool to run and execute the test cases, but since we are dealing with Angular, Karma test case runner embedded with Jasmine framework comes handy with the angular project.
When we will create an angular project, few karma and jasmine related packages gets pre installed in the form of node_modules: few of them are listed as below:
These packages will provide a platform for us to run and execute our unit test cases.
We also see one very interesting file named as karma.conf.js, this file contains the required configuration and settings needed for the karma test case runner, also we can provide the path of the coverage report and the format in which we want our coverage report:
Here we can specify settings like format of our coverage report (HTML, lcov etc.), on which browser we want to run our test cases (Chrome, Edge etc.), autowatch (so that we can see the execution of test cases continuously), restartOnFileChange (so that we don’t need to rerun the commands to execute test cases whenever we make changes to any file) and others.
That’s enough config to get started with, let’s move on to our test case now, in angular, we write test cases in spec.ts file, which initially looks something like this:
In this file we can see the AppComponent in the declaration, and we can see one property as fixture (defined as TestBed.createComponent(AppComponent)), fixture is a wrapper of the html and our component, it gives us the DOM of our corresponding component of which we are writing the test cases.
Let’s see the first test case, which is defining the scenario that our app is created, in the expectations, we are checking expect(app).tobeTruthy(), which simply means that we are creating our component and we are checking of the instance of our component is created.
in a spec file, we can see tow main methods:
1. describe
2. it
describe: it essentially defines the scope of the test cases, which can be extended up to the entire component or can be restricted to a particular method, depending on how we want to categorize our app
it: It defines the scenario of the test case, in simple words, it defines what we are expecting from the test case in the given scenario.
For running the test case, we simply run the command “ng test” and then sit back and relax (I mean cry, why it is failing).
Lets’ see how do we write our test case: lets’ imagine a scenario, where I need to click on a button and on click of that button, we need to display some image in our app, how do we write the test case for that?
It’s as simple as that :)
In the backend we are setting one property to true in order to display the image in the application.
But Sometimes things are not as simple as that, some times we need to mock some method or services, in that case we need to create spy object of those entities and mock the values.
Happy Coding !!
