niksmr / vue-masked-input

Masked input component for Vue.js
https://niksmr.github.io/vue-masked-input/
MIT License
454 stars 93 forks source link

How do I test the input event? #38

Open githorse opened 6 years ago

githorse commented 6 years ago

Don't really think this is a bug, but I could use some help here. I'm writing a very simple PhoneNumberField.vue component:

<template>
    <masked-input
        v-model="number"
        type="tel"
        pattern="\d*"
        mask="(111) 111-1111"
        @input="updateValue()">
    </masked-input>
<template>

<script>
    export defaults {
        props: {
            value: String
        },
        data() {
            return {
                number: this.value || '',
            }
        }, 
        methods: {
            updateValue() {
                this.$emit('input', this.number);
            },
        },   
    }
</script>

I can use my PhoneNumberField like this:

<phone-number-field v-model="mobilePhoneNumber"></phone-number-field>

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.

What am I doing wrong here?