fix: record native events against each wrapper they bubble through

src/emit.ts

@@ -33,23 +33,23 @@ export const attachEmitListener = () => {
   setDevtoolsHook(createDevTools(events))
 }
 
+// devtools hook only catches Vue component custom events
 function createDevTools(events: Events): any {
   return {
     emit(eventType, ...payload) {
       if (eventType !== DevtoolsHooks.COMPONENT_EMIT) return
 
       const [rootVM, componentVM, event, eventArgs] = payload
-      recordEvent(events, componentVM, event, eventArgs)
+      recordEvent(componentVM, event, eventArgs)
     }
   } as Partial<typeof devtools>
 }
 
-function recordEvent(
-  events: Events,
+export const recordEvent = (
   vm: ComponentInternalInstance,
   event: string,
   args: unknown[]
-): void {
+): void => {
   // Functional component wrapper creates a parent component
   let wrapperVm = vm
   while (typeof wrapperVm?.type === 'function') wrapperVm = wrapperVm.parent!

src/vueWrapper.ts

@@ -12,7 +12,7 @@ import { createWrapperError } from './errorWrapper'
 import { TriggerOptions } from './createDomEvent'
 import { find, matches } from './utils/find'
 import { mergeDeep, textContent } from './utils'
-import { emitted } from './emit'
+import { emitted, recordEvent } from './emit'
 
 export class VueWrapper<T extends ComponentPublicInstance> {
   private componentVM: T
@@ -30,6 +30,9 @@ export class VueWrapper<T extends ComponentPublicInstance> {
     this.rootVM = vm?.$root
     this.componentVM = vm as T
     this.__setProps = setProps
+
+    this.attachNativeEventListener()
+
     config.plugins.VueWrapper.extend(this)
   }
 
@@ -42,6 +45,21 @@ export class VueWrapper<T extends ComponentPublicInstance> {
     return this.vm.$el.parentElement
   }
 
+  private attachNativeEventListener(): void {
+    const vm = this.vm
+    if (!vm) return
+
+    const element = this.element
+    for (let key in element) {
+      if (/^on/.test(key)) {
+        const eventName = key.slice(2)
+        element.addEventListener(eventName, (...args) => {
+          recordEvent(vm.$, eventName, args)
+        })
+      }
+    }
+  }
+
   get element(): Element {
     // if the component has multiple root elements, we use the parent's element
     return this.hasMultipleRoots ? this.parentElement : this.vm.$el
@@ -79,7 +97,7 @@ export class VueWrapper<T extends ComponentPublicInstance> {
   }
 
   emitted<T = unknown>(): Record<string, T[]>
-  emitted<T = unknown>(eventName?: string): undefined | T[]
+  emitted<T = unknown>(eventName: string): undefined | T[]
   emitted<T = unknown>(
     eventName?: string
   ): undefined | T[] | Record<string, T[]> {

tests/emit.spec.ts

@@ -78,23 +78,73 @@ describe('emitted', () => {
     expect(wrapper.emitted().hello[1]).toEqual(['foo', 'bar'])
   })
 
-  it('should not propagate child events', () => {
+  it('should propagate child native events', async () => {
     const Child = defineComponent({
-      name: 'Child',
-      setup(props, { emit }) {
+      name: 'Button',
+      setup(props) {
+        return () => h('div', [h('input')])
+      }
+    })
+
+    const Parent = defineComponent({
+      name: 'Parent',
+      setup() {
         return () =>
           h('div', [
-            h('button', { onClick: () => emit('hello', 'foo', 'bar') })
+            h(Child, {
+              onClick: (event: Event) => event.stopPropagation()
+            })
           ])
       }
     })
 
+    const GrandParent: FunctionalComponent<{ level: number }> = (
+      props,
+      ctx
+    ) => {
+      return h(`h${props.level}`, [h(Parent)])
+    }
+
+    const wrapper = mount(GrandParent)
+    const parentWrapper = wrapper.findComponent(Parent)
+    const childWrapper = wrapper.findComponent(Child)
+    const input = wrapper.find('input')
+
+    expect(wrapper.emitted()).toEqual({})
+    expect(parentWrapper.emitted()).toEqual({})
+    expect(childWrapper.emitted()).toEqual({})
+
+    await input.trigger('click')
+
+    // Propagation should stop at Parent
+    expect(childWrapper.emitted().click).toHaveLength(1)
+    expect(parentWrapper.emitted().click).toEqual(undefined)
+    expect(wrapper.emitted().click).toEqual(undefined)
+
+    input.setValue('hey')
+
+    expect(childWrapper.emitted().input).toHaveLength(1)
+    expect(parentWrapper.emitted().input).toHaveLength(1)
+    expect(wrapper.emitted().input).toHaveLength(1)
+  })
+
+  it('should not propagate child custom events', () => {
+    const Child = defineComponent({
+      name: 'Child',
+      emits: ['hi'],
+      setup(props, { emit }) {
+        return () =>
+          h('div', [h('button', { onClick: () => emit('hi', 'foo', 'bar') })])
+      }
+    })
+
     const Parent = defineComponent({
       name: 'Parent',
+      emits: ['hello'],
       setup(props, { emit }) {
         return () =>
           h(Child, {
-            onHello: (...events: unknown[]) => emit('parent', ...events)
+            onHi: (...events: unknown[]) => emit('hello', ...events)
           })
       }
     })
@@ -105,14 +155,18 @@ describe('emitted', () => {
     expect(childWrapper.emitted()).toEqual({})
 
     wrapper.find('button').trigger('click')
-    expect(wrapper.emitted().parent[0]).toEqual(['foo', 'bar'])
-    expect(wrapper.emitted().hello).toEqual(undefined)
-    expect(childWrapper.emitted().hello[0]).toEqual(['foo', 'bar'])
 
+    // Parent should emit custom event 'hello' but not 'hi'
+    expect(wrapper.emitted().hello[0]).toEqual(['foo', 'bar'])
+    expect(wrapper.emitted().hi).toEqual(undefined)
+    // Child should emit custom event 'hi'
+    expect(childWrapper.emitted().hi[0]).toEqual(['foo', 'bar'])
+
+    // Additional events should accumulate in the same format
     wrapper.find('button').trigger('click')
-    expect(wrapper.emitted().parent[1]).toEqual(['foo', 'bar'])
-    expect(wrapper.emitted().hello).toEqual(undefined)
-    expect(childWrapper.emitted().hello[1]).toEqual(['foo', 'bar'])
+    expect(wrapper.emitted().hello[1]).toEqual(['foo', 'bar'])
+    expect(wrapper.emitted().hi).toEqual(undefined)
+    expect(childWrapper.emitted().hi[1]).toEqual(['foo', 'bar'])
   })
 
   it('should allow passing the name of an event', () => {