Vue.js 2 Design Patterns and Best Practices

Click events

Great! Our method works, but that's not how our user will be interacting with the application. Let's see whether we can make our tests take into account a user input form and subsequent button:

<form @submit.prevent="addTodo(todoName)">  <input type="text" v-model="todoName">  <button type="submit">Submit</button></form>

We can also make a small change to our addTodo function, ensuring that this.todos is given the value of the new todo items:

addTodo(name) { this.todos = [...this.todos, { id: uuid(), name }]; return this.todos;},

The great thing is that by making this change, we can check against all of our previous use cases and see that nothing fails! Hurray for automated testing!

Next, let's make an it block that we can use ...