커스텀 입력 Vue 컴포넌트를 테스트하는 방법

커스텀 입력 Vue 컴포넌트를 테스트하는 방법

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이상적으로는 이 두 가지 조건을 구체적으로 테스트하는 것이 아니라 컴포넌트 내에서 값이 변경되면 모델에서도 값이 변경되는 동작을 테스트하고 싶습니다.

할 수 있습니다.

• Vue 테스트 유틸리티 사용 및
• 를 사용하는 부모 요소 마운트 <currency-input>
• 입력 이벤트를 의 내부 텍스트 필드로 위장합니다.<currency-input>(변혁할 수 있는 가치)13.467에 의해 변환됩니다.<currency-input>로.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최신 정보를 보려면 이 호를 따라가세요.

컴포넌트를 사용하는 부모 요소도 마운트합니다.다음 예시는 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>

언급URL : https://stackoverflow.com/questions/49225316/how-can-i-test-a-custom-input-vue-component