wip: demo app for docs

Author: lmiller1990

examples/TodoApp.spec.js

@@ -8,3 +8,12 @@ test('renders a todo', () => {
   expect(wrapper.find('[data-test="todo"]').text()).toBe('Learn Vue.js 3')
 })
 
+test('creates a todo', async () => {
+  const wrapper = mount(TodoApp)
+
+  wrapper.find('[data-test="new-todo"]').element.value = 'New todo'
+  await wrapper.find('[data-test="form"]').trigger('submit')
+
+  expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+})
+

examples/TodoApp.vue

@@ -3,6 +3,10 @@
     <div v-for="todo in todos" :key="todo.id" data-test="todo">
       {{ todo.text }}
     </div>
+
+    <form data-test="form" @submit.prevent="createTodo">
+      <input data-test="new-todo" v-model="newTodo" />
+    </form>
   </div>
 </template>
 
@@ -12,6 +16,7 @@ export default {
 
   data() {
     return {
+      newTodo: '',
       todos: [
         {
           id: 1,
@@ -20,6 +25,16 @@ export default {
         }
       ]
     }
+  },
+
+  methods: {
+    createTodo() {
+      this.todos.push({
+        id: 2,
+        text: this.newTodo,
+        completed: false
+      })
+    }
   }
 }
 </script>