Vue.js 2 Design Patterns and Best Practices

Testing events

We've made a lot of progress, but wouldn't it be great if we could test events that fire between components? Let's take a look at this by creating a TodoInput, component and abstracting our form away into this component:

<template>  <form @submit.prevent="addTodo(todoName)">    <input type="text" v-model="todoName">    <button type="submit">Submit</button>  </form></template><script>export default {  data() {    return {      todoName: ''    }   },  methods: {    addTodo(name) {      this.$emit('addTodo', name);    }  }}</script>

Now, our addTodo method inside of this component fires an event. Let's test that event within a TodoInput.spec.js file:

import { mount } from 'vue-test-utils';import TodoInput from '../TodoInput';describe('TodoInput.vue', () => {