From 31a47d4273a2810b4c2ca5fe2b7386550944724f Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Tue, 23 Aug 2022 20:35:43 +0200
Subject: [PATCH] test(ct): vue cli (#16694)

---
 .../components/ct-vue-cli/playwright/index.js | 11 ++++
 .../ct-vue-cli/src/components/Button.vue      |  3 -
 .../ct-vue-cli/src/components/Component.vue   |  3 +
 .../ct-vue-cli/src/components/Counter.vue     | 21 +++++++
 .../ct-vue-cli/src/components/MultiRoot.vue   |  4 ++
 .../ct-vue-cli/src/components/NamedSlots.vue  |  1 -
 .../ct-vue-cli/src/notation-jsx.spec.tsx      | 46 ++++++++++++++-
 .../ct-vue-cli/src/notation-vue.spec.ts       | 57 +++++++++++++++++++
 8 files changed, 140 insertions(+), 6 deletions(-)
 create mode 100644 tests/components/ct-vue-cli/src/components/Component.vue
 create mode 100644 tests/components/ct-vue-cli/src/components/Counter.vue
 create mode 100644 tests/components/ct-vue-cli/src/components/MultiRoot.vue

diff --git a/tests/components/ct-vue-cli/playwright/index.js b/tests/components/ct-vue-cli/playwright/index.js
index e69de29bb2..29eaab5a6a 100644
--- a/tests/components/ct-vue-cli/playwright/index.js
+++ b/tests/components/ct-vue-cli/playwright/index.js
@@ -0,0 +1,11 @@
+//@ts-check
+
+import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
+
+beforeMount(async ({ app, hooksConfig }) => {
+  console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
+});
+
+afterMount(async ({ instance }) => {
+  console.log(`After mount el: ${instance.$el.constructor.name}`);
+});
diff --git a/tests/components/ct-vue-cli/src/components/Button.vue b/tests/components/ct-vue-cli/src/components/Button.vue
index 8df50e23b3..334a3d0364 100644
--- a/tests/components/ct-vue-cli/src/components/Button.vue
+++ b/tests/components/ct-vue-cli/src/components/Button.vue
@@ -3,9 +3,6 @@ defineProps({
   title: {
     type: String,
     required: true
-  },
-  emits: {
-    submit: null,
   }
 })
 </script>
diff --git a/tests/components/ct-vue-cli/src/components/Component.vue b/tests/components/ct-vue-cli/src/components/Component.vue
new file mode 100644
index 0000000000..133c8e2670
--- /dev/null
+++ b/tests/components/ct-vue-cli/src/components/Component.vue
@@ -0,0 +1,3 @@
+<template>
+ <div>test</div>
+</template>
diff --git a/tests/components/ct-vue-cli/src/components/Counter.vue b/tests/components/ct-vue-cli/src/components/Counter.vue
new file mode 100644
index 0000000000..6e211660b7
--- /dev/null
+++ b/tests/components/ct-vue-cli/src/components/Counter.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <span id="remount-count">{{ remountCount }}</span>
+    <span id="rerender-count">{{ count }}</span>
+  </div>
+</template>
+
+<script>
+let remountCount = 0
+</script>
+
+<script setup>
+defineProps({
+  count: {
+    type: Number,
+    required: true
+  }
+})
+remountCount++
+</script>
+
diff --git a/tests/components/ct-vue-cli/src/components/MultiRoot.vue b/tests/components/ct-vue-cli/src/components/MultiRoot.vue
new file mode 100644
index 0000000000..d1c348d750
--- /dev/null
+++ b/tests/components/ct-vue-cli/src/components/MultiRoot.vue
@@ -0,0 +1,4 @@
+<template>
+ <div>root 1</div>
+ <div>root 2</div>
+</template>
\ No newline at end of file
diff --git a/tests/components/ct-vue-cli/src/components/NamedSlots.vue b/tests/components/ct-vue-cli/src/components/NamedSlots.vue
index b7e95f4487..582608df32 100644
--- a/tests/components/ct-vue-cli/src/components/NamedSlots.vue
+++ b/tests/components/ct-vue-cli/src/components/NamedSlots.vue
@@ -3,7 +3,6 @@
     <header>
       <slot name="header" />
     </header>
-
     <main>
       <slot name="main" />
     </main>
diff --git a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
index 3ecea3cac2..68ec15a448 100644
--- a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
+++ b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
@@ -1,15 +1,30 @@
 import { test, expect } from '@playwright/experimental-ct-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'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
 test('props should work', async ({ mount }) => {
-  const component = await mount(<Button title='Submit'></Button>)
+  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.rerender({ props: { count: 1337 } })
+  await expect(component.locator('#rerender-count')).toContainText('1337')
+  
+  await component.rerender({ props: { count: 42 } })
+  await expect(component.locator('#rerender-count')).toContainText('42')
+
+  await expect(component.locator('#remount-count')).toContainText('1')
+})
+
 test('event should work', async ({ mount }) => {
   const messages = []
   const component = await mount(<Button title='Submit' v-on:submit={data => {
@@ -19,7 +34,7 @@ test('event should work', async ({ mount }) => {
   expect(messages).toEqual(['hello'])
 })
 
-test('default  slot should work', async ({ mount }) => {
+test('default slot should work', async ({ mount }) => {
   const component = await mount(<DefaultSlot>
     Main Content
   </DefaultSlot>)
@@ -51,3 +66,30 @@ test('named slots should work', async ({ mount }) => {
   await expect(component).toContainText('Main Content')
   await expect(component).toContainText('Footer')
 })
+
+test('slot should emit events', 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('should run hooks', async ({ page, mount }) => {
+  const messages = []
+  page.on('console', m => messages.push(m.text()))
+  await mount(<Button title="Submit" />, {
+    hooksConfig: { route: 'A' }
+  })
+  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
+})
+
+test('unmount a multi root component should work', 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/src/notation-vue.spec.ts b/tests/components/ct-vue-cli/src/notation-vue.spec.ts
index ae611bcdaf..acf69293fc 100644
--- a/tests/components/ct-vue-cli/src/notation-vue.spec.ts
+++ b/tests/components/ct-vue-cli/src/notation-vue.spec.ts
@@ -1,8 +1,11 @@
 import { test, expect } from '@playwright/experimental-ct-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'
 
 test.use({ viewport: { width: 500, height: 500 } })
 
@@ -15,6 +18,23 @@ test('props should work', async ({ mount }) => {
   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.rerender({ props: { count: 1337 } })
+  await expect(component.locator('#rerender-count')).toContainText('1337')
+  
+  await component.rerender({ props: { count: 42 } })
+  await expect(component.locator('#rerender-count')).toContainText('42')
+
+  await expect(component.locator('#remount-count')).toContainText('1')
+})
+
 test('event should work', async ({ mount }) => {
   const messages = []
   const component = await mount(Button, {
@@ -60,3 +80,40 @@ test('named slots should work', async ({ mount }) => {
   await expect(component).toContainText('Main Content')
   await expect(component).toContainText('Footer')
 })
+
+test('optionless should work', async ({ mount }) => {
+  const component = await mount(Component)
+  await expect(component).toContainText('test')
+})
+
+test('should run hooks', async ({ page, mount }) => {
+  const messages = []
+  page.on('console', m => messages.push(m.text()))
+  await mount(Button, {
+    props: {
+      title: 'Submit'
+    },
+    hooksConfig: { route: 'A' }
+  })
+  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
+})
+
+test('should 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 should work', 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')
+})