Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unit testing ag-grid in Angular 2

Has someone worked on unit testing ag-grid components in Angular 2?

For me, this.gridOptions.api remains undefined when the test cases run.

like image 742
Satyabrat Kumar Avatar asked Feb 17 '17 13:02

Satyabrat Kumar


People also ask

How to Test AG Grid?

Checking Grid Data We can match grid data by looking for rows by matching div[row="<row id>"] and then column values within these rows by looking for div 's with a class of . ag-cell-value : it('first row should have expected grid data', () => { element. all(by.

What is agInit in AG Grid?

agInit() is called once (with the corresponding cell's parameters supplied). The component's GUI will be inserted into the grid 0 or 1 times (the component could get destroyed first, i.e. when scrolling quickly). refresh() is called 0...n times (i.e. it may never be called, or called multiple times).

What is defaultColDef in AG Grid?

In addition to the above, the grid provides additional ways to help simplify and avoid duplication of column definitions. This is done through the following: defaultColDef : contains properties that all columns will inherit. defaultColGroupDef : contains properties that all column groups will inherit.


1 Answers

Sorry to be a little late to the party but I was looking for an answer to this just a couple of days ago so wanted to leave an answer for anyone else that ends up here. As mentioned by Minh above, the modern equivalent of $digest does need to be run in order for ag-grid api's to be available.

This is because after the onGridReady() has run you have access to the api's via the parameter, looking like so. This is run automatically when a component with a grid is initialising. Providing it is defined in the grid (gridReady)="onGridReady($event)"

public onGridReady(params)
{
   this.gridOptions = params;
}

This now means you could access this.gridOptions.api and it would be defined, you need to re-create this in your test by running detectChanges(). Here is how I got it working for my project.

fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;

fixture.detectChanges(); // This will ensure the onGridReady(); is called

This should inturn result in .api being defined when running tests. This was Angular 6.

Occasionally the test may have to perform an await or a tick:

  it('should test the grid', fakeAsync( async () => {
    // also try tick(ms) if a lot of data is being tested
    // try to keep test rows as short as possible
    // this line seems essential at times for onGridReady to be processed.
    await fixture.whenStable();
    // perform your expects...after the await
  }));
like image 55
Dince12 Avatar answered Oct 29 '22 07:10

Dince12