From 16f389698e5a4420ede187db795994c112f15976 Mon Sep 17 00:00:00 2001
From: Alexander Burdiss <aburdiss@icloud.com>
Date: Tue, 24 Dec 2024 08:28:18 -0500
Subject: [PATCH] docs: Add TypeScript Examples to vue-testing-library

---
 docs/vue-testing-library/examples.mdx | 114 ++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)

diff --git a/docs/vue-testing-library/examples.mdx b/docs/vue-testing-library/examples.mdx
index 8fc574328..e52eba3bc 100644
--- a/docs/vue-testing-library/examples.mdx
+++ b/docs/vue-testing-library/examples.mdx
@@ -3,8 +3,16 @@ id: examples
 title: Example
 ---
 
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
 ## Basic example
 
+<Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'JavaScript',
+  value: 'js'}, {label: 'TypeScript', value: 'ts'}, ]}>
+
+  <TabItem value="js">
+
 ```html
 <template>
   <div>
@@ -50,8 +58,66 @@ test('increments value on click', async () => {
 })
 ```
 
+  </TabItem>
+
+  <TabItem value="ts">
+
+```html
+<template>
+  <div>
+    <p>Times clicked: {{ count }}</p>
+    <button @click="increment">increment</button>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    data: (): {count: number} => ({
+      count: 0,
+    }),
+
+    methods: {
+      increment(): void {
+        this.count++
+      },
+    },
+  }
+</script>
+```
+
+```ts
+import {render, fireEvent, screen} from '@testing-library/vue'
+import Component from './Component.vue'
+
+test('increments value on click', async () => {
+  render(Component)
+
+  // screen has all queries that you can use in your tests.
+  // getByText returns the first matching node for the provided text, and
+  // throws an error if no elements match or if more than one match is found.
+  screen.getByText('Times clicked: 0')
+
+  const button = screen.getByText('increment')
+
+  // Dispatch a native click event to our button element.
+  await fireEvent.click(button)
+  await fireEvent.click(button)
+
+  screen.getByText('Times clicked: 2')
+})
+```
+
+  </TabItem>
+
+  </Tabs>
+
 ## Example using `v-model`:
 
+<Tabs groupId="test-utils" defaultValue="js" values={[ {label: 'JavaScript',
+  value: 'js'}, {label: 'TypeScript', value: 'ts'}, ]}>
+
+  <TabItem value="js">
+
 ```html
 <template>
   <div>
@@ -92,6 +158,54 @@ test('properly handles v-model', async () => {
 })
 ```
 
+</TabItem>
+
+  <TabItem value="ts">
+
+```html
+<template>
+  <div>
+    <p>Hi, my name is {{ user }}</p>
+
+    <label for="username">Username:</label>
+    <input v-model="user" id="username" name="username" />
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    data: (): {user: string} => ({
+      user: 'Alice',
+    }),
+  }
+</script>
+```
+
+```ts
+import {render, fireEvent, screen} from '@testing-library/vue'
+import Component from './Component.vue'
+
+test('properly handles v-model', async () => {
+  render(Component)
+
+  // Asserts initial state.
+  screen.getByText('Hi, my name is Alice')
+
+  // Get the input DOM node by querying the associated label.
+  const usernameInput = screen.getByLabelText(/username/i)
+
+  // Updates the <input> value and triggers an `input` event.
+  // fireEvent.input() would make the test fail.
+  await fireEvent.update(usernameInput, 'Bob')
+
+  screen.getByText('Hi, my name is Bob')
+})
+```
+
+  </TabItem>
+
+  </Tabs>
+
 ## More examples
 
 You'll find examples of testing with different libraries in