Как запретить cy.get "снимать" список перед его сортировкой

Question

Не лучший титул, но вот мой вызов. У меня есть список на моей странице, который можно отсортировать, и я хочу Cypress-тест, который проверяет, работает ли он должным образом. Итак, представьте себе этот тест:

/* 1 */ cy.get('.list-item').eq(0).should('have.text', 'A');
/* 2 */ cy.get('.list-item').eq(-1).should('have.text', 'Z');

// Code that triggers sorting to change from asc to desc

/* 3 */ cy.get('.list-item').eq(0).should('have.text', 'Z');
/* 4 */ cy.get('.list-item').eq(-1).should('have.text', 'A');

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

I ' Я не уверен, что это вызвано функцией cy.get или eq, но проблема в том, что строка 3 «захватывает» первый элемент в списке, который по-прежнему 'A', а затем пытается утверждать, что текст 'Z'. И когда список переупорядочивается, этот «захваченный» элемент фактически не изменяется, он просто перемещается в DOM, поэтому утверждение still пытается установить тот же элемент 'A', который в DOM на самом деле последний элемент сейчас - это 'Z', который, очевидно, не является и не должен быть.

Если я вставлю cy.wait(100) перед 3, тогда он будет работать, как и ожидалось, но, очевидно, я не хотите, чтобы в моем тесте было случайное ожидание, так как мне решить эту проблему?

Как проверить, каков первый и последний элементы в такой ситуации, когда Cypress захватывает элементы DOM перед тем они переупорядочены без вставки произвольного ожидания? 10

---

Фактический случай

• Приложение поддержки, отображающее список 5 самых последних просмотренных клиентов
• Необходимо проверить это при посещении, например, номера 3 в этом списке, он перемещается в начало
• «Код, запускающий сортировку» на самом деле является событием навигации по маршруту:
  1. Есть слушатель (перехват React useEffect) при изменении маршрута .
  2. При изменении маршрута обновляется список недавно просмотренных идентификаторов клиентов, который хранится в локальном хранилище.
  3. При изменении списка в локальном хранилище компонент, показывающий этот список, сначала ожидает 750 мс. (так что это менее запутанно для пользователя, но в Cypress-тестах оно уменьшено до 10 мс), затем обновляет (повторно сортирует) список.
  4. И так как список содержит только идентификаторы, каждая плитка будет асин c загрузите имя и еще кое-что для отображения в элементе списка.

Итак ... задержка на самом деле больше, чем просто обновление пользовательского интерфейса. Также включены запросы маршрутизации, локального хранилища и асин c. ?

Answer 1

Вам нужно объединить cy.get(...) и .eq в один селектор, чтобы убедиться, что он повторяет утверждение .should('have.text', 'Z') после обращения. Прочтите об этом https://on.cypress.io/retry-ability#Merging -queries - сейчас он захватывает список и затем только повторяет команду .eq(), что слишком поздно. Вы также можете переписать свой код, чтобы получить первый и последний элементы, используя один .should(cb) https://on.cypress.io/should#Function - пример в документации действительно соответствует вашему варианту использования.

Answer 2

Я делаю дикий выстрел здесь, но, возможно, в триггере для сортировки вы можете использовать тогда.

    cy.get('.list-item').eq(0).should('have.text', 'A');
    cy.get('.list-item').eq(-1).should('have.text', 'Z');

    // Code that triggers sorting to change from asc to desc
    cy.get("#id-to-sort").click().then(()=>{

    cy.get('.list-item').eq(0).should('have.text', 'Z');
    cy.get('.list-item').eq(-1).should('have.text', 'A');

    })