feat: allow setValue to set values to contenteditable divs #2671
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for vue-test-utils-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
cexbrayat
reviewed
Jun 11, 2025
| @@ -136,6 +136,14 @@ export class DOMWrapper<NodeType extends Node> extends BaseWrapper<NodeType> { | |||
| this.trigger('input') | |||
| // trigger `change` for `v-model.lazy` | |||
| return this.trigger('change') | |||
| } else if (tagName === 'DIV' && this.attributes().contenteditable) { | |||
There was a problem hiding this comment.
AFAIK contenteditable is available on all tags, not only on divs
and the presence of the attribute might not be enough, as I think in <div contenteditable="true"><div id="inner"></div></div>, #inner is also editable.
I think using the property isContentEditable might be more reliable
| expect(onInput).toHaveBeenCalledTimes(1) | ||
| expect(onChange).toHaveBeenCalledTimes(1) | ||
| }) | ||
| }) |
There was a problem hiding this comment.
It would be great to have more tests, with other elements than div, other values than true, nested elements with parents that are editable or not, etc.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Implements #2390
Support
setValueforcontenteditableElementsSummary
This PR extends the
DOMWrapper.setValuemethod to support elements with thecontenteditableattribute (such as<div contenteditable="true">). Previously,setValuewas only applicable to form inputs, textareas, and selects. With this change, users can now easily set the inner HTML of contenteditable elements in their tests, and trigger the expectedinputandchangeevents.Details
setValue:When called on a
DIVwith thecontenteditableattribute,setValueupdates the element’sinnerHTML, triggers bothinputandchangeevents, and supports any value (object values will be stringified).If
setValueis called on an unsupported element, an error is still thrown as before.Added a dedicated test case to verify that
setValueproperly updates a contenteditable element’s inner HTML and triggers the appropriate events.Motivation
Rich text editors and other contenteditable-based components are common in modern web apps. This enhancement allows for more robust and expressive testing of these components, improving DX and test reliability.
Example Usage