Пользовательское событие не вызывается - PullRequest
Новая
       28

Пользовательское событие не вызывается

0 голосов
/ 18 апреля 2019

Я пишу модульный тест для компонента vueJS с использованием утилит Jest и vue test, моя проблема заключается в следующем

У меня есть компонент ввода, где он запускает пользовательское событие для двухсторонней привязки данных. Значение проп элемента ввода. но когда я пытаюсь установить реквизит данных в моем тестовом примере через wrapper.setData ({value: x}), чтобы проверить, запускается ли пользовательское событие через wrapper.emitted (), но, похоже, этого не произошло wrapper.emitted () всегда возвращает пустой объект !!

Компонент 

<template>
  <input v-model="value" 
    :type="type"
    :id="id"
    :class="className"
    :maxlength="maxlength"
    :minlength="minlength"
    :pattern="pattern"
    :placeholder="placeholder"
    @input="handleInput"
  />
</template>
<script>
export default { 
    name   : "inputText",
    props  : {
        maxlength: {
            type      : Number,
            // lock it to 100 chars 
            validator : (maxlength) => {
                return maxlength < 100 ? maxlength : 100
            }
        },
        minlength: {
            type: Number 
        },
        // regex pattern can be supplied to match
        pattern: {
            type: String
        },
        placeholder: {
            type    : String,
            default : "Type it hard"
        },
        type: {
            type      : String,
            required  : true,
            validator : (type) => {
                return [ "text","tel","password","email","url" ].indexOf(type) !== -1
            }
        }
    },
    methods: {
        handleInput (e) {
            this.$emit("text-input" , e.target.value )
        }
    },
    data: function() {
        return {
            value: "initial"
        }
    }
}
</script>

Контрольный пример 

import { mount } from "@vue/test-utils"
import  InputText  from "../InputText.vue"


describe("InputText Component" , () => {
    const wrapper = mount(InputText , {
        propsData: { maxlength: 10, type: "text" }
    })

    it("component should have a type" , () => {
        expect(wrapper.props()).toHaveProperty("type")
    })
    it("component type should be of text siblings" , () => {
        expect(wrapper.vm.$options.props.type.validator(wrapper.props("type"))).toBe(true)
    })
    it("component renders an input element" , () => {
        expect(wrapper.html()).toContain("input")
    })
    it("component handles new input value" , () => {
        const inputVal = "koko"
        wrapper.setData({ value: inputVal })
        expect(wrapper.vm.$data.value).toBe(inputVal)
        console.log(wrapper)

    })
})

1 Ответ

0 голосов
/ 19 апреля 2019

Причина в том, что метод setData не обновляет компонент, связанный с v-моделью. Вы должны использовать setValue для проверки этого поведения.

...