So far, so good -- the binding works correctly and mobilePhoneNumber is updated in the parent when I edit the field. The problem is in testing it. I want to set the value and verify that the input event was emitted:
let originalNumber = '(555) 123-1234';
let newNumber = '(444) 012-0123';
let wrapper = mount(PhoneNumberField, { propsData: { value: oldNumber } });
let input = wrapper.find('input')
input.element.value = newNumber;
input.trigger('input')
expect(wrapper.emitted()['input'][0][0]).to.equal(newNumber)
This does not work; wrapper.emitted() is empty. If I replace the <masked-input> with a regular <input> element (without the mask, obviously), my test works as expected and wrapper.emitted() contains the expected event.
Don't really think this is a bug, but I could use some help here. I'm writing a very simple
PhoneNumberField.vue
component:I can use my
PhoneNumberField
like this:So far, so good -- the binding works correctly and
mobilePhoneNumber
is updated in the parent when I edit the field. The problem is in testing it. I want to set the value and verify that theinput
event was emitted:This does not work;
wrapper.emitted()
is empty. If I replace the<masked-input>
with a regular<input>
element (without the mask, obviously), my test works as expected andwrapper.emitted()
contains the expected event.What am I doing wrong here?