Isolated and Non Isolated Tests In Angular

Posted By : Satwinder Singh | 31-Jul-2018

UNIT TESTING

Testing is something which a lot of people might want to do in their Angular project which actually improves our project. Unit tests are performed in Angular to check whether the app is working as intended for example, the component is working as intended or the pipe or the service is working as we require it to work. This is what we want to answer with the unit tests. We also might need to answer does the input work as intended? or the injection is working as intended? These are the questions we want to cover with the unit tests. And with unit tests we hopefully get a true response telling us that our application is working as intended. So it is obvious to think that writing the tests correctly is an important part to get the right answers. Here are some common uses of unit tests -

  • Unit tests guard the app against breaking changes. For example, we could say upon upgrading our Angular 2 application, we rerun all our tests and we see now which of our tests fail. So if we know they work before we know which places in our application are broken due to the update.
  • We can also analyze our code behavior to detect the expected and unexpected results.
  • Moreover we can reveal the design mistakes. Maybe when writing our test we experience some problem writing it because we find a mistake in our general design or we find it while running the test due to an unexpected response. In this case, unit tests are helpful to us.

ISOLATED AND NON-ISOLATED TESTS

The basic difference between the isolated and non-isolated tests is that the isolated tests are those which does not depend on any other piece of our Angular application. So the isolated tests are those which can be run individually without the need of Angular itself i.e. it does not depend upon any of the piece of our Angular app. So the thing which comes in mind is that does the thing we want to test depend on Angular 2 or other pieces of our Angular app? If yes, then we got the testing utilities like TestBed which allows us to create the components, access the injector, setup the module for testing and so on. Generally a spec file containing a non-isolated unit test looks like this -

app.component.spec.ts file :-

import { TestBed, async } from ‘@angular/core/testing’ ;
import { AppComponent } from ‘./app/component’ ;

describe(‘App : CompleteGuideUnitTesting’ , () => {
  beforeEach(() => {
     TestBed.configureTestingModule({
     declarations : [
     AppComponent
     ],
   });
});

it(‘should create the app’ , async(() => {
   let fixture = TestBed.createComponent(AppComponent);
     let app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
  }));
});

The above example shows us an non-isolated test running in the app.component.spec file as it is clearly dependent on the testing utilities provided by Angular 2 such as TestBed, async etc. Now to demonstrate an example of an isolated test let’s consider an app having a user component and a user service and both are connected because we inject the user service into the user component. Now let’s say we have a reverse pipe which reverses any string and that pipe can be tested isolated. We do have these Angular 2 utilities like TestBed, async, tick and so on but a pipe can be tested totally independent of Angular 2 because it has a transform() function in which we pass a string in and get a string out. So there is no need to involve Angular 2 for such a basic pipe. The typescript file for a basic reverse pipe can be created using following code -

reverse.pipe.ts file looks like this :-

import { Pipe } from ‘@angular/core’;

@Pipe({
   name: ‘reverse’
})
export class ReversePipe{
  transform(value: string){
     return value.split(“”).reverse().join(“”);
   }
}

Now we can perform a unit test for testing the functionality of reverse pipe in reverse.pipe.spec.ts file as given below and we can clearly observe that we do not need any of the testing utilities provided by Angular 2 to perform such a test. When we run ng test to run this test we should clearly see that the test would succeed. So in this case we are isolating the test as it does not depend upon Angular for its results. reverse.pipe.spec.ts file looks like this :-

 

import { ReversePipe } from "....." ;
describe ( ‘Component : User’ , () => {
   it(‘should reverse the text’ , () => {
     let reversePipe = new ReversePipe();
   expect ( revresePipe.transform(‘hello’)).toEqual(‘olleh’);
   });
});

 

About Author

Author Image
Satwinder Singh

Satwinder had been working as a free-lancer for past 1-year and recently joined Oodles Technologies as a UI-Developer. His skills are : Jquery , Html , Css , Bootstrap and Javascript.

Request for Proposal

Name is required

Comment is required

Sending message..