Блог

Ищу вдохновение здесь. Я использую react-admin, который представляет собой фреймворк на основе material ui, с Cypress для тестирования e2e и застрял на сортировке таблиц.

В проекте react-admin github есть тест Cypress для проверки сортировки таблиц, но все, что он делает, это проверяет, появляется ли индикатор up / down после щелчка по заголовку таблицы для переключения сортировки. Это тест пользовательского интерфейса, а не сквозной тест, поскольку он не просматривает фактические данные, чтобы увидеть, отсортированы ли данные.

В моем случае при изменении порядка сортировки выполняется запрос API, и пользовательский интерфейс отображает новые отсортированные данные из API.

Однако, хотя Cypress правильно проверяет содержимое первой строки с помощью .contains() перед сортировкой, после завершения сортировки Cypress по-прежнему отвечает так, как будто первая строка в таблице содержит те же данные, а не новые данные, которые я вижу на экране. Я проверил исходный код, и DOM обновлен до нового порядка.

Похоже, что где-то происходит какое-то кэширование, и я не могу понять, где.

Я не могу поделиться полным кодом, поскольку он сложный и проприетарный, но я свел его к минимальному примеру, который доступен по адресу https://gitlab.com/notifium_public/cypress-table-sort

Для этого используется собственный демонстрационный сайт react-admin.

Просто сделайте:

 git clone https://gitlab.com/notifium_public/cypress-table-sort.git
npm install
npm run test
  

затем запустите table_sort.js тест в Кипарисе.

Вы увидите, что тест входит в систему, проверяет первую строку, затем щелкает заголовок столбца и снова проверяет эту первую строку. Данные рандомизированы, поэтому лучшая проверка, которую я мог придумать, — это проверить, что в новой первой строке нет клиента с датой «последнего просмотра» в 2020 году.

Визуально новая запись в верхней строке будет 2016/2017, но тест не пройден, так как в нем все еще есть ссылка на исходную строку 2020.

Есть мысли? С уважением, Энди