Vue开玩笑测试当前目标父级在单击时具有类通过v-for添加

问题描述

我正在尝试测试项目列表中的选定项目，这是通过单击添加到其中的选定类对click事件进行处理的。

我的模板：

<button onclick="myFunction('Demo')" class=" w3-button w3-border w3-border-light-black w3-block w3-light-grey w3-left-align">
Attribute
</button>  
            
<div id="Demo" class="w3-animate-opacity w3-hide w3-container">
  <p>Content</p>
</div>

测试用例：

<div class="mycomp" v-for="(list,i) in listItem" :key="list.id" :class="{ selected: i === selectedlist}">
  <button class="md-primary md-raised selectOption" v-if="i !== selectedList" @click="selectItem(list,i)">Select</button>
</div>

在这里，我正在触发列表中第一个按钮的click事件，并期望为列表的第一个包装添加类。但是找不到类：

test('highlight the selected item',() => {
    const mountFunction = options => {
        return mount(FlightDetails,{
            localVue,...options
        })
    }

    const wrapper = mountFunction()

    wrapper.findAll('.selectOption').at(0).trigger('click')
    const flightCard = wrapper.findAll('.office-flightDetails').at(0).classes()
    expect(flightCard).toContain('selected')
})

在jQuery或JavaScript中，我可以使用expect(received).toContain(expected) // indexOf Expected value: "selected" Received array: ["listItems"] 找到索引。在这里，我用eq正确吗？

解决方法

我要推断，单击按钮应该导致selected类应用于.office-flightDetails组中的元素（未显示）。

该类要等到下一个渲染刻度才会应用，因此您必须await the trigger('click') call：

test('highlight the selected item',async () => {
  //...                               ?
   ?
  await wrapper.findAll('.selectOption').at(0).trigger('click')
})