googleads
Guide To Apply Unit Testing In Angular | Angular Unit Testing
preloder
Angular Web Development

A Complete Cheat Sheet Tricks For Angular Unit Testing

Unit testing is one of the effective testing technique used to test every individual component of the software and its highly ensures to improve all integral part of application like designs, performance and refactoring. Also helping us to include new features without affecting the existing system. On utilizing its convenience favor on Angular, today we’re planning to discuss on applying unit testing on Angular along with its complete cheat tricks.

We don’t want to bore you with unnecessary statements so let’s jump straight to the concept, Basically, Jasmine and Karma test framework both are good choice and has everything to test the angular application and here am using Jasmine framework similarly go ahead with your choice and use the below command to run the test in angular CLI.

 

Once the command executed, you will get the no of success & failure messages as show in below pic,

Parallely a separate local browser will get open for unit testing which you can check here, http://localhost:9876 and this will look like the below screen,

Initially we need to write the unit test code in *.spec.ts(app.component.spec.ts) in Angular CLI.  You can note the status of each test cases in above picture and currently it got 3 success out of 3.

Those 3 success conditions are,

  1. Should create the app component
  2. Should have as title variable in app.component.ts
  3. Should render title in a h1 tag

Before writing the unit test code, we must import the modules. So based on my test case, below are the required modules to import. Similarly you can import the required modules based on your test case.

 

TestBed is the primary API for writing unit tests in Angular applications and also in libraries. Async is a utility module which provides straight-forward, powerful functions of asynchronous which will fetch and work based on every execution.

Before everything, we must describe the testing component and you can use the below code to test,

 

Below code will help you to check whether the required component is available or not,

 

Using this code, you can check whether the required variable is present in app component or not,

 

Now we weed to look for the specified element so in our scenario i have mentioned H1 tag so it will look for the exact tag to fetch the content from specified H1 tag.

 

Unit Test Case For Creating Login

Next will look into creating a unit test for simple login component so with that we can able to check whether the user logged in or Not.

The following  ng comment for create a new component, In our example create a login component.

 

After executing this command then automatically the below mentioned files will be created for you,

user.component.ts

user.component.css

user.component.html

user.component.spec.ts

Let’s look into the purpose of each files,

user.component.ts

The user.component.ts file will have one user object (user), Boolean variable (isLogin) and one user object which will assign the name.

 

user.component.html

This will check whether the user logged in or not,

 

user.component.spec.ts

This will import and declare the component,

 

Declare the user component as follow,

 

Related: How to make Angular Application SEO Friendly Using Pre Render

 

Test case to track behavioral changes of the components

 

Test case to check whether the user component is available or not,

 

Next, we need to check whether the user name is declared or Not. if it’s declared then the user will be logged in, else the user cannot login.

Test case to check the user state by assigning Boolean values to isLogin variable,

 

If the user is logged in then we will be updated with the user object name,

Test case for the users who’re not logged in,

 

Best To Read: Angular 7 Released! Track The Major Changes In Angular

Angular help us to view the test results in your browser so then & there you can able to view the complete track record of test cases in browser.

We have done with all the simple unit test cases for Angular, try this on your angular application and let us know your opinions on comment section. Also you can get the complete source code here in case of any reference. Hope you will find it helpful!

The following two tabs change content below.

Manigandan

An ideal Full Stack Developer, having around 5+ years of experience in web development arena, expertise in AngularJS, Nodejs, PHP and also scoring 6 years of experience in Networking & Window servers. A perfect all-rounder has fondness to play diverse role. he always strives to match perfection and likely remains the best in whatever role he takes.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call