JavaScript Data GridTesting AG Grid

We will walk through how you can use `Jest' for unit testing, and `Protractor` and `Jasmine` to do Unit & End to End (e2e) testing with AG Grid in this section.

Testing with Jest

If you're using Modules then you will have to make the following configuration changes to accommodate ES Modules - if you're using Packages then this configuration is not required.

In order to test AG Grid with Jest you'll need to make the following configuration changes:

In jest.config.js add the following lines:

module.exports = {
  "transform": {
    "^.+\\.(ts|tsx|js|jsx|mjs)$": [
      "babel-jest"  // or "ts-test" or whichever transformer you're using
    ]
  },
  transformIgnorePatterns: ['/node_modules/(?!(@ag-grid-community|@ag-grid-enterprise)/)']
}

Unit Testing with Jasmine - Waiting for the API

In order to unit test your application you need to ensure that the Grid API is available - the best way to do this is to set a flag when the Grid's gridReady event fires, but this requires an application code change.

An alternative is to use a utility function that polls until the API has been set on the GridOptions:

function waitForGridApiToBeAvailable(gridOptions, success) {
     // recursive without a terminating condition,
     // but jasmines default test timeout will kill it (jasmine.DEFAULT_TIMEOUT_INTERVAL)
     if(gridOptions.api) {
         success()
     } else {
         setTimeout(function () {
           waitForGridApiToBeAvailable(gridOptions, success);
         }, 500);
     }
 }

Once the API is ready, we can then invoke Grid API and ColumnApi methods:

it('select all button selects all rows', () => {
     selectAllRows();  // selectAllRows is a global function created in the application code
     expect(gridOptionsUnderTest.api.getSelectedNodes().length).toEqual(3);
 });

End to End (e2e) Testing

These recipes below are suggestions - there are many ways to do End to End testing, what we document below is what we use here at AG Grid.

We do not document how to use either Protractor and Jasmine in depth here - please see either the

Protractor or Jasmine for information around either of these tools.

We only describe how these tools can be used to test AG Grid below.

Testing Dependencies

npm install protractor webdriver-manager --save-dev

 # optional dependencies - if you're using TypeScript
 npm install @types/jasmine @types/selenium-webdriver --save-dev

Note you can install protractor and webdriver-manager globally if you'd prefer, which would allow for shorter commands when executing either of these tools.

We now need to update the webdriver:

./node_modules/.bin/webdriver-manager update

This can be added to your package.json for easier packaging and repeatability:

"scripts": {
     "postinstall": "webdriver-manager update"
 }

Selenium Server

You can either start & stop your tests in a script, or start the Selenium server separately, running your tests against it.

Remember that the interaction between your tests and the browser is as follows:

[Test Scripts] < ------------ > [Selenium Server] < ------------ > [Browser Drivers]

We'll run the server separately to begin with here:

./node_modules/.bin/webdriver-manager start

Sample Configuration

// conf.js
 exports.config = {
     framework: 'jasmine',
     specs: ['spec.js']
 }

 // Here we specify the Jasmine testing framework as well as our test to run.

Sample Test

For this sample test we'll be testing this simple example:

Checking Headers

Let's start off by checking the headers are the ones we're expecting. We can do this by retrieving all div's that have the ag-header-cell-text class:

// spec.js
 describe('AG Grid Protractor Test', function () {
     // not an angular application
     browser.ignoreSynchronization = true;

     beforeEach(() => {
         browser.get('https://www.ag-grid.com/examples/testing/hello-world/index.html');
     });

     it('should have expected column headers', () => {
         element.all(by.css(".ag-header-cell-text"))
             .map(function (header) {
                 return header.getText()
             }).then(function (headers) {
                 expect(headers).toEqual(['Make', 'Model', 'Price']);
             });
     });
 });

We can now run our test by executing the following command:

./node_modules/.bin/protractor conf.js

 # or if protractor is installed globally protractor conf.js

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.css('div[row="0"] div.ag-cell-value'))
         .map(function (cell) {
             return cell.getText();
         })
         .then(function (cellValues) {
             expect(cellValues).toEqual(["Toyota", "Celica", "35000"]);
         });
 });

We can add this to spec.js and run the tests as before.

AG Grid Testing Utilities

Here at AG Grid we use a number of utility functions that make it easier for us to test AG Grid functionality.

The utilities can be installed & imported as follows:

Installing:

npm install ag-grid-testing --save-dev

Importing:

let ag_grid_utils = require("ag-grid-testing");

verifyRowDataMatchesGridData

Compares Grid data to provided data. The order of the data provided should correspond to the order within the grid. The property names should correspond to the colId's of the columns.

ag_grid_utils.verifyRowDataMatchesGridData(
     [
         {
             // first row
             "name": "Amelia Braxton",
             "proficiency": "42%",
             "country": "Germany",
             "mobile": "+960 018 686 075",
             "landline": "+743 1027 698 318"
         },
         // more rows...
     ]
 );

verifyCellContentAttributesContains

Useful when there is an array of data within a cell, each of which is writing an attribute (for example an image).

ag_grid_utils.verifyCellContentAttributesContains(1, "3", "src", ['android', 'mac', 'css'], "img");

allElementsTextMatch

Verifies that all elements text (ie the cell value) matches the provided data. Usf

ag_grid_utils.allElementsTextMatch(by.css(".ag-header-cell-text"),
     ['#', 'Name', 'Country', 'Skills', 'Proficiency', 'Mobile', 'Land-line']
 );

clickOnHeader

Clicks on a header with the provided headerName.

ag_grid_utils.clickOnHeader("Name");

getLocatorForCell

Provides a CSS Locator for a grid cell, by row & id and optionally a further CSS selector.

ag_grid_utils.getLocatorForCell(0, "make")
ag_grid_utils.getLocatorForCell(0, "make", "div.myClass")

getCellContentsAsText

Returns the cell value (as text) for by row & id and optionally a further CSS selector.

ag_grid_utils.getCellContentsAsText(0, "make")
     .then(function(cellValue) {
         // do something with cellValue
     });

 ag_grid_utils.getCellContentsAsText(0, "make", "div.myClass")
     .then(function(cellValue) {
         // do something with cellValue
     });