One of the big benefits of Siesta is its ability to test real UI interactions, allowing us to create automated, repeatable tests, based on the way the application is actually rendered and how a real user would interact with it.
In this section, we will test the product grid that we created in Chapter 7, Constructing Common UI Widgets. We will look at testing how it has been rendered and then move on to testing clicks on the grid row's Details button.
To kick off, we are going to test whether each cell of the grid renders the correct values based on the data in the store it is bound to. This will catch any issues with field names changing and grid column configurations.
We start by creating a new test suite, like we did in the previous section, and a new test file called 010_GridCellContents.t.js. Our folder structure will look like the following:
Be careful to update all the paths in your index.html and index.js files to suit the new location.
In these...