Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do I test the input event? #38

Open
githorse opened this issue Dec 20, 2017 · 0 comments
Open

How do I test the input event? #38

githorse opened this issue Dec 20, 2017 · 0 comments

Comments

@githorse
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant