How to run angular unit test cases | Angular unit test case Tutorials with Jasmine & Karma

 How to run angular unit test cases 

in this article we will see how to run angular unit test case.

The Angular CLI downloads and installs everything you need to test an Angular application with the Jasmine test framework. The ng test command builds the application in watch mode, and launches the Karma test runner. 

How Angular Unit test case Flow | Angular unit test case Tutorials with Jasmine & Karma

 

• The flow of how the test run is shown below
• The Angular testing package includes two utilities called TestBed and async.
• TestBed is the main Angular utility package.
• The describe container contains different blocks (it, beforeEach, xit, etc.). 
• beforeEach runs before any other block. Other blocks do not depend on each other to run.

The Angular CLI downloads and installs everything you need to test an Angular application with the Jasmine test framework. The ng test command builds the application in watch mode, and launches the Karma test runner.

There will be multiple things you will notice from the above code snippet, What each of this does is explained below:

1. We use a “describe” to start our test and we give the name of component that we are testing inside it.
2. The beforeEach tells the Karma test runner to run this code before every test in the test suit, i.e it().
3. Inside the beforeEach, we have TestBed.ConfigureTestingModule. What TestBed does is, It sets up the configurations and initialises the environment suitable for our test.
4. ConfigureTestingModule sets up the module that allows us to test our component. We can say that it creates a module for our test environment and have Declarations, Imports, and Providers inside it.
5. We declare the component that we test inside the Declarations array. We have to include those of other components If our component of interest has a dependency on them.
6. In the Provider array, we override the actual service with our spy that we created using Jasmine. Other services that are injected into our component through the constructor are provided directly in this array if we don’t want to spy on them.

Introduction of Jasmine & Karma

 

In this article we will learn how to write unit tests in for services and component in an Angular app using the Jasmine framework and karma .

Before proceeding with Angular unit test case , we should have knowledge on angular.

You can learn angular 8 from below link

https://www.youtube.com/watch?v=n6TDWpJ-qjs&list=PL5Agzt13Z4g_AVsqkZtsykXZPLcA40jVC

https://www.youtube.com/TheDotNetOffice

What is Jasmine

1. Jasmine is an open-source JavaScript testing framework.
2. JavaScript testing framework provides building blocks to write JavaScript unit test cases so each line of JavaScript statement is properly unit tested. 
3. It is used to test any type of JavaScript application.
4. Jasmine is a BDD (Behavior Driven Development)
5.  In BDD Test are written in Non-technical language so everyone can understand it easily.
6.  BDD manly focus on the testing the behavior of code rather than implementation.     
7. By following BDD procedure, Jasmine provides a small syntax to test the smallest unit of the entire application instead of testing it as a whole.
8. It does not depend on any other JavaScript frameworks. 
9. It does not require a DOM, And it has a clean, obvious syntax so that you can easily write tests.
10. Jasmine support asynchronous testing.
11. Jasmine has the test double functions called spies , A spy can stub any function and track all calls to it and its arguments 

What is Karma

1. Karma is a testing automation tool created by the Angular JS team.
2. Karma is Open source tool.
3. Karma is a tool made on top of NodeJS to run JavaScript test cases. 
4. This is not a testing framework like Jasmine or Mocha or Chai etc 
5. It only allows us to run JavaScript test cases written using testing frameworks like Jasmine.
6. Karma allow us to execute the test cases on any browsers.
7. Karma runs JavaScript test cases against real browsers through Command Line Interface (CLI) rather than virtual browser and DOM. Since, DOM rendering across browsers vary, so for correctness of the test report it uses real browsers. 
8. It can be configured what all browsers need to be used while running Karma.
9. Karma can we configured with continuous integration tools like Travis, Jenkin etc.

Angular unit test case Tutorials with Jasmine & Karma

In this article we will learn how to write unit tests in for services and component in an Angular app using the Jasmine framework and karma .

Before proceeding with Angular unit test case , we should have knowledge on angular.

You can learn angular 8 from below link

https://www.youtube.com/watch?v=n6TDWpJ-qjs&list=PL5Agzt13Z4g_AVsqkZtsykXZPLcA40jVC

https://www.youtube.com/TheDotNetOffice

Part 1:- Introduction of Jasmine & Karma

Part 2: How Angular Unit test case Flow

Part 3: How to run angular unit test cases

Part 4: Configuration Jasmine & Karma With Angular

Part 5:-First Angular Unit test case

Part 6:- Exclude Angular unit test case from Execution

Part 7:- Jasmin Matchers in angular unit test case

Part 8:- ToBe and ToEqual in-built matcher in angular unit test

Part 9:- toBe(true), toBeTrue() and toBeTruthy() , toBeFalse() and toBeFalsy() Jamine matcher

Part 10 - toBeGreaterThan() ,toBeGreaterThanOrEqual() ,toBeLessThan() ,toBeLessThanOrEqual() Matcher

Part 11- toMatch() and toBeCloseTo() Jasmin Matcher

Part 12-  toBeDefined and toBeUndefined Jasmine matcher

Part 13- tobenull() ,tocontain() ,tobeNan() , toBePositiveInfinity, toBeNegetiveInfinity matcher

Part 14- BeforeEach and AfterEach Jasmine functions

Part 15-  BeforeAll and AfterAll in Jasmin Method

Part 16-  Arrange-Act-Assert(AAA) Pattern

Part 17-  TestBed and Component Fixture

Part 18-  SpyOn to mock and Stub methods in angular unit test 

Part 19 - Change detection in angular unit test 

Part 20- Debug Element & DOM events in angular unit test

Part 21- Call Private Method and private variable in angular unit test 

Part 22- SpyOn Private Method in angular unit test

Part 23- Angular Unit test on interpolation

Part 24- Angular Unit test on property binding

Part 25- Angular Unit test on ngClass and ngStyle Binding