Isolated Unit Tests vs. Angular Testing Utilities - [Angular 4 and Angular 2]

What Are Isolated Unit Tests?

The Isolated unit tests check-up an instance of a class itself without using any Angular dependence or any injected values.

Mostly application tester creates a test instance of the class with new keyword and supplying test doubles for the constructor parameters and then investigation the test instance.

The isolated unit tests don't realize how components interact with Angular and also don't realize how a component class interacts with its own template or components.

For testing Angular Pipes and Services - we should write isolated unit tests!

The isolated unit tests don't realize how components interact with Angular and also don't realize how a component class interacts with its own template or components.

Stayed Informed - Angular 4 Docs with Examples

The most familiar Unit Test for the Tester and Developers as following -

1.     Create an Instances directly with new keyword

2.     Angular Agnostic Testing Techniques

3.     Exhibit Standard

4.     Substitute Test

The Most of the Tester and Developers are tried to avoid Unit Testing following methodology-

1.     Import from the Angular Test Libraries - @angular/core/testing

2.     Configure Angular module

3.     Prepare Dependency Injection Providers

4.     Call Inject or (async/fakeAsync)

Example as – This example is used to display Credit Card Number with a custom formatted in the user templates. 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'barcode',
    pure: false
})
export class BarCodePipe implements PipeTransform {
    transform(value: string, args: any[]): string {
        if (!value) {
            return '';
        }
        return "****-****_" + (value.length > 8 ? (value.length - 8): '')
    }
}

Unit Testing to the Pipe - BarCodePipe

describe('BarCodePipe', () => {
  let pipe = new BarCodePipe();
 
  //Todo tests ...
});

What Are Angular Testing Utilities?

The Angular Testing utilities include the TestBed class and helper functions from the test libraries - @angular/core/testing.

Stayed Informed - Angular 2 Docs with Examples

The TestBed class is one of the principal Angular testing utilities!

The TestBed class is responsible for configuring and initializing the environment that we are going to write our tests in by calling TestBed.configureTestingModule.

The TestBed.configureTestingModule is used to define the environment that we want our component under test to live in.

The Angular testing utility APIs are –

1.     getTestBed

2.     async

3.     fakeAsync

4.     tick

5.     inject

6.     discardPeriodicTasks

7.     flushMicrotasks

8.     ComponentFixtureAutoDetect     

The most important static methods are –

1.     configureTestingModule

2.     compileComponents

3.     createComponent

4.     overrideModule

5.     overrideComponent

6.     overrideDirective

7.     overridePipe

8.     get

9.     initTestEnvironment

10.  resetTestEnvironment

Example As –

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [YourComponent ]
  })
  .createComponent(YourComponent);
});

References -

https://angular.io/guide/testing

https://angular.io/guide/testing#isolated-unit-tests

I hope you are enjoying with this post! Please share with you friends. Thank you!!