docs: updated example TodoApp to script setup (#2727)

Author: hdJerry

examples/TodoApp.spec.js

@@ -0,0 +1,38 @@
+/**
+ * This is the example app used in the documentation.
+ * If you want to run it, you will need to build the final bundle with
+ * pnpm build. Then you can run this with `pnpm test examples`
+ */
+import { mount } from '../dist/vue-test-utils.cjs.js'
+import { expect, describe, it } from 'vitest'
+
+import TodoApp from './TodoApp.vue'
+
+describe('Todo App', () => {
+  it('renders a todo', () => {
+    const wrapper = mount(TodoApp)
+
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
+    expect(wrapper.find('[data-test="todo"]').text()).toBe('Learn Vue.js 3')
+  })
+
+  it('creates a todo', async () => {
+    const wrapper = mount(TodoApp)
+
+    await wrapper.find('[data-test="new-todo"]').setValue('New todo')
+    await wrapper.find('[data-test="form"]').trigger('submit')
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+  })
+
+  it('completes a todo', async () => {
+    const wrapper = mount(TodoApp)
+
+    expect(wrapper.find('[data-test="todo"]').classes()).not.toContain(
+      'completed'
+    )
+
+    await wrapper.find('[data-test="todo-checkbox"]').setChecked()
+
+    expect(wrapper.find('[data-test="todo"]').classes()).toContain('completed')
+  })
+})

examples/TodoApp.spec.ts

@@ -4,7 +4,7 @@
       v-for="todo in todos"
       :key="todo.id"
       data-test="todo"
-      :class="[todo.completed ? 'completed' : '']"
+      :class="{ completed: todo.completed }"
     >
       {{ todo.text }}
       <input
@@ -20,33 +20,29 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import { ref } from 'vue'
 
-export default defineComponent({
-  name: 'TodoApp',
+interface TODO {
+  id: number
+  text: string
+  completed: boolean
+}
 
-  data() {
-    return {
-      newTodo: '',
-      todos: [
-        {
-          id: 1,
-          text: 'Learn Vue.js 3',
-          completed: false
-        }
-      ]
-    }
-  },
-
-  methods: {
-    createTodo() {
-      this.todos.push({
-        id: 2,
-        text: this.newTodo,
-        completed: false
-      })
-    }
+const newTodo = ref<string>('')
+const todos = ref<TODO[]>([
+  {
+    id: 1,
+    text: 'Learn Vue.js 3',
+    completed: false
   }
-})
+])
+
+const createTodo = () => {
+  todos.value.push({
+    id: 2,
+    text: newTodo.value,
+    completed: false
+  })
+}
 </script>