Introduction to Angular Unit testing (Component Testing)
So in my last Article, I explained to you guys about the basics of angular unit testing and as promised today I have come up with an Angular component testing article. Pardon me I haven't given a code example in the last article. But today I will explain how we can write test cases. In this article, I will be mainly explaining test cases writing of components.
Let’s begin the game
First, we will create our Angular project using the command
ng new angular-component-testing
once we run this we will get this screen
after this clean up your app.component.html file.
To make things simple I will be writing a counter component that will cover most of the things you need to know about components test case writing.
so here’s the app.component.html.
app.component.scss
app.component.ts
UI looks like this, quite simple right!
We are going to use this component for writing test cases.
If you notice we are not having many things in code. In the template part, we are having two buttons that will manipulate counters' value.
Things to be covered while writing components test cases.
- Check if the component is rendered with the correct values.
- Check if the colors are matching with the colors you gave initially.
- Check if the button after the click is performing the required action.
There are many other things as well, since it is just for basic understanding about test case writing I am not going to cover all the things.
Check if the component is rendered properly or not.
In angular app specs(app.component.spec) file will be created by default with some default which will create the component instance.
There are a lot of things that are happening in the above code. Don't worry 😉, we will go through them now.
The describe()/beforeEach()/it() convention originated with the Ruby testing library RSpec and is often referred to as spec-style. Just like in the JavaScript test libraries above, RSpec lets you declare tests by calls to it(), nested inside describe()s and with optional beforeEach() calls. The other major convention is test style which is inspired by JUnit, the Java library that first popularized unit testing. In JUnit, tests are just plain methods that have a test prefix or a @Test annotation.
The work of beforeEach function is to set up basic requirements before each test case. This function is called before every test case.
Describe() allows you to gather your tests into separate groupings within the same file, even multiple nested levels. Now, nesting is one of the most-maligned features of RSpec, because it’s easy to take it too far.
If you see line 13 in the above snippet, here the first case starts. In this test case, we are creating a component with the name app and checking if the element is getting created or not.
Let’s write our own test cases
In our app, we are having two buttons and a counter value, that’s it. We will start by checking if these things are getting rendered or not. After that, we will check if the value is getting updated or not after the button clicking.
As I mentioned in frontend development we have to check if the component is rendered or not, so here we go.
In the above code snippet we are trying to access component elements and then by respective functions we test if they exist in DOM or not. Once you are done with the above changes you run ng test and you will get the output that looks like this.
Now lets jump to second part wherein we will check if the button click is making some effect or not.
If you have made it till here please consider following me and show some love with that clap button 😍 .
For this case, we have to give some default value to components properties over which we will perform actions. Like in our case we have to give some default value for the counter’s initial value.
Now again if you run
ng test
you will get this output.
In the above code snippets I have explained the maximum lines of code, do let me know if you find any issue with the code or anything in comments I will respond as soon as read them. There are some more things to be covered we can see them some other day.
Thank you for giving your valuable time. 😄️
