feat: allow setValue to set values to contenteditable divs

src/domWrapper.ts

@@ -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) {
+      // for contenteditable elements, we set the innerHTML
+      // and trigger input and change events
+      // the value will be coerced to a string
+      // and object types will be stringified (either default [object Object] or custom toString)])
+      element.innerHTML = value
+      this.trigger('input')
+      return this.trigger('change')
     } else {
       throw Error(`wrapper.setValue() cannot be called on ${tagName}`)
     }

tests/setValue.spec.ts

@@ -343,4 +343,25 @@ describe('setValue', () => {
       })
     })
   })
+
+  describe('on contenteditable elements', () => {
+    it('sets element innerHTML', async () => {
+      const richContent = '<h1>Rich title</h1><p>Rich description</p>'
+      const onInput = vi.fn()
+      const onChange = vi.fn()
+      const Comp = defineComponent({
+        setup() {
+          return () => h('div', { contenteditable: 'true', onInput, onChange })
+        }
+      })
+
+      const wrapper = mount(Comp)
+      const editable = wrapper.find<HTMLDivElement>('div')
+      await editable.setValue(richContent)
+
+      expect(editable.element.innerHTML).toBe(richContent)
+      expect(onInput).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+  })
 })