Testing Environment for Kendo UI for Angular Components

Environment

Product

Progress® Kendo UI® for Angular

Description

How to test Kendo UI for Angular components?

This Knowledge Base article also answers the following questions:

• What tools does the Kendo UI for Angular team use for testing?
• How does Kendo UI for Angular test components?
• What is the testing environment for Kendo UI for Angular components?

Overview

Testing Kendo UI for Angular components involves setting up a testing environment for writing unit and end-to-end (e2e) tests to ensure the components behave as expected. This guide provides a simplified and generic approach to testing components like the Grid, DropDownList, and others in the Kendo Angular suite.

We test Kendo UI for Angular components using both unit tests and end-to-end (e2e) tests. The following tools power our testing process:

• Jest—Efficiently runs unit tests using TestBed. Fully integrated with Selenium for system-level end-to-end testing.
• NX—Optimizes testing by running only affected tests. Supports parallel execution and improves CI/CD performance with smart caching.

Follow these steps to review the tests for a specific component:

1. Clone the Kendo UI for Angular repository. Refer to the source code installation guide for instructions.
2. Open the libs/component/test/ folder in the repository to locate the tests.

We rely on Angular’s TestBed to test components and services. TestBed configures and creates testing modules that closely mimic the Angular runtime environment. Our internal tests use TestBed to ensure compatibility with Angular’s built-in utilities.

Setting Up the Testing Environment

Follow these steps to set up your testing environment:

1. Start by importing Angular testing utilities and the Kendo component you want to test. For example, to test the Grid component:

   ts

   import { Component } from '@angular/core';
   import { TestBed, ComponentFixture } from '@angular/core/testing';
   import { By } from '@angular/platform-browser';
   import { GridComponent } from '@progress/kendo-angular-grid';

2. Use Angular's TestBed to configure the testing module. This step sets up the testing environment by declaring the test component and importing the necessary Kendo modules or utility arrays.

   ts

   beforeEach(() => {
       TestBe d.configureTestingModule({
           declarations: [TestComponent],
           imports: [KENDO_GRID] // Import the utility array containing the component
       });
   });

3. Create a simple host component to test the Kendo component in isolation. This component acts as a wrapper for the Kendo component.

   ts

   @Component({
       template: `
           <kendo-grid [data]="data">
               <kendo-grid-column field="name" title="Name"></kendo-grid-column>
           </kendo-grid>
       `
   })
   class TestComponent {
       public data = [{ name: 'John' }, { name: 'Jane' }];
   }

4. A fixture is a wrapper around the test component that allows you to interact with it during tests. Use the fixture to access the Kendo component and trigger changes.

   ts

   let fixture: ComponentFixture<TestComponent>;
   let grid: GridComponent;
   
   beforeEach(() => {
       fixture = TestBed.createComponent(TestComponent);
       fixture.detectChanges();
       grid = fixture.debugElement.query(By.directive(GridComponent)).componentInstance;
   });

Writing Tests

1. Ensure the Kendo component renders correctly in the DOM.

   ts

   it('should render the grid', () => {
       const gridElement = fixture.debugElement.query(By.css('kendo-grid'));
       expect(gridElement).toBeTruthy(); // Check if the Grid is present
   });

2. Test input bindings and verify that properties are applied correctly to the Kendo component.

   ts

   it('should bind data to the grid', () => {
       expect(grid.data).toEqual([{ name: 'John' }, { name: 'Jane' }]); // Check if data is bound
   });

3. Simulate events and verify that they are emitted as expected.

   ts

   it('should emit dataStateChange event', () => {
       spyOn(grid.dataStateChange, 'emit'); // Spy on the event emitter
       grid.dataStateChange.emit({ skip: 10, take: 5 }); // Simulate the event
       expect(grid.dataStateChange.emit).toHaveBeenCalledWith({ skip: 10, take: 5 }); // Verify the event payload
   });

4. Verify that custom templates render correctly inside the Kendo component.

   ts

   it('should render custom cell template', () => {
       fixture.componentInstance.data = [{ name: 'Custom' }]; // Update the data
       fixture.detectChanges(); // Trigger change detection
       const cell = fixture.nativeElement.querySelector('td'); // Find the cell
       expect(cell.textContent).toContain('Custom'); // Check the cell content
   });

See Also

• Jest
• NX
• Angular’s TestBed