fix(ct): vue3 fallthrough events & callbacks (#23649)

closes:
https://github.com/microsoft/playwright/issues/23526#issuecomment-1583074280

closes: https://github.com/microsoft/playwright/issues/23435

packages/playwright-ct-vue/registerSource.mjs

@@ -52,7 +52,7 @@ function isComponent(component) {
  */
 async function __pwResolveComponent(component) {
   if (!isComponent(component))
-    return
+    return;
 
   let componentFactory = __pwLoaderRegistry.get(component.type);
   if (!componentFactory) {
@@ -68,11 +68,11 @@ async function __pwResolveComponent(component) {
   if (!componentFactory && component.type[0].toUpperCase() === component.type[0])
     throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...__pwRegistry.keys()]}`);
 
-  if(componentFactory)
-    __pwRegistry.set(component.type, await componentFactory())
+  if (componentFactory)
+    __pwRegistry.set(component.type, await componentFactory());
 
   if ('children' in component)
-    await Promise.all(component.children.map(child => __pwResolveComponent(child)))
+    await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
 const __pwAllListeners = new Map();
@@ -217,7 +217,7 @@ function __pwWrapFunctions(slots) {
 function __pwCreateWrapper(component) {
   const { Component, props, slots, listeners } = __pwCreateComponent(component);
   // @ts-ignore
-  const wrapper = __pwH(Component, props, slots);
+  const wrapper = __pwH(Component, { ...props, ...listeners }, slots);
   __pwAllListeners.set(wrapper, listeners);
   return wrapper;
 }
@@ -281,7 +281,7 @@ window.playwrightUpdate = async (rootElement, component) => {
 
   if (!wrapper.component)
     throw new Error('Updating a native HTML element is not supported');
-  
+
   const { slots, listeners, props } = __pwCreateComponent(component);
 
   wrapper.component.slots = __pwWrapFunctions(slots);

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

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-    required: true
-  }
-})
+  import { useAttrs } from 'vue';
+  defineProps<{ title: string }>();
+  const attrs = useAttrs();
 </script>
 
 <template>
-  <button @click="$emit('submit', 'hello')">{{ title }}</button>
+  <button
+    @click="$emit('submit', 'hello')"
+    @dblclick="() => attrs.dbclick('fallthroughEvent')"
+  >
+    {{ title }}
+  </button>
 </template>

tests/components/ct-vue-cli/tests/events/events.spec.ts

@@ -14,3 +14,17 @@ test('emit an submit event when the button is clicked', async ({ mount }) => {
   await component.click();
   expect(messages).toEqual(['hello']);
 });
+
+test('emit a falltrough event when the button is double clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      dbclick: (message: string) => messages.push(message),
+    },
+  });
+  await component.dblclick();
+  expect(messages).toEqual(['fallthroughEvent']);
+});

tests/components/ct-vue-cli/tests/events/events.spec.tsx

@@ -16,6 +16,20 @@ test('emit an submit event when the button is clicked', async ({ mount }) => {
   expect(messages).toEqual(['hello']);
 });
 
+test('emit a falltrough event when the button is double clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(
+    <Button
+      title="Submit"
+      v-on:dbclick={(message: string) => {
+        messages.push(message)
+      }}
+    />
+  );
+  await component.dblclick();
+  expect(messages).toEqual(['fallthroughEvent']);
+});
+
 test('emit a event when a slot is clicked', async ({ mount }) => {
   let clickFired = false;
   const component = await mount(

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

@@ -1,7 +1,14 @@
 <script lang="ts" setup>
-  defineProps<{ title: string }>()
+  import { useAttrs } from 'vue';
+  defineProps<{ title: string }>();
+  const attrs: Record<string, any> = useAttrs();
 </script>
 
 <template>
-  <button @click="$emit('submit', 'hello')">{{ title }}</button>
+  <button
+    @click="$emit('submit', 'hello')"
+    @dblclick="() => attrs.dbclick('fallthroughEvent')"
+  >
+    {{ title }}
+  </button>
 </template>

tests/components/ct-vue-vite/tests/events/events.spec.js

@@ -8,9 +8,23 @@ test('emit a submit event when the button is clicked', async ({ mount }) => {
       title: 'Submit',
     },
     on: {
-      submit: (data) => messages.push(data),
+      submit: (message) => messages.push(message),
     },
   });
   await component.click();
   expect(messages).toEqual(['hello']);
 });
+
+test('emit a falltrough event when the button is double clicked', async ({ mount }) => {
+  const messages = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      dbclick: (message) => messages.push(message),
+    },
+  });
+  await component.dblclick();
+  expect(messages).toEqual(['fallthroughEvent']);
+});

tests/components/ct-vue-vite/tests/events/events.spec.ts

@@ -8,9 +8,23 @@ test('emit a submit event when the button is clicked', async ({ mount }) => {
       title: 'Submit',
     },
     on: {
-      submit: (data: string) => messages.push(data),
+      submit: (message: string) => messages.push(message),
     },
   });
   await component.click();
   expect(messages).toEqual(['hello']);
 });
+
+test('emit a falltrough event when the button is double clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      dbclick: (message: string) => messages.push(message),
+    },
+  });
+  await component.dblclick();
+  expect(messages).toEqual(['fallthroughEvent']);
+});

tests/components/ct-vue-vite/tests/events/events.spec.tsx

@@ -7,8 +7,8 @@ test('emit a submit event when the button is clicked', async ({ mount }) => {
   const component = await mount(
     <Button
       title="Submit"
-      v-on:submit={(data: string) => {
-        messages.push(data);
+      v-on:submit={(message: string) => {
+        messages.push(message);
       }}
     />
   );
@@ -16,6 +16,20 @@ test('emit a submit event when the button is clicked', async ({ mount }) => {
   expect(messages).toEqual(['hello']);
 });
 
+test('emit a falltrough event when the button is double clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(
+    <Button
+      title="Submit"
+      v-on:dbclick={(message: string) => {
+        messages.push(message)
+      }}
+    />
+  );
+  await component.dblclick();
+  expect(messages).toEqual(['fallthroughEvent']);
+});
+
 test('emit a event when a slot is clicked', async ({ mount }) => {
   let clickFired = false;
   const component = await mount(