cypress semanti c -ui-реагирует на тесты меню - не получает содержимое пунктов меню

Question

Я пишу здесь несколько тестов для компонента, который использует semanti c -react-ui, используя cypress js для тестирования.

Вот div, содержащий элементы, которые я буду тестировать sh:

<div data-testid="images-count" class="customize-row images-count">
   <h3 data-testid="option-name-8" class="option-name">Font Size</h3>
   <div data-testid="font-select" role="listbox" aria-expanded="true" class="ui active visible selection dropdown option-input images-select" tabindex="0">
      <div class="text" role="alert" aria-live="polite">Medium</div>
      <i aria-hidden="true" class="dropdown icon"></i>
      <div class="menu transition visible">
         <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">Small</span></div>
         <div role="option" aria-checked="true" aria-selected="true" class="active selected item" style="pointer-events: all;"><span class="text">Medium</span></div>
         <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">Large</span></div>
         <div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;"><span class="text">Extra Large</span></div>
      </div>
   </div>
</div>

Вот небольшой тест, который я проделал для элементов в этом div:

    cy.get("[data-testid=images-count]").within($result => {
       cy.findByRole("alert").should("have.text", "Medium");
       cy.get(".icon").should("be.visible");
       cy.get(".menu").should("not.be.visible");
       cy.get("[data-testid=font-select]").click();
       cy.get(".menu").should("be.visible");
    });

Я попытался получить параметры из меню в массив, а затем проверить их по другому массиву:

cy.get('.menu').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['Small', 'Medium', 'Large', 'Extra Large'])
})

Однако это возвращает список div, а не фактический тестовый констант I ищу Любые идеи?

Answer 1

Чтобы получить параметры, передаваемые в .then(options => ...), вам нужно будет указать c в селекторе cy.get().

Текстовое содержимое элемента будет возвращено из свойства o.innerText вместо o.value.

cy.get('.menu .item').then(options => {
  const actual = [...options].map(o => o.innerText );
  expect(actual).to.deep.eq(['Small', 'Medium', 'Large', 'Extra Large']);
})

---

Вы можете быть немного более кратким, собрав весь текст в одну строку

cy.get('.menu .item')
  .invoke('text')
  .should('eq', 'SmallMediumLargeExtra Large')

// OR

cy.get('.menu')
  .invoke('text')
  .should('eq', '\n  Small\n  Medium\n  Large\n  Extra Large\n')

При этом будьте осторожны с возможностью -option текст в меню, так как он просто захватывает весь текст, который он может найти в селекторе, который вы ему дали.

Answer 2

Вы не можете просто сделать options.map без массива и спреда? Я думаю, что вы делаете это просто вставив массив в другой массив ...

Если проблема с опциями, возвращающимися как неопределенные или пустые, просто вставьте

const actual = options && options.length > 0 ? options.map(o => o.value) : []