test(ct): vue cli (#16694)

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}`);
+});

tests/components/ct-vue-cli/src/components/Button.vue

@@ -3,9 +3,6 @@ defineProps({
   title: {
     type: String,
     required: true
-  },
-  emits: {
-    submit: null,
   }
 })
 </script>

tests/components/ct-vue-cli/src/components/Component.vue

@@ -0,0 +1,3 @@
+<template>
+ <div>test</div>
+</template>

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>
+

tests/components/ct-vue-cli/src/components/MultiRoot.vue

@@ -0,0 +1,4 @@
+<template>
+ <div>root 1</div>
+ <div>root 2</div>
+</template>

tests/components/ct-vue-cli/src/components/NamedSlots.vue

@@ -3,7 +3,6 @@
     <header>
       <slot name="header" />
     </header>
-
     <main>
       <slot name="main" />
     </main>

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')
+})

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')
+})