Vue jest test current target parent has class when click (which is added via v-for)

Question

I'm trying to test a selected item on a list of items, which is handled on a click event by finding a selected class added to it.

My template:

<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>

Test case:

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')
})

Here, I'm triggering a click event for the first button in the list, and expecting class to be added for the first wrapper of the list. But it is not finding the class:

expect(received).toContain(expected) // indexOf

  Expected value: "selected"
  Received array: ["listItems"]

In jQuery or JavaScript, I can find the index using eq. Here, I used at is it correct?

Answer 1

I'm inferring the button-click is supposed to cause the selected class to be applied to an element in the .office-flightDetails group (not shown in question).

That class won't be applied until the next rendering tick, so you have to await the trigger('click') call:

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