如何强制输入到Vue管理的输入字段进行测试？

Question

我要测试正在监视的输入字段接收到输入后，Vue组件是否正确解析并保存了数据。

该组件如下所示：

<template>
<div>
   <form>
     <div :key="key" v-for="key in contexts" class="row">
        <div class="input-field">
          <input v-model="saved_contexts[key]" placeholder="" :id="key" type="text">
          <label :for="key">{{key}}</label>
        </div>
    </div>
   </form>
</div>
</template>
<script>
  export default {
    data(){
      return {saved_contexts: {}}
    }
  },
</script>

我遗漏了填充“上下文”数组的代码，请假定它在那里并且可以正常工作。

我想编写一个测试来证明输入字段的输入将导致saved_contexts对象正确更新（正确的键名已使用正确的值更新）。

我只是尝试

const input = vm.$el.querySelector('#test'); input.text = 'hello';

但正在Attempted to assign to readonly property. 错误。

我正在探索调度输入事件，但无法弄清楚如何将包含的文本实际放入输入字段中。

Answer 1

这应该是您要寻找的：

<template>
  <div>
    <form>
      <div v-for="key in contexts" :key="key" class="row">
        <div class="input-field">
          <input v-model="saved_contexts[key]"
                 :id="key"
                 @change="logInput(key, saved_contexts[key])"
                 placeholder=""
                 type="text">
          <label>{{key}}</label>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        contexts: [
          'one',
          'two',
          'three',
        ],
        saved_contexts: {},
      };
    },
    methods: {
      logInput(key, input) {
        console.log(`saved_contexts's key: '${key}', updated with input: '${input}'`);
        console.log(this.saved_contexts[key] === input);
        console.log(this.saved_contexts);
      },
    },
  };
</script>

Vue在直接操作DOM时会遇到一些问题，但是这里有一个日志记录功能，该功能可以验证输入是否已保存到save_contexts。