Имитация возврата в Vue Test Utils

Question

Я написал автономный компонент многократного использования в VueJS, который, по сути, является просто оболочкой для поля ввода, но выполняет интеллектуальную обработку ввода с клавиатуры в режиме реального времени на основе переданных ему реквизитов.

Он работает как шарм, и я могу успешно протестировать большую часть его функциональных возможностей с помощью Vue Test Utils (Mocha flavour), но я также пытаюсь проверить, правильно ли он реагирует на специальные клавиши (стрелки, backspace, tab и т. Д.)..) и получить в тупик.

Вот отредактированная версия самого компонента:

<template>
    <input type="text" v-model="internalValue" :placeholder="placeholder"
       @keydown="keyDownHandler"/>
</template>
<script>
    export default {
        name: "LimitedTextArea",
        props: {
            fieldname: '',
            value: { type: String, default: ""},
            placeholder: 'placeholder',
            ...
        },
        data: function() {
            return {
                internalValue: ''
            }
        },
        watch: {
            internalValue(newVal /*, oldVal*/ ) {
                this.$emit("input", this.fieldname, newVal);
            }
        },
        mounted: function() {
            ...
        },
        methods: {
            keyDownHandler(evt) {
                this.internalValue = this.value;
                if (!evt.metaKey && evt.keyCode >= 45) {
                    evt.preventDefault();
                    const inputChar = evt.key;
                    let newChar = '';
                    /* filtering logic here */
                    this.internalValue += newChar;
                } else {
                    // just for tracing this path during dev
                    console.log('will execute default action');
                }
            }
        }
    }
</script>

... и вот тест:

it('embedded: delete key functions normally', () => {
    const initialValue = '';
    const inputValue = 'omega';
    const outputValue = 'omeg';
    const deleteKeyEvent = {key: 'Backspace', keyCode: 8};
    const parent = mount({
        data: function() { return {
            textValue: initialValue
        }},
        template: \`<div>
           <limited-text-area :fieldname="'textValue'" :value="textValue" 
           @input="input"></limited-text-area>
        </div>`,
        components: { 'limited-text-area': LimitedTextArea },
        methods: {
            input(fieldname, value) {
                this[fieldname] = value;
            }
        }
    });
    const input = parent.find('input');
    typeStringIntoField(inputValue, input);

    // I've tried with and without this before sending the key event…
    input.element.focus();
    input.element.setSelectionRange(inputValue.length, inputValue.length);

    // I've tried doing it this way
    input.trigger('keydown', deleteKeyEvent);

    // And I've tried doing it this way, based on the Vue Test Utils guide 
    // for keyboard events
    input.trigger('keydown.up.backspace');
    expect(parent.vm.textValue).to.equal(outputValue);
});

Ни один из двух указанных выше подходов не работает. На данный момент я подозреваю, что это может быть не простой вопрос вызова неправильного метода, и что я тоже:

1. недопонимание DOM в Vue Test Utils (фактически рассматривая его как PhantomJS); или же
2. используя неправильную методологию тестирования полностью для этого случая.

Любая помощь будет принята с благодарностью! Благодарю.

Answer 1

Имитирующий BACKSPACE на <input> изначально (за пределами Vue в браузере) фактически не удаляет текст, поэтому я не вижу его работы с Vue. Решения, которые я нашел, просто проверяют событие keydown на backspace и программно удаляют символ из текста ввода [1] [2]. Итак, я бы сказал, что это не то, что может быть эффективно проверено модулем.

Обратите внимание, что vue-test-utils использует JSDom (не PhantomJS).