如何测试柏树中元素的子代？

Question

如果我有这些元素

<div class="diffed-chunks">
    <div class="diffed-chunk diffed-chunk--pending"></div>
    <div class="diffed-chunk">1</div>
    <div class="diffed-chunk">2</div>
</div>

是否有比这更简单的测试方法？

cy.get('.diffed-chunks .diffed-chunk').as('diffed-chunks');
cy.get('@diffed-chunks')
  .eq(0)
  .should('have.class', 'diffed-chunk--pending');
cy.get('@diffed-chunks')
  .eq(1)
  .should('have.text', '1');
cy.get('@diffed-chunks')
  .eq(2)
  .should('have.text', '2')

Answer 1

这是一个见解，但是我喜欢的模式是

• 定义期望的数组
• 通过未测试的属性选择所有子项
• 将实际数组与预期数组进行比较

const expected = [
  {
    text: '',
    classes: 'diffed-chunk diffed-chunk--pending',
  },
  {
    text: '1',
    classes: 'diffed-chunk',
  },
  {
    text: '2',
    classes: 'diffed-chunk',
  },
];

const getText = el => el.textContent.trim()

it('should have expected text', () => {
  cy.get('.diffed-chunks div').then(els => { 
    const texts = [...els].map(getText)
    expect(texts).to.deep.eq(expected.map(x => x.text))
  })
});

const getClasses = el => el.className

it('should have classes', () => {
  cy.get('.diffed-chunks div').then(els => { 
    const classes = [...els].map(getClasses)
    expect(classes).to.deep.eq(expected.map(x => x.classes))
  })
});