Angular UI Components Documentation

Angular CLI Unit Testing

This tutorial will show you how to run Unit Tests with Angular CLI along with the Angular Components by jQWidgets.

First we will need to have an Angular CLI project set up. For that we will use the Create jQWidgets Angular App.

NOTE: Create jQWidgets Angular App is set up for testing so we can directly run npm test.

When the set up is done, open the tsconfing.spec.json file, located in src folder and add the following line in the include property:

"../node_modules/jqwidgets-scripts/jqwidgets-ts"

It should look like this:

Then we can go to the app.component.spec.ts file and write our first test:

app.component.spec.ts

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { jqxGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid';
 
describe('AppComponent', () => {
    let fixture: ComponentFixture<AppComponent>;
 
    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [AppComponent, jqxGridComponent]
        });
 
        fixture = TestBed.createComponent(AppComponent);
    });
 
    it('should columngroups text be Product Details', () => {
        expect(fixture.componentInstance.columngroups[0].text).toBe('Product Details');
    });
});

All that's left is to run the command npm test and browser window with Karma will pop-up with the test results: