Testing ag-Grid with Protractor & Jasmine
We will walk through how you can use
Jasmine to do Unit & End to End (e2e) testing
with ag-Grid in this section.
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
Once the API is ready, we can then invoke Grid
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
Jasmine in depth here - please see either the
Jasmine for information around either of these tools.
We only describe how these tools can be used to test ag-Grid below.
Note you can install
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:
This can be added to your package.json for easier packaging and repeatability:
You can either start & stop your tests in a script, or start the Selenium server seperately, running your tests against it.
Remember that the interaction between your tests and the browser is as follows:
We'll run the server separately to begin with here:
Protractornot to wait for Angular by adding this to either your configuration or your tests:
browser.ignoreSynchronization = true;
Let's start off by checking the headers are the ones we're expecting. We can do this by retrieving all
We can now run our test by executing the following command:
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
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:
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.
Userful when there is an array of data within a cell, each of which is witing an attribute (for example an image).
Verifies that all elements text (ie the cell value) matches the provided data. Usf
Clicks on a header with the provided
Provides a CSS
Locator for a grid cell, by row & id and optionally a further CSS selector.
Returns the cell value (as text) for by row & id and optionally a further CSS selector.