Home » Javascript » Testing Draftjs set Selection State to test hot keys input

Testing Draftjs set Selection State to test hot keys input

Posted by: admin August 19, 2018 Leave a comment

Questions:

Looking at Draftjs to build a wysiwyg. And stumped on how to test user input based on user selection.

If I load the component in browser, enter text, make a text selection and hit Ctrl + B the selection is correctly bolded.

I was intending to emulate this by

  1. setting content state
  2. setting selection state
  3. firing the command
  4. validating output

While I can getSelectionState there is no setSelectionState.

const contentState = ContentState.createFromText('Foo Bar')
// contentState.setSelectionState here [0,3]
const contentStateBold = RichUtils.handleKeyCommand(contentState, 'BOLD')
this.state = {
  editorState: EditorState.createWithContent(contentStateBold),
};
...
const wrapper = shallow((<Editor />));
expect(wrapper.contains(<b>Foo</b>)).to.equal(true);

This is a trivial example but it seems like a good place to start testing.

Is there a way to solve selection state? Or a work around to test that hot keys create expected output?

Answers: