Как перебирать и тестировать различные дочерние элементы внутри элемента в кипарисе?

Итак, у меня есть элементы в следующей структуре:

<div class = "MuiBox-root" data-testid = "all-events">
  <ul ....>
    <div class = "MuiBox-root" data-testid = "event">
    <div class = "MuiBox-root" data-testid = "event">
    <div class = "MuiBox-root" data-testid = "event">

Теперь внутри каждого элемента события находится следующая структура:

 <div class = "MuiBox-root" data-testid = "event">
  <li .....>
    <div class = "MuiBox-root ....." data-testid = "event-status">
      <div> Text Value </div>
    <div class = "MuiBox-root ....." data-testid = "event-name">
    

Итак, что я хочу проверить, так это то, что если элемент event-status, скажем, завершен или активен, то элемент event-name будет присутствовать. Итак, подход, который я использую, заключается в следующем:

cy.get("[data-testid='events']").its("length").then((numEvents) => {
  for (let i = 0; i < numEvents; i++) {
    cy.get("[data-testid='event-status']").each((status, index) => {
      if (index === i) {
        if (isEventActive(status)) {
          cy.get("[data-testid='event-name']").each((name, index) => {
            if (index === i) {
              cy.get(name).should("have.text", "some value");
            }
          });
        } else {
            cy.get("[data-testid='event-name']").each((name, index) => {
            if (index === i) {
              cy.get(name).should("not.exist");
            }
          });
        }
      }
    });
  }
});

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

Вы можете заменить этот index === 0 чек чем-то более гибким, например if (event-status === 'condition')

Joshua 25.12.2020 10:15
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
4 779
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Преобразуйте цикл for в .each(). Использование .within() в событии позволит внутренним командам get быть специфичными для события и избавит от необходимости проверять значения индекса.

cy.get("[data-testid='events']").each($event=> { 
  cy.wrap($event).within(() => {
    cy.get("[data-testid='event-status']").each($status => {
      if (isEventActive($status)) {
        cy.get("[data-testid='event-name']").should("have.text", "some value");
      }) else {
        cy.get("[data-testid='event-name']").should("not.exist")
      })
    })
  })
});

Может быть, это тоже сработает. Использует замыкание для преобразования двух внутренних элементов ($status и $name) в троичное выражение и использует .should("satisfy", callbackFn) для выполнения проверки «или/или».

cy.get("[data-testid='events']").each($event => { 
  cy.wrap($event).find("[data-testid='event-status']").then($status => {
    cy.wrap($event).find("[data-testid='event-name']")
      .should("satisfy", $name => isEventActive($status)  
        ? $name.text() === "some value"
        : $name.length === 0;
      );
    })
  })
});

Другие вопросы по теме