<template> <button @click="handleClick" > <sl

Feature request: Found differency in behavior on asserting custom events from vue-test-utils@1 and v2 about test-utils HOT 2 CLOSED

daniilgri commented on June 8, 2024 1

Feature request: Found differency in behavior on asserting custom events from vue-test-utils@1 and v2

from test-utils.

Comments (2)

daniilgri commented on June 8, 2024

Also wanna hear your opinion on naming custom events with native events names, starting from vue3 it seems like a bad practice, what do you think?

from test-utils.

cexbrayat commented on June 8, 2024

IIRC this is expected.

If you declare click in the emits of the component, then it should not show in the emitted. otherwise, it will, unless you stop it. See

test-utils/src/vueWrapper.ts

Lines 172 to 207 in 0d924f9

 private attachNativeEventListener(): void { 

 const vm = this.vm 

 if (!vm) return 

 const emits = vm.$options.emits 

 ? // if emits is declared as an array 

 Array.isArray(vm.$options.emits) 

 ? // use it 

 vm.$options.emits 

 : // otherwise it's declared as an object 

 // and we only need the keys 

 Object.keys(vm.$options.emits) 

 : [] 

 const elementRoots = this.getRootNodes().filter( 

 (node): node is Element => node instanceof Element 

 ) 

 if (elementRoots.length !== 1) { 

 return 

 } 

 const [element] = elementRoots 

 for (let eventName of Object.keys(domEvents)) { 

 // if a component includes events in 'emits' with the same name as native 

 // events, the native events with that name should be ignored 

 // @see https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md#fallthrough-control 

 if (emits.includes(eventName)) continue 

 const eventListener: EventListener = (...args) => { 

 recordEvent(vm.$, eventName, args) 

 } 

 element.addEventListener(eventName, eventListener) 

 this.cleanUpCallbacks.push(() => { 

 element.removeEventListener(eventName, eventListener) 

 }) 

 } 

 }

And I'm not a fan of having events with the same name as native events.

from test-utils.

Feature request: Found differency in behavior on asserting custom events from vue-test-utils@1 and v2 about test-utils HOT 2 CLOSED

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	private attachNativeEventListener(): void {
	const vm = this.vm
	if (!vm) return

	const emits = vm.$options.emits
	? // if emits is declared as an array
	Array.isArray(vm.$options.emits)
	? // use it
	vm.$options.emits
	: // otherwise it's declared as an object
	// and we only need the keys
	Object.keys(vm.$options.emits)
	: []

	const elementRoots = this.getRootNodes().filter(
	(node): node is Element => node instanceof Element
	)
	if (elementRoots.length !== 1) {
	return
	}
	const [element] = elementRoots
	for (let eventName of Object.keys(domEvents)) {
	// if a component includes events in 'emits' with the same name as native
	// events, the native events with that name should be ignored
	// @see https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md#fallthrough-control
	if (emits.includes(eventName)) continue

	const eventListener: EventListener = (...args) => {
	recordEvent(vm.$, eventName, args)
	}
	element.addEventListener(eventName, eventListener)
	this.cleanUpCallbacks.push(() => {
	element.removeEventListener(eventName, eventListener)
	})
	}
	}