1
votes

Comment tester si un composant émet un événement dans Vue?

J'ai deux composants. Le composant enfant émet un événement 'input' lorsque sa valeur est modifiée et que le composant parent prend cette valeur avec v-model. Je teste ChildComponent. J'ai besoin d'écrire un test avec Vue-test-utils pour vérifier que cela fonctionne.

ParentComponent.vue:

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)
  })
})

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.spec.ts:

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

Je n'ai pas écrit exactement le même code mais la logique est la suivante. Mes composants fonctionnent correctement. 'child-component.spec.ts' ne fonctionne pas. J'ai besoin d'écrire un test pour cela.

javascript vue.js chai mocha.js vue-test-utils

0 commentaires

3 Réponses :

0
votes

Voici un exemple qui vous aidera: Child Component.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>

Parent Component.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>

Suivez cet article: https://medium.com/fullstackio/managing-state-in-vue-js-23a0352b1c87 p >

J'espère que cela vous aidera.

1 commentaires

Merci pour votre réponse mais mes composants fonctionnent également correctement. Le problème est que je ne peux pas écrire un test pour vérifier.

0
votes

dans votre composant parent, écoutez l'événement émis "input"

<script>
...
methods:
get_input_value(value){
console.log(value)
}
</script>

et dans votre script, ajoutez la méthode get_input_value ()

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

p >

1 commentaires

Comment écrire un test pour vérifier que le composant enfant émet réellement cet événement?

1
votes

TESTÉ. C'est un moyen simple de tester une émission, si quelqu'un le cherche. dans votre test décrivez, écrivez ceci.

methods: {
    closeModal() {
      this.$emit('input', !this.value)
    }
  }

ma vue comp

 props: {
    value: {
      type: Boolean,
      default: false
    },

mes accessoires dans vue comp

<div v-if="closeButton == true">
      <button
        @click="closeModal()"
      >
      ...
      </button>
</div>

0 commentaires