From 53996e247dccd11db06fadf2765497ca429bbe42 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Fri, 6 Sep 2024 20:13:54 +0200
Subject: [PATCH] docs(ct): resolve feedback

---
 docs/src/test-components-js.md | 42 +++++++++-------------------------
 1 file changed, 11 insertions(+), 31 deletions(-)

diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md
index 0d8aad2fd1..91d1860a26 100644
--- a/docs/src/test-components-js.md
+++ b/docs/src/test-components-js.md
@@ -359,6 +359,7 @@ test('props', async ({ mount }) => {
 ```
 
 ```js title="component.spec.tsx"
+// Or alternatively, using the `jsx` style
 import { test } from '@playwright/experimental-ct-vue';
 
 test('props', async ({ mount }) => {
@@ -412,7 +413,7 @@ test('callback', async ({ mount }) => {
 import { test } from '@playwright/experimental-ct-svelte';
 
 test('event', async ({ mount }) => {
-  const component = await mount(Component, { on: { onClick() {} } });
+  const component = await mount(Component, { on: { click() {} } });
 });
 ```
 
@@ -423,15 +424,16 @@ test('event', async ({ mount }) => {
 import { test } from '@playwright/experimental-ct-vue';
 
 test('event', async ({ mount }) => {
-  const component = await mount(Component, { on: { onClick() {} } });
+  const component = await mount(Component, { on: { click() {} } });
 });
 ```
 
 ```js title="component.spec.tsx"
+// Or alternatively, using the `jsx` style
 import { test } from '@playwright/experimental-ct-vue';
 
 test('event', async ({ mount }) => {
-  const component = await mount(<Component v-on:onClick={() => {}} />);
+  const component = await mount(<Component v-on:click={() => {}} />);
 });
 ```
 
@@ -497,6 +499,7 @@ test('slot', async ({ mount }) => {
 ```
 
 ```js title="component.spec.tsx"
+// Or alternatively, using the `jsx` style
 import { test } from '@playwright/experimental-ct-vue';
 
 test('children', async ({ mount }) => {
@@ -611,18 +614,6 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
     await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
   });
   ```
-  ```js title="src/pages/ProductsPage.spec.tsx"
-  import { test, expect } from '@playwright/experimental-ct-vue';
-  import type { HooksConfig } from '../playwright';
-  import ProductsPage from './pages/ProductsPage.vue';
-
-  test('configure routing through hooks config', async ({ page, mount }) => {
-    const component = await mount<HooksConfig>(<ProductsPage />, {
-      hooksConfig: { enableRouting: true },
-    });
-    await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
-  });
-  ```
 
   </TabItem>
 
@@ -658,19 +649,6 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
   });
   ```
 
-  ```js title="src/pages/ProductsPage.spec.tsx"
-  import { test, expect } from '@playwright/experimental-ct-vue2';
-  import type { HooksConfig } from '../playwright';
-  import ProductsPage from './pages/ProductsPage.vue';
-
-  test('configure routing through hooks config', async ({ page, mount }) => {
-    const component = await mount<HooksConfig>(<ProductsPage />, {
-      hooksConfig: { enableRouting: true },
-    });
-    await expect(component.getByRole('link')).toHaveAttribute('href', '/products/42');
-  });
-  ```
-
   </TabItem>
 
 </Tabs>
@@ -737,6 +715,7 @@ test('unmount', async ({ mount }) => {
 ```
 
 ```js title="component.spec.tsx"
+// Or alternatively, using the `jsx` style
 import { test } from '@playwright/experimental-ct-vue';
 
 test('unmount', async ({ mount }) => {
@@ -799,7 +778,7 @@ test('update', async ({ mount }) => {
   const component = await mount(Component);
   await component.update({
     props: { msg: 'greetings' },
-    on: { onClick() {} },
+    on: { click() {} },
     slots: { default: 'Child' }
   });
 });
@@ -815,19 +794,20 @@ test('update', async ({ mount }) => {
   const component = await mount(Component);
   await component.update({
     props: { msg: 'greetings' },
-    on: { onClick() {} },
+    on: { click() {} },
     slots: { default: 'Child' }
   });
 });
 ```
 
 ```js title="component.spec.tsx"
+// Or alternatively, using the `jsx` style
 import { test } from '@playwright/experimental-ct-vue';
 
 test('update', async ({ mount }) => {
   const component = await mount(<Component/>);
   await component.update(
-      <Component msg="greetings" v-on:onClick={() => {}}>Child</Component>
+      <Component msg="greetings" v-on:click={() => {}}>Child</Component>
   );
 });
 ```