Имитация возврата в Vue Test Utils - PullRequest
Новая
       16

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

0 голосов
/ 11 сентября 2018

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

Этоработает как шарм, и я могу успешно протестировать большую часть его функциональности с помощью Vue Test Utils (Mocha вкус), но я также пытаюсь проверить, что он правильно реагирует на специальные клавиши (стрелки,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. с использованием неправильной методологии тестирования полностью для этого случая.

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

1 Ответ

0 голосов
/ 12 сентября 2018

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

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

...