How to Assert a Value in an Ext JS Grid using Sencha Test API

Sencha Test has a rich set of APIs that allows you to test Ext JS applications with minimal code. In order to test Ext JS grids (tables) in an application, you can use the ST.grid API and leverage the API methods to write different types of tests.

This example shows you how to use the Sencha Test API ST.grid to test a grid.

Testing a Grid

Grids can be complex, so you need to test them using a very methodical approach. Follow the simple rules below to write tests that cover the different aspects of grids:

1. Keep the test short.
2. Keep the data constant between test runs.
3. Use page objects to abstract various locators involved in identifying the grid.

Sample Code

In this example, we’re not going to show runnable code but will explain how you can use the API and methods to write concise tests.

rowWith method:
The rowWith method allows you to click on a grid row using the column property that is set by the developer on the grid component. In this case, we’re using the name property.

ST.grid('assetgrid')
    .rowWith('name', 'Statesman 10-piece conference table and chairs')
    .click();

Please note:

1. The methods rowWith and click can be chained which will keep the test shorter and more clear.
2. Any test that you have for grid can be easily translated into an Sencha Test API test once you understand the various API methods that are available.
3. The assetgrid within the parenthesis in the first line is the XType value, specified by the developer, for this grid. This is a unique locator value in this case, and Sencha Test (v2.1 and above) has an inspector tool built-in that will allow you to get the unique properties of components used in the application.

Assertion:

 ST.grid('assetgrid')
    .rowWith('name', 'Statesman 10-piece conference table and chairs')
    .cellWith('dataIndex', 'quantity').textLike('2');

Please note:

1. A new method has been introduced “cellWith“.
2. This method allows you to grab the value from a specific cell and assert if it’s the correct value using another built-in method “textLike“.
3. dataIndex is the name of the field in the grid’s Ext.data.Store Ext.data.Model definition. While you won’t know this name without the help of the developer, the Inspector tool in Sencha Test (v2.1 and above) can help you narrow down the column definition. That allows you to leverage these methods to write tests rather than using brittle DOM locators.
4. The Inspector Wizard in Sencha Test will help you find the column definition. We’ll share more details about the Inspector feature in subsequent tips. For now, you can get information about this feature in the Sencha Test docs.

The test code shown in this example is part of an example application and associated test suite. The example test suite is available on GitHub.

Get more information about other Sencha Test APIs by reading the docs. Share your feedback and questions in the Sencha Test forum.

Happy Testing!