Cypress-тестирование: как сравнить количество элементов до и после вызова AJAX - PullRequest
Новая
       15

Cypress-тестирование: как сравнить количество элементов до и после вызова AJAX

1 голос
/ 14 июня 2019

У меня есть приложение React с бесконечной прокруткой, поэтому, когда пользователь прокручивает страницу до конца, делается запрос ajax для получения дополнительных результатов. Я изо всех сил пытался протестировать этот код, и ниже я смог найти работу, основанную на поиске в Google / Stackoverflow. Мне не ясно, что делает Cypress.$, или как по-другому говорить Cy.* команды.

Мне кажется, я не совсем понимаю, как заставить логику работать с асинхронной природой Cypress. Следующий код комментируется, чтобы объяснить мое мышление. 

  it("should scroll to bottom, retrieve & display next results", () => {
    // wait because some ajax request takes longer upon page load
    cy.wait(500);
    let initialCount = null;
    // store the length of elements in variable
    initialCount = Cypress.$("div.experienceThumbnail").length;
    // scroll down to bottom
    cy.scrollTo("bottom", { duration: 1000 });
    // wait because an ajax request is made for the pagination
    cy.wait(1111);
    // get the same elements again
    cy.get("div.experienceThumbnail")
      .its("length")
    // compare the new count to prev. count we stored above in initialCount var
      .should("be.gt", initialCount);
  });

Мой главный вопрос заключается в том, как правильно протестировать что-то подобное выше.

1 Ответ

0 голосов
/ 17 июня 2019

В Cypress нужно научиться жить с вложенными Promises, если вы хотите точный контроль над утверждениями.

Я не проверял следующие два предложения, но по крайней мере одно из них должноработа: 

it("should scroll to bottom, retrieve & display next results", () => {
  const selector = "div.experienceThumbnail"
  cy.wait(500);
  cy.get(selector).then($els => {
    const initialCount = $els.length
    cy.scrollTo("bottom", { duration: 1000 });
    cy.wait(1111);

    cy.get(selector)
      .its("length")
      .should("be.gt", initialCount);
  })
});

it("should scroll to bottom, retrieve & display next results", () => {
  const selector = "div.experienceThumbnail"
  cy.wait(500);
  cy.get(selector).then($els => {
    const initialCount = $els.length
    cy.scrollTo("bottom", { duration: 1000 });
    cy.wait(1111);

    cy.get(selector).then($els2 => {
      const currentCount = $els2.length
      expect(initialCount <= currentCount).to.be.true
    })
  })
});
...