docs(ct): multi framework typical example

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.