Creating dom event with readonly props doesn't work on inherited events

[599316527]

Subject of the issue

Fail to trigger dragstart event on wrapper with clientX/Y props

Steps to reproduce

wrapper.trigger('dragstart', {clientX: 999})

Expected behaviour

Events are triggered.

Actual behaviour

Got error:

TypeError: Cannot set property clientX of #<MouseEvent> which has only a getter
	    at eval (webpack-internal:///./node_modules/@vue/test-utils/dist/vue-test-utils.js:3141:18)

Possible Solution

Since DragEvent inherits properties from MouseEvent, we shall get prototype recursively until find the field.

[lmiller1990]

Like the message says, TypeError: Cannot set property clientX of #<MouseEvent> which has only a getter. This is a Web APIs limitation and not something we can do anything about. Sorry about that. I will close this since there is nothing we can really do here.

You could consider something like https://github.com/cypress-io/cypress/tree/master/npm/vue. Cypress has support for drag n drop (here is the recipe: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__drag-drop)

[599316527]

I think you don't get the point. I know clientX is the readonly property of MouseEvent so that event.clientX should not be assigned but as I mentioned above createDOMEvent of vue-test-utils do it even though there is a readonly check. So what you shall care about is the incomplete implementation of canSetProperty which ignores inherited events.

In this case, clientX has already be assigned to the MouseEvent when initailizing the event. There is no need to assign it again later.

vue-test-utils/packages/test-utils/src/create-dom-event.js

Lines 51 to 56 in c4133d6

	const event = new SupportedEventInterface(
	eventType,
	// event properties can only be added when the event is instantiated
	// custom properties must be added after the event has been instantiated
	getOptions(eventParams)
	)

[lmiller1990]

Right, I think I misunderstood. You suggesting we should update the code to not assign the value, because it is read only? Are there some cases where the properties are not read only and you are allowed to set them (I assume so, that is why the code is there).

For your test, shouldn't you just remove the {clientX: 999} part? As you said, you cannot set this property anyway, so that will do nothing.

[599316527]

In the current implementation, there are two steps to assign values to event.

Step 1: The returned object of getOptions contains all options of createDOMEvent and the object is passed to Event constructor as second parameter. For MouseEvent, the object is recognized as mouseEventInit by which you can set clientX and other valid properties to MouseEvent at the stage of initializing it. clientX has been set at this step.

Step 2: Once event has been created, an iteration of options of createDOMEvent is triggered to assign key-values to the event. During the iteration, setter of event[key] is checked to ensure assignment is only applied to wrtitable field.

At the first step fields which are valid for event constructor are accepted and the second step is to ensure rest fields are attached to the event as well. It works well for MouseEvent but not for DragEvent. As I mentioned above, the setter check algorithm is not suitable for DragEvent because DragEvent inherits properties from MouseEvent. clientX is readonly property of MouseEvent as well as DragEvent but Object.getOwnPropertyDescriptor(dragEvent, 'clientX') could not handle it. getOwnPropertyDescriptorRecursively is a more proper way for this situation.

[lmiller1990]

Interesting, you have researched this really well (I don't know a ton about event properties).

If you want to make a PR with this change, that'd be great. We likely will need to have something similar in Vue Test Utils v2. I could port over anything you bug fix here.