17

在 Vue.js 文档中，有一个自定义输入组件的示例。我试图弄清楚如何为这样的组件编写单元测试。组件的使用看起来像这样

<currency-input v-model="price"></currency-input>

完整的实现可以在https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events找到

文件说

因此，对于要使用的组件v-model，它应该（这些可以在 2.2.0+ 中配置）：

  • 接受一个价值道具
  • 发出具有新值的输入事件

如何编写单元测试以确保我已编写此组件以便它可以使用v-model？理想情况下，我不想专门测试这两个条件，我想测试当组件内的值发生变化时，它也会在模型中发生变化的行为。

4

2 回答 2

31

你能行的：

  • 使用Vue 测试工具，以及
  • 挂载使用的父元素 <currency-input>
  • <currency-input>使用它转换的值将输入事件伪造到 的内部文本字段（13.467由<currency-input>to转换13.46）
  • 验证父项中的price属性（绑定到v-model）是否已更改。

示例代码（使用 Mocha）：

import { mount } from '@vue/test-utils'
import CurrencyInput from '@/components/CurrencyInput.vue'

describe('CurrencyInput.vue', () => {
  it("changing the element's value, updates the v-model", () => {
    var parent = mount({
      data: { price: null },
      template: '<div> <currency-input v-model="price"></currency-input> </div>',
      components: { 'currency-input': CurrencyInput }
    })

    var currencyInputInnerTextField = parent.find('input');
    currencyInputInnerTextField.element.value = 13.467;
    currencyInputInnerTextField.trigger('input');

    expect(parent.vm.price).toBe(13.46);
  });
});

使用 Jasmine 的浏览器内可运行演示：

var CurrencyInput = Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)">\
    </span>\
  ',
  props: ['value'],
  methods: {
    // Instead of updating the value directly, this
    // method is used to format and place constraints
    // on the input's value
    updateValue: function(value) {
      var formattedValue = value
        // Remove whitespace on either side
        .trim()
        // Shorten to 2 decimal places
        .slice(0, value.indexOf('.') === -1 ? value.length : value.indexOf('.') + 3)
      // If the value was not already normalized,
      // manually override it to conform
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // Emit the number value through the input event
      this.$emit('input', Number(formattedValue))
    }
  }
});



// specs code ///////////////////////////////////////////////////////////
var mount = vueTestUtils.mount;
describe('CurrencyInput', () => {
  it("changing the element's value, updates the v-model", () => {
    var parent = mount({
      data() { return { price: null } },
      template: '<div> <currency-input v-model="price"></currency-input> </div>',
      components: { 'currency-input': CurrencyInput }
    });
    
    var currencyInputInnerTextField = parent.find('input');
    currencyInputInnerTextField.element.value = 13.467;
    currencyInputInnerTextField.trigger('input');

    expect(parent.vm.price).toBe(13.46);
  });
});

// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv()
  env.addReporter(new jasmine.HtmlReporter())
  env.execute()
}())
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css">
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<script src="https://npmcdn.com/vue@2.5.15/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-template-compiler@2.5.15/browser.js"></script>
<script src="https://rawgit.com/vuejs/vue-test-utils/2b078c68293a41d68a0a98393f497d0b0031f41a/dist/vue-test-utils.iife.js"></script>

注意：上面的代码工作正常（如您所见），但v-model很快就会对涉及的测试进行改进。关注此问题以获取最新信息。

于 2018-03-12T03:29:52.160 回答
1

我还将安装一个使用该组件的父元素。下面是一个带有 Jest 和 Vue 测试实用程序的较新示例。查看Vue 文档以获取更多信息。

import { mount } from "@vue/test-utils";
import Input from "Input.vue";

describe('Input.vue', () => {
    test('changing the input element value updates the v-model', async () => {
        const wrapper = mount({
            data() {
                return { name: '' };
            },
            template: '<Input v-model="name" />',
            components: { Input },
        });

        const name = 'Brendan Eich';
        await wrapper.find('input').setValue(name);

        expect(wrapper.vm.$data.name).toBe(name);
    });

    test('changing the v-model updates the input element value', async () => {
        const wrapper = mount({
            data() {
                return { name: '' };
            },
            template: '<Input v-model="name" />',
            components: { Input },
        });

        const name = 'Bjarne Stroustrup';
        await wrapper.setData({ name });

        const inputElement = wrapper.find('input').element;
        expect(inputElement.value).toBe(name);
    });
});

Input.vue 组件：

<template>
    <input :value="$attrs.value" @input="$emit('input', $event.target.value)" />
</template>
于 2020-11-13T20:01:04.060 回答