helper functions for vue-test-utils

vue-test-utils-helpers.js

function withWrapperArray(wrapperArray) {
  return {
    childSelectorHasText: (selector, str) => wrapperArray.filter(i => i.find(selector).text().match(str)),
    hasText: (str) => wrapperArray.filter(i => i.text().match(str)),
    areVisible: () => wrapperArray.wrappers.filter(w => w.isVisible()).length,
    areHidden: () => wrapperArray.wrappers.filter(w => !w.isVisible()).length,
    areAllVisible: () => wrapperArray.wrappers.every(w => w.isVisible()),
    areAllHidden: () => wrapperArray.wrappers.every(w => !w.isVisible()),
  }
}

xample.js

// find first element that that has class name `.filter__name` with a textvalue of `Vehicles`
withWrapperArray(wrapper.findAll('.filter__name')).hasText('Vehicles').at(0);

// find an element that has a child with matching  text content 
withWrapperArray(wrapper.findAll('.filter')).childSelectorHasText('label', 'Saab').at(0)

// get the input that's a sibling of the matched label
withWrapperArray(wrapper.findAll('.filter')).childSelectorHasText('label', 'Saab').at(0).find('input')

// are all matched elements hidden?
expect(withWrapperArray(wrapper.findAll('.filter')).areAllHidden()).toBeTruthy();

// are all matched elements visible?
expect(withWrapperArray(wrapper.findAll('.filter')).areAllVisible()).toBeTruthy();

// are some matched elements hidden?
expect(withWrapperArray(wrapper.findAll('.filter')).areHidden()).toBeTruthy();

// are some matched elements visible?
expect(withWrapperArray(wrapper.findAll('.filter')).areVisible()).toBeTruthy();