Your-First-Angular-Testing

Hi Friends, This is Lakshman here.

Welcome back to the Series Angular Best Practices

Today, We will go through, how to Create you First Testing in Angular App.

Angular Testing

As we develop the application, we usually validate the functionality via Serving the Application and check it's working or not.

What if we need to check for multiple workflows per functionality either way as Positive & Negative Scenario.

As a default, it has two types of tests,

• Unit Testing (via Karma)
• End-To-End Testing (via Protractor)

Unit Testing

On Unit Testing, its available for * Components * Service

In Testing, we can test the two elements such as * HTML Testing * Code Testing

Testing Files will be available with extension as .spec.ts

By Default, angular generate the template below,

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HelloComponent } from './hello.component';

describe('HelloComponent', () => {
  let component: HelloComponent;
  let fixture: ComponentFixture<HelloComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HelloComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Writing a Unit Testing is an art, like writing the document, each document consists of Header, Description and its points. Likewise, a unit test consists of * describe - To Section of Testing. * it - Task to Test it. * beforeEach - Run on every Task.

Testing is essential for every application, either its Front-End or Back-End.

Sample Testing as below,

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { environment } from '@env/environment';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {   
    expect(component).toBeTruthy();
  });

  describe('Html Testing', () => {
    beforeEach(() => {
      fixture.detectChanges();
    });    

    it('should render router', () => {
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('router-outlet').textContent).toBeDefined('Router Outlet not Defined.');
    });
  });

  describe('Code Testing', () => {
    beforeEach(() => {
      fixture.detectChanges();
    });

    it(`should have as title 'hello'`, () => {
      expect(component.title).toEqual(environment.App_Name);
    });

  });
});

In the next blog, we will discuss the multiple options of testing Services.

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.