Tester v-model

Lors de l'écriture de composants qui dépendent de l'interaction v-model (évènement update:modelValue), vous devez gérer l'event et les props.

Vous pouvez jeter un œil sur la discussion intégration de v-model pour des solutions apportées par la communauté.

Vous pouvez aussi regarder la documentation v-model VueJS.

Un Exemple Simple

Ci-dessous un composant simple Editor :

const Editor = {  props: {  label: String,  modelValue: String,  },  emits: ['update:modelValue'],  template: `<div>  <label>{{label}}</label>  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">  </div>`, };

Ce composant se comportera comme un composant input :

const App = {  components: {  Editor,  },  template: `<editor v-model="text" label="test" />`,  data(){  return {  text: 'test',  };  }, };

Maintenant que nous avons typé notre input, il modifiera la propriété texte dans notre composant.

Pour tester ce comportement :

test('modelValue est modifié', async () => {  const wrapper = mount(Editor, {  props: {  modelValue: 'Texte initial',  'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),  },  });   await wrapper.find('input').setValue('test');  expect(wrapper.props('modelValue')).toBe('test'); });

Plusieurs v-model

Dans certaines situations, nous pouvons avoir plusieurs v-model ciblant des propriétés spécifiques.

Par exemple, dans un éditeur de transactions financières, nous pouvons avoir des propriétés currency et modelValue.

const MoneyEditor = {  template: `<div>   <input :value="currency" @input="$emit('update:currency', $event.target.value)"/>  <input :value="modelValue" type="number" @input="$emit('update:modelValue', $event.target.value)"/>  </div>`,  props: ['currency', 'modelValue'],  emits: ['update:currency', 'update:modelValue'], };

Nous pouvons tester les deux comme ceci :

test('modelValue et currency sont modifiés', async () => {  const wrapper = mount(MoneyEditor, {  props: {  modelValue: 'Texte inital',  'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),  currency: '€',  'onUpdate:currency': (e) => wrapper.setProps({ currency: e }),  },  });   const [currencyInput, modelValueInput] = wrapper.findAll('input');  await modelValueInput.setValue('test');  await currencyInput.setValue('£');   expect(wrapper.props('modelValue')).toBe('test');  expect(wrapper.props('currency')).toBe('£'); });