Looking for some inspiration here. I'm using react-admin, which is a material-ui based framework, with Cypress for e2e testing, and got stuck on table sorting.
There is a Cypress test within the react-admin github project to test for table sorting, but all it does is look at whether the up/down indicator appears after you click the table heading to toggle the sort. That's a UI test, not an end-to-end test, as it doesn't look at the actual data to see if the data is sorted.
In my case, when you change the sort order, an API request is made and the UI renders the new sorted data from the API.
However, although Cypress correctly checks for the content of the first row using .contains() before the sort, once the sort is done, Cypress still responds as if the first row in the table contains the same data, rather than the new data I can see on-screen. I've checked source, and the DOM is updated to the new order.
It's like there's some caching going on somewhere, and I can't figure out where.
I can't share the full code as it's complex and proprietary, but I've boiled it down to a minimal example, which is available at https://gitlab.com/notifium_public/cypress-table-sort
This uses react-admin's own demo site.
Just do:
git clone https://gitlab.com/notifium_public/cypress-table-sort.git
npm install
npm run test
then run the table_sort.js test in Cypress.
You'll see that test logs in, checks the first row, then clicks a column header and checks that first row again. The data is randomised, so the best check I could come up with is to check the new first row doesn't contain a customer with a "last seen" date in 2020.
Visually, the new entry in the top row will be 2016/2017, but the test fails, as it's still got a a reference to the original 2020 row.
Any thoughts? Regards, Andy