2

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

它就像一个魅力，我能够通过 Vue Test Utils（摩卡风味）成功测试它的大部分功能，但我也在尝试测试它是否正确响应特殊键（箭头、退格、制表符等.) 并被难住了。

这是组件本身的一个经过编辑的版本：

<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. 误解了 Vue Test Utils 中的 DOM（有效地将其视为 PhantomJS）；或者
  2. 在这种情况下完全使用错误的测试方法。

任何帮助将不胜感激！谢谢。

4

1 回答 1

2

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

请注意，vue-test-utils使用 JSDom (not PhantomJS)。

于 2018-09-12T20:34:39.767 回答