Testing ag-Grid
We will walk through how you can use testing ag-Grid as part of your Angular application, using default build tools provided when using the Angular CLI.
Configuring the Test Module
The first thing we need to do is to add ag-Grid's AgGridModule
to the TestBed.configureTestingModule(
:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
AgGridModule.withComponents([])
],
declarations: [TestHostComponent]
}).compileComponents();
fixture = TestBed.createComponent(TestHostComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
Now that the test bed is aware of ag-Grid we can continue with our testing. If however you wish to add any user provided components to the grid then you'll need to declare them here too:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule,
+ AgGridModule.withComponents([RendererComponent, EditorComponent])
],
+ declarations: [TestHostComponent, RendererComponent, EditorComponent]
}).compileComponents();
fixture = TestBed.createComponent(TestHostComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
Here were initialising the test bed before each test for convenience.
Testing via the Grid API
The grid's API will only be ready after detectChanges
has been run:
it('grid API is not available until `detectChanges`', () => {
expect(component.gridOptions.api).not.toBeTruthy();
});
it('grid API is available after `detectChanges`', () => {
fixture.detectChanges();
expect(component.gridOptions.api).toBeTruthy();
});
Testing Grid Contents
The easiest way to check the grid contents is to access the nativeElement
and query DOM elements from there:
it('the grid cells should be as expected', () => {
const appElement = fixture.nativeElement;
const cellElements = appElement.querySelectorAll('.ag-cell-value');
expect(cellElements.length).toEqual(3);
expect(cellElements[0].textContent).toEqual("Test Name");
expect(cellElements[1].textContent).toEqual("42");
expect(cellElements[2].textContent).toEqual("84");
});
Testing User Supplied Components
The easiest way to test user supplied components is to access them via getFrameworkComponentInstance
.
For example, given the following code:
@Component(<span ng-non-bindable>{</span>
selector: 'editor-cell',
template: `<input #input [(ngModel)]="value" style="width: 100%">`
<span ng-non-bindable>}</span>
)
export class EditorComponent implements ICellEditorAngularComp {
private params: any;
public value: number;
@ViewChild('input', {read: ViewContainerRef}) public input;
agInit(params: any): void {
this.params = params;
this.value = this.params.value;
}
getValue(): any {
return this.value;
}
// for testing
setValue(newValue: any) {
this.value = newValue;
}
isCancelBeforeStart(): boolean {
return false;
}
isCancelAfterEnd(): boolean {
return false;
};
}
@Component({
template:
`<div>
<ag-grid-angular
style="width: 100%; height: 350px;" class="ag-theme-alpine"
[columnDefs]="columnDefs"
[rowData]="rowData"
[stopEditingWhenGridLosesFocus]="false"
[frameworkComponents]="frameworkComponents"
(gridReady)="onGridReady($event)">
</ag-grid-angular>
</div>`
})
class TestHostComponent {
rowData: any[] = [{name: 'Test Name', number: 42}];
columnDefs: any[] = [
{field: "name"},
{field: "number", colId: "raw", headerName: "Raw Number", editable: true, cellEditor: 'editor'},
{field: "number", colId: "renderer", headerName: "Renderer Value"}
];
frameworkComponents = {
'editor': EditorComponent
};
api: GridApi;
columnApi: ColumnApi;
public onGridReady(params) {
this.api = params.api;
this.columnApi = params.columnApi;
}
}
We can test that the EditorComponent
works as follows:
it('cell should be editable and editor component usable', () => {
// we use the API to start and stop editing - in a real e2e test we could actually double click on the cell etc
component.api.startEditingCell({
rowIndex: 0,
colKey: 'raw'
});
const instances = component.api.getCellEditorInstances();
expect(instances.length).toEqual(1);
const editorComponent = instances[0].getFrameworkComponentInstance();
editorComponent.setValue(100);
component.api.stopEditing();
const appElement = fixture.nativeElement;
const cellElements = appElement.querySelectorAll('.ag-cell-value');
expect(cellElements.length).toEqual(3);
expect(cellElements[0].textContent).toEqual("Test Name");
expect(cellElements[1].textContent).toEqual("100");
expect(cellElements[2].textContent).toEqual("200");
});
Applying Styles To The Grid When Testing
Although not strictly necessary when unit testing the grid, it is still useful to see the grid
rendered when debugging. In order for this to work you need to provide the CSS to karma.conf.js
:
// not strictly required for testing but useful when debugging the grid in action
files: [
'../node_modules/ag-grid-community/dist/styles/ag-grid.css',
'../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css'
]
- Unit Testing with Jasmine - Waiting for the API
- End to End (e2e) Testing
- Testing Dependencies
- Selenium Server
- Sample Configuration
- Sample Test
- Checking Headers
- Checking Grid Data
- ag-Grid Testing Utilities
- verifyRowDataMatchesGridData
- verifyCellContentAttributesContains
- allElementsTextMatch
- clickOnHeader
- getLocatorForCell
- getCellContentsAsText
- Configuring the Test Module
- Testing via the Grid API
- Testing Grid Contents
- Testing User Supplied Components
- Applying Styles To The Grid When Testing
- Waiting for the Grid to be Initialised
- Waiting for Grid Components to be Instantiated
- Waiting for the Grid to be Initialised
- Testing User Supplied Components
- Jest Configuration
- <code class="language-text">SyntaxError: Cannot use import statement outside a module</code>