Method that return parent

[lusarz]

In one of my test scenario I need to get parent of element, something like:

wrapper.find(selector).parent().hasClass('disabled')

What do you think about adding parent method to wrapper ?

[eddyerburgh]

I would prefer to keep the API small. This would require adding a parent property to the Wrapper class.

I'd like hear what other people think 🙂

[Austio]

I agree @eddyerburgh. Initial thoughts are that this would add a fair amount of complexity and create some ambiguity on whether it is the parent vue component or parent html node.

[eddyerburgh]

I'm closing this as we don't intend to implement this at the moment

[emileber]

Since Wrapper isn't exposed, we can't just create a new Wrapper from wrapper.vm.parent.

#337 would help in this case.

[eddyerburgh]

This feature request is for a parent method for a vnode, not a Vue instance. You wouldn't be able to access a vnode parent, the only way would be to add a parent property to each vnode inside vue-test-utils.

[anorborg]

Is there any recommended workaround to access the parent?

[natchiketa]

@anorborg Here's my workaround, fwiw:

TL;DR: the Wrapper instance exposes an element property, which is a regular ol' JavaScript DOM Element. You can use that to get to a parent, sibiling, etc.

Use case

I have a event calendar component that is a week or month calendar, and I'm testing that the event fixture from the tests and the link to go to the route for just that calendar day match. The markup looks like this:

        <li v-for="(day, index) in calendarDays" :key="index" class="day">
          <div class="date">{{ day.date.format('DD') }}</div>
          <div v-for="(event, index) in eventsOnDay(day.date)" :key="index" class="event"> {{ // stuff }}</div>
          <router-link :to="detailPath(day.date)" class="router-link" />
        </li>

I want to find the .event element (there's only one event in this test), then go back up to its parent so I can get to .event's sibiling, the <router-link />, and make sure that the link's url matches the event time. Yada yada, real-world use case.

  it('has links to the detail view', async function() {
    const wrapper = await mount(EventCalendar, { localVue, store, router })
    const eventWrapper = wrapper.find('.event') // this returns a Wrapper instance
    // parentElement is the <li />, then you can use querySelector to find the sibling, so
    // detailLink is also an Element instance
    const detailLink = eventWrapper.element.parentElement.querySelector('.router-link')
    expect(detailLink.getAttribute('href')).toMatch(`/detail/${testEvent.date)}`)
  })

[cassiofelippe]

@lusarz Depending on your needs, you could use:

wrapper.find().element.parentElement

But if you need the wrapper object of the parent element, it might be possible by using the querySelector, by adding css properties to your HTML elements.