From 5d86d6f6625704b6b01efb3174feaaf95ca19e78 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Thu, 12 Jan 2023 19:43:47 +0100
Subject: [PATCH] test(ct): vue cli slice by feature (#20083)

---
 .../ct-vue-cli/playwright.config.ts           |  10 +-
 .../ct-vue-cli/src/notation-jsx.spec.tsx      | 133 -----------------
 .../ct-vue-cli/src/notation-vue.spec.ts       | 139 ------------------
 .../ct-vue-cli/tests/events/events.spec.ts    |  16 ++
 .../ct-vue-cli/tests/events/events.spec.tsx   |  28 ++++
 .../ct-vue-cli/tests/render/render.spec.ts    |  25 ++++
 .../ct-vue-cli/tests/render/render.spec.tsx   |  15 ++
 .../ct-vue-cli/tests/slots/slots.spec.ts      |  35 +++++
 .../ct-vue-cli/tests/slots/slots.spec.tsx     |  42 ++++++
 .../ct-vue-cli/tests/unmount/unmount.spec.ts  |  23 +++
 .../ct-vue-cli/tests/unmount/unmount.spec.tsx |  19 +++
 .../ct-vue-cli/tests/update/update.spec.ts    |  19 +++
 .../ct-vue-cli/tests/update/update.spec.tsx   |  15 ++
 .../tests/vue-router/vue-router.spec.ts       |  14 ++
 .../tests/vue-router/vue-router.spec.tsx      |  14 ++
 .../components/ct-vue-cli/tsconfig.test.json  |   2 +-
 16 files changed, 275 insertions(+), 274 deletions(-)
 delete mode 100644 tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
 delete mode 100644 tests/components/ct-vue-cli/src/notation-vue.spec.ts
 create mode 100644 tests/components/ct-vue-cli/tests/events/events.spec.ts
 create mode 100644 tests/components/ct-vue-cli/tests/events/events.spec.tsx
 create mode 100644 tests/components/ct-vue-cli/tests/render/render.spec.ts
 create mode 100644 tests/components/ct-vue-cli/tests/render/render.spec.tsx
 create mode 100644 tests/components/ct-vue-cli/tests/slots/slots.spec.ts
 create mode 100644 tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
 create mode 100644 tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts
 create mode 100644 tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx
 create mode 100644 tests/components/ct-vue-cli/tests/update/update.spec.ts
 create mode 100644 tests/components/ct-vue-cli/tests/update/update.spec.tsx
 create mode 100644 tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts
 create mode 100644 tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx

diff --git a/tests/components/ct-vue-cli/playwright.config.ts b/tests/components/ct-vue-cli/playwright.config.ts
index dbf9c593bd..a60d9697c5 100644
--- a/tests/components/ct-vue-cli/playwright.config.ts
+++ b/tests/components/ct-vue-cli/playwright.config.ts
@@ -15,14 +15,22 @@
  */
 
 import { type PlaywrightTestConfig, devices } from '@playwright/experimental-ct-vue';
+import { resolve } from 'path';
 
 const config: PlaywrightTestConfig = {
-  testDir: 'src',
+  testDir: 'tests',
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   reporter: 'html',
   use: {
     trace: 'on-first-retry',
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src'),
+        }
+      }
+    }
   },
   projects: [
     {
diff --git a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
deleted file mode 100644
index f9315a1954..0000000000
--- a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-vue'
-import App from './App.vue';
-import Button from './components/Button.vue'
-import Counter from './components/Counter.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-import MultiRoot from './components/MultiRoot.vue'
-import EmptyTemplate from './components/EmptyTemplate.vue'
-import type { HooksConfig } from '../playwright'
-
-test.use({ viewport: { width: 500, height: 500 } })
-
-test('render props', async ({ mount }) => {
-  const component = await mount(<Button title="Submit" />)
-  await expect(component).toContainText('Submit')
-})
-
-test('renderer and keep the component instance intact', async ({ mount }) => {
-  const component = await mount(<Counter count={9001} />);
-  await expect(component.locator('#rerender-count')).toContainText('9001')
-  
-  await component.update(<Counter count={1337} />)
-  await expect(component.locator('#rerender-count')).toContainText('1337')
-  
-  await component.update(<Counter count={42} />)
-  await expect(component.locator('#rerender-count')).toContainText('42')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages: string[] = []
-  const component = await mount(<Button 
-    title="Submit"
-    v-on:submit={(data: string) => {
-      messages.push(data)
-    }}
-  />)
-  await component.click()
-  expect(messages).toEqual(['hello'])
-})
-
-test('render a default slot', async ({ mount }) => {
-  const component = await mount(<DefaultSlot>
-    Main Content
-  </DefaultSlot>)
-  await expect(component).toContainText('Main Content')
-})
-
-test('render a component as slot', async ({ mount }) => {
-  const component = await mount(<DefaultSlot>
-    <Button title="Submit" />
-  </DefaultSlot>)
-  await expect(component).toContainText('Submit')
-});
-
-test('render a component with multiple children', async ({ mount }) => {
-  const component = await mount(<DefaultSlot>
-    <div id="one">One</div>
-    <div id="two">Two</div>
-  </DefaultSlot>)
-  await expect(component.locator('#one')).toContainText('One')
-  await expect(component.locator('#two')).toContainText('Two')
-})
-
-test('render a component with a named slot', async ({ mount }) => {
-  const component = await mount(<NamedSlots>
-    <template v-slot:header>
-      Header
-    </template>
-    <template v-slot:main>
-      Main Content
-    </template>
-    <template v-slot:footer>
-      Footer
-    </template>
-  </NamedSlots>);
-  await expect(component).toContainText('Header')
-  await expect(component).toContainText('Main Content')
-  await expect(component).toContainText('Footer')
-})
-
-test('emit a event when a slot is clicked', async ({ mount }) => {
-  let clickFired = false;
-  const component = await mount(<DefaultSlot>
-    <span v-on:click={() => clickFired = true}>Main Content</span>
-  </DefaultSlot>);
-  await component.locator('text=Main Content').click();
-  expect(clickFired).toBeTruthy();
-})
-
-test('run hooks', async ({ page, mount }) => {
-  const messages: string[] = []
-  page.on('console', m => messages.push(m.text()))
-  await mount<HooksConfig>(<Button title="Submit" />, {
-    hooksConfig: { route: 'A' }
-  })
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
-})
-
-test('unmount', async ({ page, mount }) => {
-  const component = await mount(<Button title="Submit" />)
-  await expect(page.locator('#root')).toContainText('Submit')
-  await component.unmount();
-  await expect(page.locator('#root')).not.toContainText('Submit');
-})
-
-test('unmount a multi root component', async ({ mount, page }) => {
-  const component = await mount(<MultiRoot />)
-  await expect(page.locator('#root')).toContainText('root 1')
-  await expect(page.locator('#root')).toContainText('root 2')
-  await component.unmount()
-  await expect(page.locator('#root')).not.toContainText('root 1')
-  await expect(page.locator('#root')).not.toContainText('root 2')
-});
-
-test('get textContent of the empty template', async ({ mount }) => {
-  const component = await mount(<EmptyTemplate />);
-  expect(await component.allTextContents()).toEqual(['']);
-  expect(await component.textContent()).toBe('');
-  await expect(component).toHaveText('');
-});
-
-test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
-    hooksConfig: { routing: true }
-  });
-  await expect(component.getByRole('main')).toHaveText('Login');
-  await expect(page).toHaveURL('/');
-  await component.getByRole('link', { name: 'Dashboard' }).click();
-  await expect(component.getByRole('main')).toHaveText('Dashboard');
-  await expect(page).toHaveURL('/dashboard');
-});
diff --git a/tests/components/ct-vue-cli/src/notation-vue.spec.ts b/tests/components/ct-vue-cli/src/notation-vue.spec.ts
deleted file mode 100644
index 9a6c04714c..0000000000
--- a/tests/components/ct-vue-cli/src/notation-vue.spec.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { test, expect } from '@playwright/experimental-ct-vue'
-import App from './App.vue';
-import Button from './components/Button.vue'
-import Counter from './components/Counter.vue'
-import DefaultSlot from './components/DefaultSlot.vue'
-import NamedSlots from './components/NamedSlots.vue'
-import MultiRoot from './components/MultiRoot.vue'
-import Component from './components/Component.vue'
-import EmptyTemplate from './components/EmptyTemplate.vue'
-import type { HooksConfig } from '../playwright'
-
-test.use({ viewport: { width: 500, height: 500 } })
-
-test('render props', async ({ mount }) => {
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    }
-  })
-  await expect(component).toContainText('Submit')
-})
-
-test('renderer and keep the component instance intact', async ({ mount }) => {
-  const component = await mount<{ count: number }>(Counter, {
-    props: {
-      count: 9001
-    }
-  });
-  await expect(component.locator('#rerender-count')).toContainText('9001')
-
-  await component.update({ props: { count: 1337 } })
-  await expect(component.locator('#rerender-count')).toContainText('1337')
-
-  await component.update({ props: { count: 42 } })
-  await expect(component.locator('#rerender-count')).toContainText('42')
-
-  await expect(component.locator('#remount-count')).toContainText('1')
-})
-
-test('emit an submit event when the button is clicked', async ({ mount }) => {
-  const messages: string[] = []
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    },
-    on: {
-      submit: (data: string) => messages.push(data)
-    }
-  })
-  await component.click()
-  expect(messages).toEqual(['hello'])
-})
-
-test('render a default slot', async ({ mount }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: 'Main Content'
-    }
-  })
-  await expect(component).toContainText('Main Content')
-})
-
-test('render a component with multiple slots', async ({ mount }) => {
-  const component = await mount(DefaultSlot, {
-    slots: {
-      default: ['one', 'two']
-    }
-  })
-  await expect(component).toContainText('one')
-  await expect(component).toContainText('two')
-})
-
-test('render a component with a named slot', async ({ mount }) => {
-  const component = await mount(NamedSlots, {
-    slots: {
-      header: 'Header',
-      main: 'Main Content',
-      footer: 'Footer'
-    }
-  })
-  await expect(component).toContainText('Header')
-  await expect(component).toContainText('Main Content')
-  await expect(component).toContainText('Footer')
-})
-
-test('render a component without options', async ({ mount }) => {
-  const component = await mount(Component)
-  await expect(component).toContainText('test')
-})
-
-test('run hooks', async ({ page, mount }) => {
-  const messages: string[] = []
-  page.on('console', m => messages.push(m.text()))
-  await mount<HooksConfig>(Button, {
-    props: {
-      title: 'Submit'
-    },
-    hooksConfig: { route: 'A' }
-  })
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
-})
-
-test('unmount', async ({ page, mount }) => {
-  const component = await mount(Button, {
-    props: {
-      title: 'Submit'
-    }
-  })
-  await expect(page.locator('#root')).toContainText('Submit')
-  await component.unmount();
-  await expect(page.locator('#root')).not.toContainText('Submit');
-});
-
-test('unmount a multi root component', async ({ mount, page }) => {
-  const component = await mount(MultiRoot)
-  await expect(page.locator('#root')).toContainText('root 1')
-  await expect(page.locator('#root')).toContainText('root 2')
-  await component.unmount()
-  await expect(page.locator('#root')).not.toContainText('root 1')
-  await expect(page.locator('#root')).not.toContainText('root 2')
-})
-
-test('get textContent of the empty template', async ({ mount }) => {
-  const component = await mount(EmptyTemplate);
-  expect(await component.allTextContents()).toEqual(['']);
-  expect(await component.textContent()).toBe('');
-  await expect(component).toHaveText('');
-});
-
-test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(App, {
-    hooksConfig: { routing: true }
-  });
-  await expect(component.getByRole('main')).toHaveText('Login');
-  await expect(page).toHaveURL('/');
-  await component.getByRole('link', { name: 'Dashboard' }).click();
-  await expect(component.getByRole('main')).toHaveText('Dashboard');
-  await expect(page).toHaveURL('/dashboard');
-});
diff --git a/tests/components/ct-vue-cli/tests/events/events.spec.ts b/tests/components/ct-vue-cli/tests/events/events.spec.ts
new file mode 100644
index 0000000000..e5a6df440e
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/events/events.spec.ts
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+
+test('emit an submit event when the button is clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      submit: (data: string) => messages.push(data),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+});
diff --git a/tests/components/ct-vue-cli/tests/events/events.spec.tsx b/tests/components/ct-vue-cli/tests/events/events.spec.tsx
new file mode 100644
index 0000000000..2a1ffea851
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/events/events.spec.tsx
@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import DefaultSlot from '@/components/DefaultSlot.vue';
+
+test('emit an submit event when the button is clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(
+    <Button
+      title="Submit"
+      v-on:submit={(data: string) => {
+        messages.push(data);
+      }}
+    />
+  );
+  await component.click();
+  expect(messages).toEqual(['hello']);
+});
+
+test('emit a event when a slot is clicked', async ({ mount }) => {
+  let clickFired = false;
+  const component = await mount(
+    <DefaultSlot>
+      <span v-on:click={() => (clickFired = true)}>Main Content</span>
+    </DefaultSlot>
+  );
+  await component.locator('text=Main Content').click();
+  expect(clickFired).toBeTruthy();
+});
diff --git a/tests/components/ct-vue-cli/tests/render/render.spec.ts b/tests/components/ct-vue-cli/tests/render/render.spec.ts
new file mode 100644
index 0000000000..a76a68d660
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/render/render.spec.ts
@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import Component from '@/components/Component.vue';
+import EmptyTemplate from '@/components/EmptyTemplate.vue';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(component).toContainText('Submit');
+});
+
+test('render a component without options', async ({ mount }) => {
+  const component = await mount(Component);
+  await expect(component).toContainText('test');
+});
+
+test('get textContent of the empty template', async ({ mount }) => {
+  const component = await mount(EmptyTemplate);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});
diff --git a/tests/components/ct-vue-cli/tests/render/render.spec.tsx b/tests/components/ct-vue-cli/tests/render/render.spec.tsx
new file mode 100644
index 0000000000..1fb6964fb3
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/render/render.spec.tsx
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import EmptyTemplate from '@/components/EmptyTemplate.vue';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await expect(component).toContainText('Submit');
+});
+
+test('get textContent of the empty template', async ({ mount }) => {
+  const component = await mount(<EmptyTemplate />);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});
diff --git a/tests/components/ct-vue-cli/tests/slots/slots.spec.ts b/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
new file mode 100644
index 0000000000..4c1e15a299
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/slots/slots.spec.ts
@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import DefaultSlot from '@/components/DefaultSlot.vue';
+import NamedSlots from '@/components/NamedSlots.vue';
+
+test('render a default slot', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: 'Main Content',
+    },
+  });
+  await expect(component).toContainText('Main Content');
+});
+
+test('render a component with multiple slots', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: ['one', 'two'],
+    },
+  });
+  await expect(component).toContainText('one');
+  await expect(component).toContainText('two');
+});
+
+test('render a component with a named slot', async ({ mount }) => {
+  const component = await mount(NamedSlots, {
+    slots: {
+      header: 'Header',
+      main: 'Main Content',
+      footer: 'Footer',
+    },
+  });
+  await expect(component).toContainText('Header');
+  await expect(component).toContainText('Main Content');
+  await expect(component).toContainText('Footer');
+});
diff --git a/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx b/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
new file mode 100644
index 0000000000..584b61ee7e
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import DefaultSlot from '@/components/DefaultSlot.vue';
+import NamedSlots from '@/components/NamedSlots.vue';
+
+test('render a default slot', async ({ mount }) => {
+  const component = await mount(<DefaultSlot>Main Content</DefaultSlot>);
+  await expect(component).toContainText('Main Content');
+});
+
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(
+    <DefaultSlot>
+      <Button title="Submit" />
+    </DefaultSlot>
+  );
+  await expect(component).toContainText('Submit');
+});
+
+test('render a component with multiple children', async ({ mount }) => {
+  const component = await mount(
+    <DefaultSlot>
+      <div id="one">One</div>
+      <div id="two">Two</div>
+    </DefaultSlot>
+  );
+  await expect(component.locator('#one')).toContainText('One');
+  await expect(component.locator('#two')).toContainText('Two');
+});
+
+test('render a component with a named slot', async ({ mount }) => {
+  const component = await mount(
+    <NamedSlots>
+      <template v-slot:header>Header</template>
+      <template v-slot:main>Main Content</template>
+      <template v-slot:footer>Footer</template>
+    </NamedSlots>
+  );
+  await expect(component).toContainText('Header');
+  await expect(component).toContainText('Main Content');
+  await expect(component).toContainText('Footer');
+});
diff --git a/tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts
new file mode 100644
index 0000000000..0077cdfed5
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.ts
@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import MultiRoot from '@/components/MultiRoot.vue';
+
+test('unmount', async ({ page, mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(page.locator('#root')).toContainText('Submit');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component', async ({ mount, page }) => {
+  const component = await mount(MultiRoot);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
+});
diff --git a/tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx
new file mode 100644
index 0000000000..840b4c5158
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/unmount/unmount.spec.tsx
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Button from '@/components/Button.vue';
+import MultiRoot from '@/components/MultiRoot.vue';
+
+test('unmount', async ({ page, mount }) => {
+  const component = await mount(<Button title="Submit" />);
+  await expect(page.locator('#root')).toContainText('Submit');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component', async ({ mount, page }) => {
+  const component = await mount(<MultiRoot />);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
+});
diff --git a/tests/components/ct-vue-cli/tests/update/update.spec.ts b/tests/components/ct-vue-cli/tests/update/update.spec.ts
new file mode 100644
index 0000000000..c5857445b1
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/update/update.spec.ts
@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Counter from '@/components/Counter.vue';
+
+test('renderer and keep the component instance intact', async ({ mount }) => {
+  const component = await mount<{ count: number }>(Counter, {
+    props: {
+      count: 9001,
+    },
+  });
+  await expect(component.locator('#rerender-count')).toContainText('9001');
+
+  await component.update({ props: { count: 1337 } });
+  await expect(component.locator('#rerender-count')).toContainText('1337');
+
+  await component.update({ props: { count: 42 } });
+  await expect(component.locator('#rerender-count')).toContainText('42');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
diff --git a/tests/components/ct-vue-cli/tests/update/update.spec.tsx b/tests/components/ct-vue-cli/tests/update/update.spec.tsx
new file mode 100644
index 0000000000..5d675c6de4
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/update/update.spec.tsx
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import Counter from '@/components/Counter.vue';
+
+test('renderer and keep the component instance intact', async ({ mount }) => {
+  const component = await mount(<Counter count={9001} />);
+  await expect(component.locator('#rerender-count')).toContainText('9001');
+
+  await component.update(<Counter count={1337} />);
+  await expect(component.locator('#rerender-count')).toContainText('1337');
+
+  await component.update(<Counter count={42} />);
+  await expect(component.locator('#rerender-count')).toContainText('42');
+
+  await expect(component.locator('#remount-count')).toContainText('1');
+});
diff --git a/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts
new file mode 100644
index 0000000000..c268b2fbfb
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import App from '@/App.vue';
+import type { HooksConfig } from '../../playwright';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount<HooksConfig>(App, {
+    hooksConfig: { routing: true },
+  });
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});
diff --git a/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx
new file mode 100644
index 0000000000..d5f02daf60
--- /dev/null
+++ b/tests/components/ct-vue-cli/tests/vue-router/vue-router.spec.tsx
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/experimental-ct-vue';
+import App from '@/App.vue';
+import type { HooksConfig } from '../../playwright';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount<HooksConfig>(<App />, {
+    hooksConfig: { routing: true },
+  });
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});
diff --git a/tests/components/ct-vue-cli/tsconfig.test.json b/tests/components/ct-vue-cli/tsconfig.test.json
index 8ca3e2c472..10b8573988 100644
--- a/tests/components/ct-vue-cli/tsconfig.test.json
+++ b/tests/components/ct-vue-cli/tsconfig.test.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.app.json",
-  "include": ["playwright", "src/**/*"],
+  "include": ["playwright", "src/**/*", "tests/**/*"],
   "compilerOptions": {
     "allowJs": true,
     "composite": true,