Как проверить, генерирует ли компонент событие в Vue? - PullRequest
Новая
       68

Как проверить, генерирует ли компонент событие в Vue?

1 голос
/ 06 февраля 2020

У меня есть два компонента. Дочерний компонент генерирует событие 'input', когда его значение изменяется, и родительский компонент принимает это значение с помощью v-модели. Я тестирую ChildComponent. Мне нужно написать тест с Vue -test-utils, чтобы убедиться, что он работает.

ParentComponent. vue: 

<template>
 <div>
  <child-component v-model="search"></child-component>
  <other-component></other-component>
  ...
 </div>
</template>

ChildComponent. vue: 

<template>
  <input :value="value" @change="notifyChange($event.target.value)"></input>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'

  @Component
  export default class ChildComponent extends Vue {

    @Prop({ default: '' }) readonly value!: string

    notifyChange(value: string) {
      this.$emit('input', value)
    }

  }
</script>

child-component.spe c .ts: 

describe('ChildComponent', () => {
   let wrapper: any
   before(() => {
   wrapper = VueTestUtils.shallowMount(ChildComponent, {})
  })

   it(`Should emit 'input' event when value change`, () => {
    const rootWrapper = VueTestUtils.shallowMount(ParentComponent)
    wrapper.vm.value = 'Value'
    wrapper.findAll('input').at(0).trigger('change')
    assert.isTrue(!!rootWrapper.vm.search)
  })
})

Я не написал точно такой же код, но logi c похож на это. Мои компоненты работают правильно. 'child-component.spe c .ts' не работает. Мне нужно написать тест для этого.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

в вашем родительском компоненте слушайте испущенное событие "input" 

<template>
 <div>
  <child-component @input="get_input_value" v-model="search"></child-component>
  <other-component></other-component>
  ...
 </div>
</template>

и в вашем скрипте добавьте метод get_input_value () 

<script>
...
methods:
get_input_value(value){
console.log(value)
}
</script>
0 голосов
/ 06 февраля 2020

Вот пример, который вам поможет: Дочерний компонент. vue

<template>
  <div>
    <h2>{{ numbers }}</h2>
    <input v-model="number" type="number" />
    <button @click="$emit('number-added', Number(number))">
     Add new number
    </button>
  </div>
</template>

<script>
export default {
  name: "ChildComponent",
  props: {
    numbers: Array
  },
  data() {
    return {
      number: 0
    };
  }
};
</script>

Родительский компонент. vue

<template>
  <div>
    <ChildComponent
      :numbers="numbers"
      @number-added="numbers.push($event)"
    />
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent";
export default {
  name: "ParentComponent",
  data() {
    return {
      numbers: [1, 2, 3]
    };
  },
  components: {
    ChildComponent
  }
};
</script>

Следуйте этой статье: https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87

Надеюсь, это поможет вам.

...