Page MenuHomePhabricator

When running in Vue compat mode, CdxTextInput does not emit correct model update event when its input is set in Jest tests.
Closed, DeclinedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Write a test for a component that contains CdxTextInput
  • Have that test set a value in CdxTextInput's internal <input>field, e.g by doing wrapper.get('input').setValue('inputted text'),
  • Run that test in Vue compat mode.

What happens?:

  • CdxTextInput emits a model update event, but its value is an Event object, rather than the inputted text.

What should have happened instead?:

  • The value of the model update event should have been the inputted text.

Software version (skip for WMF-hosted wikis like Wikipedia):

		"@vue/test-utils": "2.0.0-rc.21",
		"@vue/vue3-jest": "27.0.0-alpha.4",
		"@wikimedia/codex": "0.2.1",
		"@vue/compat": "3.2.37",
		"jest": "27.4.7",
		"vue": "3.2.37"

Other information (browser name/version, screenshots, etc.):

  • The bug is demonstrated in a minimal example here.
  • The bug does not occur if Vue compat mode is not used.

Event Timeline

Catrope subscribed.

This appears to be a bug in Vue, as CdxTextInput doesn't do anything strange here. This issue should resolve itself once we migrate away from compat mode.

CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.
CCiufo-WMF subscribed.

Added the Vue 2 to Vue 3 EPIC as a parent task, to come back to this after the compatibility build it removed and confirm the bug is fixed.

@Catrope we've removed the compat mode now -- can this be closed?

@Catrope we've removed the compat mode now -- can this be closed?

Yes, you're right, this can be closed now.