Syncfusion AI Assistant

How can I help you?

Component Testing in Jasmine/Karma Environment for Angular

14 Aug 20257 minutes to read

This guide explains how to configure Syncfusion® Angular components within the test bed, enabling interaction with component instances or selectors using the built-in Jasmine test framework in projects created with Angular CLI. With this setup, you can seamlessly implement Unit Testing, Integration Testing and End-to-End Testing on Syncfusion® components.

Setting Up the Test Environment

To begin testing, configure Angular application and integrate Syncfusion Angular components. This guide focuses on testing the Syncfusion® Grid component. If a license banner appears in Karma automation browsers, you may need to register a Syncfusion license key using the npx command.

Unit Testing

Unit testing checks individual features or functionalities, such as functions or classes, in isolation. This approach enables early detection and resolution of issues, resulting in a more robust and reliable application. The code example below demonstrates how to set up Angular’s TestBed configuration and verify grid row rendering in a Syncfusion® Grid component.

// app.component.spec.ts

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { GridModule, PageService, EditService } from '@syncfusion/ej2-angular-grids';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach((async () => {
    fixture = await TestBed.configureTestingModule({
      imports: [GridModule],
      providers: [PageService, EditService],
      declarations: [AppComponent],
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  }));

  it('Test rendered Grid rows using Selector', fakeAsync( async () => {
    fixture.detectChanges();
    const compiled = fixture.nativeElement as HTMLElement;
    tick(500);
    expect(compiled.querySelector('.e-grid') as HTMLElement).toBeDefined();
    expect((compiled.querySelector('.e-grid') as HTMLElement).classList.length).toBe(9);
    const rows: HTMLElement[] = [].slice.call(compiled.querySelectorAll('.e-row'));
    expect(rows.length).toBe(6);
  }));

  it('Test rendered Grid rows using Instances', fakeAsync( async () => {
    fixture.detectChanges();
    tick(500);
    const component = fixture.componentInstance;
    expect((component as AppComponent).grid?.currentViewData.length).toBe(6);
  }));
});

To view test results, run:

ng test

Integration Testing

Integration testing validates a component as an integrated unit, helping identify issues resulting from the combination of parts. The following code demonstrates an integration test for AppComponent with the Syncfusion® Grid using Angular’s testing utilities.

// app.component.spec.ts

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { GridModule, PageService, EditService } from '@syncfusion/ej2-angular-grids';

const newRecord = {
  OrderID: 10262,
  CustomerID: 'RATTC',
  Freight: 48.29,
  OrderDate: new Date(8379738e5),
};

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(( async () => {
    fixture = await TestBed.configureTestingModule({
      imports: [GridModule],
      providers: [PageService, EditService],
      declarations: [AppComponent],
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  }));

  it('Add new record dynamically in the Data Grid rows and check the record', fakeAsync( async () => {
    fixture.detectChanges();
    tick(500);
    (component as AppComponent).grid?.addRecord(newRecord, 0);
    tick(500);
    expect(((component as AppComponent).grid?.currentViewData[0] as any).OrderID).toBe(10262);
  }));
});

Run the following command to see the report:

ng test

End-to-End Testing

End-to-End testing evaluates Syncfusion® components from a user’s perspective, simulating actions such as clicking the pager within the Grid component. The following example shows how to trigger navigation and verify that the result matches user expectations.

// app.component.spec.ts

import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { GridModule, PageService, EditService } from '@syncfusion/ej2-angular-grids';

const newRecord = {
  OrderID: 10262,
  CustomerID: 'RATTC',
  Freight: 48.29,
  OrderDate: new Date(8379738e5),
};

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(( async () => {
    fixture = await TestBed.configureTestingModule({
      imports: [GridModule],
      providers: [PageService, EditService],
      declarations: [AppComponent],
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  }));

  it('Render the Data Grid and navigate its pages', fakeAsync( async () => {
    fixture.detectChanges();
    tick(500);
    const compiled = fixture.nativeElement as HTMLElement;
    (component as AppComponent).grid?.addRecord(newRecord, 0);
    tick(500);
    const event = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    (compiled.querySelector('.e-pager-default') as HTMLElement).dispatchEvent(event);
    tick(500);
    expect((component as AppComponent).grid?.currentViewData.length).toBe(3);
  }));
});

To view E2E test results, run:

ng test

See also