Angular unit test case with Jasmine & Karma

What is Jasmine
•Jasmine is an open-source JavaScript testing framework.

•JavaScript testing framework provides building blocks to write JavaScript unit test cases so each line of JavaScript statement is properly unit tested.

•It is used to test any type of JavaScript application.

•Jasmine is a BDD (Behavior Driven Development)

In BDD Test are written in Non-technical language so everyone can understand it easily.

BDD manly focus on the testing the behavior of code rather than implementation.

What is Karma

•Karma is a testing automation tool created by the Angular JS team.

•Karma is Open source tool.

•Karma is a tool made on top of NodeJS to run JavaScript test cases.

•This is not a testing framework like Jasmine or Mocha or Chai etc

•It only allows us to run JavaScript test cases written using testing frameworks like Jasmine.

•Karma allow us to execute the test cases on any browsers.

•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.

•It can be configured what all browsers need to be used while running Karma.

•Karma can we configured with continuous integration tools like Travis, Jenkin etc.

•

•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.

•What are matchers

•Matchers are nothing but compare functions to actually compare the expected and actual result in the test specs.

•Matchers are the JavaScript function that does a Boolean comparison between an actual output and an expected output.

•There are two type of matchers Inbuilt matcher and Custom matchers.

••Custom Matchers

•The matchers which are not present in the inbuilt system library of Jasmine is called as custom matcher. Custom matcher needs to be defined explicitly().

•Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them.

• Angular's DI framework provides dependencies to a class upon instantiation. Use Angular DI to increase flexibility and modularity in your applications.

•TestBed is a mock environment to run Angular component tests without the browser.

•The TestBed is the first and largest of the Angular testing utilities. It creates an Angular testing module — a @NgModule class — that you configure with the configureTestingModule method to produce the module environment for the class you want to test.

•

•Using testbed get method

•Using inject method

•By overriding component provider

•Pipes are referred as filters.

•It helps to transform data and manage data within interpolation, denoted by {{ | }}.

•It accepts data, arrays, integers and strings as inputs which are separated by ‘|’ symbol.

•

•command “ng generate pipe fileSize”

•Lazy loading is a technology of angular that allows you to load JavaScript components when a specific route is activated. It improves application load time speed by splitting the application into many bundles. When the user navigates by the app, bundles are loaded as needed.

•Lazy loading helps to keep the bundle size small, which helps reduce load times. We must use the class decorator to create an Angular

•module @NgModule, and the decorator uses a metadata object that defines the module.

•The main properties are:

•import: Components of this module are used with Array with other modules.

•Declarations: It receives an array of the components.

•Export: Defines an array of components, directives, and pipes used by other modules.

•Provider: Declares services that are available to the entire application if it is a root module.

SpyNgModuleFactoryLoader Doesn't work anymore in angular 13/14 since NgModuleFactoryLoader is deprecated and removed from Angular.

Replace SpyNgModuleFactoryLoader with NgModule

we can use ngModule instead of it like below

it('Lazy loading test case', fakeAsync(() = >{ const lazyloder = TestBed.inject(NgModule); lazyloder.stubbedModules = {lazymodule:LazyModule}; objRouter.navigateByUrl('/employeelist'); tick(); fixture.detectChanges(); expect(location.path()).toBe('/employeelist'); }));

•httpClientTestingModule is used to test the http methods using httpclient.

•httpClientTestingModule inject HttpTestingController.

•The HttpClientTestingModule allows you to easily mock HTTP requests by providing you with the HttpTestingController service.

•Using the HttpClientTestingModule and HttpTestingController provided by Angular makes mocking out results and testing http requests simple by providing many useful methods for checking http requests and providing mock responses for each request.

•abstract class HttpTestingController {

• abstract match(match: string | RequestMatch | ((req: HttpRequest<any>) => boolean)): TestRequest[]

• abstract expectOne(url: string, description?: string): TestRequest

• abstract expectNone(url: string, description?: string): void

• abstract verify(opts?: { ignoreCancelled?: boolean; }): void

•}

•

•Match:- Search for requests that match the given parameter, without any expectations.

•ExpectOne: - Expect that a single request has been made which matches the given URL, and return its mock.

•ExpectNone:- Expect that no requests have been made which match the given URL.

•Verify :- Verify that no unmatched requests are outstanding.

Test Request
•Methods:-

•flush() :- Resolve the request by returning a body plus additional HTTP information (such as response headers) if provided. If the request specifies an expected body type, the body is converted into the requested type. Otherwise, the body is converted to JSON by default.

•error():- Resolve the request by returning an ErrorEvent (e.g. simulating a network failure).Resolve the request by returning an ErrorEvent (e.g. simulating a network failure).

•event() :- Deliver an arbitrary HttpEvent (such as a progress event) on the response stream for this request.