在 Vue Test Utils 中模拟退格键

Question

我在 VueJS 中编写了一个独立的可重用组件，它本质上只是一个输入字段的包装器，但它会根据传递给它的道具对键盘输入进行智能实时处理。

它工作起来非常棒，我能够通过 Vue Test Utils（Mocha 风格）成功测试它的大部分功能，但我也在尝试测试它正确响应特殊键（箭头、退格键、制表符等）并遇到问题。

这是组件本身的编辑版本：

<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);
});

上面引用的两种方法都不起作用。此时我怀疑这可能不是调用错误方法的简单问题，我要么：

误解了 Vue Test Utils 中的 DOM（有效地将其视为 PhantomJS）；或
在这个案例中完全使用了错误的测试方法。

如有任何帮助，我们将不胜感激！谢谢

Answer 1

在 <input> 上本地模拟 BACKSPACE（在浏览器中的 Vue 之外）实际上并没有删除文本，所以我看不到它与 Vue 一起工作。我找到的解决方案只是检查 keydown 事件的退格键，并以编程方式从输入文本 [2] 中删除一个字符。所以，我想说这不是可以有效地进行单元测试的东西。

请注意 vue-test-utils uses JSDom (not PhantomJS)。

在 Vue Test Utils 中模拟退格键

Simulate backspace in Vue Test Utils

unit-testing

mocha.js

vue.js

vue-test-utils