Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get button text in vue-test-utils

How do I retrieve the button text from a found element in vue-test-utils? I am using v1.0.0-beta.10

For example, in my vue file I have a button like:

el-button(@click.native="cancel",
          size="small",
          native-type="button") Cancel

Then in my tests:

const button = wrapper.findAll({
  name: "el-button"
})

console.log('buttonAll is', button.at(2).vnode.$attrs) // {}

I get an empty object. Even better, how can I directly query that Vue component based on button text?

like image 485
writofmandamus Avatar asked Jan 17 '18 22:01

writofmandamus


2 Answers

You can retrieve the button text from a found element like this:

 describe('Button', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(VueComponent);
  });
  it('has a button with text mazino', () => {
    let button = wrapper.find('.mazino');
    expect(button.text()).toBe('mazino');
  });
});
like image 117
Ewomazino Ukah Avatar answered Nov 01 '22 00:11

Ewomazino Ukah


This is how I query buttons by text

function findByText (wrap, selector, text) {
  return wrap.findAll(selector).filter(n => n.text().match(text));
}

describe('Button', () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(VueComponent);
  });
  it('has a button with text foo', () => {
    const button = findByText(wrapper, 'button', /foo/).at(0);
    expect(button.exists()).toBeTruthy();
  });
});
like image 1
Space Monkey Avatar answered Nov 01 '22 00:11

Space Monkey