Isolated unit tests vs. Angular testing utilities

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';

    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 ]

References -

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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - and
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide. Powered by Blogger.