From b6bb20aeab471e5dd71e86a756b3cda20bee3cc5 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Sat, 4 May 2024 01:59:29 +0200
Subject: [PATCH] docs(ct): multi framework typical example

---
 docs/src/test-components-js.md | 97 +++++++++++++++++++++++++++++++++-
 1 file changed, 95 insertions(+), 2 deletions(-)

diff --git a/docs/src/test-components-js.md b/docs/src/test-components-js.md
index 2d9d115bd6..b5a0d3bedb 100644
--- a/docs/src/test-components-js.md
+++ b/docs/src/test-components-js.md
@@ -18,13 +18,24 @@ Playwright Test can now test your components.
 
 Here is what a typical component test looks like:
 
+<Tabs
+  defaultValue="react"
+  values={[
+    {label: 'React', value: 'react'},
+    {label: 'Solid', value: 'solid'},
+    {label: 'Svelte', value: 'svelte'},
+    {label: 'Vue', value: 'vue'},
+  ]
+}>
+<TabItem value="react">
+
 ```js
-test('event should work', async ({ mount }) => {
+test('trigger event upon button click', async ({ mount }) => {
   let clicked = false;
 
   // Mount a component. Returns locator pointing to the component.
   const component = await mount(
-    <Button title="Submit" onClick={() => { clicked = true }}></Button>
+    <Button title="Submit" onClick={() => { clicked = true }} />
   );
 
   // As with any Playwright test, assert locator text.
@@ -38,6 +49,88 @@ test('event should work', async ({ mount }) => {
 });
 ```
 
+</TabItem>
+
+<TabItem value="solid">
+
+```js
+test('trigger event upon button click', async ({ mount }) => {
+  let clicked = false;
+
+  // Mount a component. Returns locator pointing to the component.
+  const component = await mount(
+    <Button title="Submit" onClick={() => { clicked = true }} />
+  );
+
+  // As with any Playwright test, assert locator text.
+  await expect(component).toContainText('Submit');
+
+  // Perform locator click. This will trigger the event.
+  await component.click();
+
+  // Assert that respective events have been fired.
+  expect(clicked).toBeTruthy();
+});
+```
+
+</TabItem>
+
+<TabItem value="svelte">
+
+```js
+test('trigger event upon button click', async ({ mount }) => {
+  let clicked = false;
+
+  // Mount a component. Returns locator pointing to the component.
+  const component = await mount(Button, {
+    props: { title: 'Submit' },
+    on: {
+      onClick() { clicked = true }
+    }
+  });
+
+  // As with any Playwright test, assert locator text.
+  await expect(component).toContainText('Submit');
+
+  // Perform locator click. This will trigger the event.
+  await component.click();
+
+  // Assert that respective events have been fired.
+  expect(clicked).toBeTruthy();
+});
+```
+
+</TabItem>
+
+<TabItem value="vue">
+
+```js
+test('trigger event upon button click', async ({ mount }) => {
+  let clicked = false;
+
+  // Mount a component. Returns locator pointing to the component.
+  const component = await mount(Button, {
+    props: { title: 'Submit' },
+    on: {
+      onClick() { clicked = true }
+    }
+  });
+
+  // As with any Playwright test, assert locator text.
+  await expect(component).toContainText('Submit');
+
+  // Perform locator click. This will trigger the event.
+  await component.click();
+
+  // Assert that respective events have been fired.
+  expect(clicked).toBeTruthy();
+});
+```
+
+</TabItem>
+
+</Tabs>
+
 ## How to get started
 
 Adding Playwright Test to an existing project is easy. Below are the steps to enable Playwright Test for a React, Vue, Svelte or Solid project.