What is the best way to simulate content change within an editor test?

[jdetch]

If I simulate a change or keypress event on a draft editor node or it's contenteditable node, why don't I see onChange get called?

A simple example of what I would expect to work:

describe('MyEditor', () => {
  it("calls onChange when content is edited", () => {
    const content = ContentState.createFromText("Any random string")
    const onChangeSpy = spyOn(MyEditor.prototype, 'onChange')
    const editor = renderIntoDocument(<MyEditor contentState={content}/>)
    const editorNode = findDOMNode(editor)
    Simulate.change(editorNode, {target: { value: 'x'}})
    expect(onChangeSpy).toHaveBeenCalled()
    expect(editor.state.editorState.getCurrentContent().getPlainText()).toContain('x')
  })  
})

I tried doing all kinds of things with Simulate (keyPresses, keyDowns, changes, etc.), but nothing seemed to actually change the value of the content.

[Datamine]

@jdetch I'm having the same issue. Did you manage to simulate changes/keypresses?

[kenju]

Draft.js's components does not change its content with keypress, keydown or change events, which are mostly used events for <input/> though. Draft.js does not rely on <input />.

The rendering of the DOM representation is driven entirely from the EditorState object, not those DOM events.

keydown and keypress events are not used for character insertion. Rather, the React polyfill for beforeInput is used for this: https://github.com/facebook/draft-js/blob/master/src/component/handlers/edit/editOnBeforeInput.js.

I suggest following this issue
#325 (comment)

[kenju]

FYI

Updated the solution for simulating Keyboard Event for draft.js ->
#325 (comment)

[hernang87]

The solution I found for most text input is to get the react component and trigger onBeforeInput and onInput manually.

const draft = document.getElementsByClassName('container').getElementsByClassName('public-DraftEditor-content')[0];

Find which element inside draft includes __reactInternal and then for each char:

component.onBeforeInput({ data: char, preventDefault: noop });
component.onInput();

This doesn't work for accents unfortunately but there might be a way to do it with this approach.