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?
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');
});
});
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();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With