Unit testing Using Reactive forms in Angular
In this post, we will learn how to write unit testing for forms using Reactive Forms. Before diving into the examples, I recommend you to understand the unit testing from my previous posts.
Let us understand Unit testing with a simple login form using Reactive forms.
Login Form
Let us create a login form with all the required HTML and Form logic as below
Login Form HTML
Login From Class
From the above, I have created a sample login form with two fields i.e… username and password by using form builder service of reactive form and mapped each field to input fields of HTML.
For the above example, Let us understand the different test cases and their execution.
Testing the Reactive forms
Configuring the component and required modules as below
From the above, we have configured Reactive forms module and Demos component to our test bed. We also created fixture and also their component instances respectively
Test Case 1:
Testing the number of elements rendered in UI are equals to the form controls defined in the reactive form.
Execution & Understanding
Step 1: Debugging and getting the form element from the HTML content and storing into the form element variable.
Step 2: Using query selector, we are finding all the “input” elements inside the form.
Step 3: At last, we are checking whether the number of input elements are equals to the number of form controls defined.
Test Case 2:
Testing the initial reactive form values
Execution & Understanding
Step 1: Get the login form from component.
Step 2: Create a dummy login form default value object.
Step 3: At-last, compare both the form group values with dummy object.
Test Case 3:
Testing username value and validation before entering values in HTML
Execution & Understanding
Step 1: Get the username element from HTML content using debugElement and querySeclector
Step 2: Get the username value from the component form builder.
Step 3 : Compare step 1 and step 2 values.
Step 4: As there is no value entered into the username HTML element, there will be one required error. So, form builder contains an error object and will not be equal to “null”
Step 5: As there is no value in the username field of HTML, the required property expected to be true.
Test Case 4:
Testing username value after entering the value in HTML element
Execution & Understanding
Step 1: Get the username element from HTML content using debugElement and querySeclector
Step 2: Assign some value to username HTML element.
Step 3: Emit input event to update the HTML content.
Step 4: Here, we are detecting the changes for the component.
Step 5: Once the component is stable and updated, we will get the form username from the form builder.
Step 6: Here, we expect both HTML element value and form control username value to be equal.
Step 7: As the username field in HTML is filled with some value, there are no errors for form builder, Hence expecting errors to be “null”
Test Case 5:
Testing whole login form to be valid
Execution & Understanding
Step 1: Get the username element from HTML content using debugElement and querySeclector
Step 2: Get the password element from HTML content using debugElement and querySeclector
Step 3: Fill the Username value with some sample content.
Step 4: Fill the password value with some sample content.
Step 5: Dispatching events on Username element for updating the value in the HTML username field.
Step 6: Dispatching events on Password element for updating the value in the HTML password field.
Step 7: Get the login form group valid property.
Step 8: Expect the form group valid property to be true.
Note:
These are some test cases for a sample reactive form controls and a form group. We may even write many different test cases and in different ways based on our scenarios and use cases.
For more updates follow me @ https://techshare-skk.medium.com/
