Random behaviour when trying to simulate typing with enzyme

Do you want to request a feature or report a bug?

I have a question that is too complicated for being asked in slack

What’s the current behavior?

I am new to automatic testing and trying to write tests for our custom slate editor, using karma (with google chrome) and enzyme. I thought it would be best to test by simulate typing on the editor and expecting a certain state change. After a while, I figured out I had to simulate ‘beforeInput’, ‘input’ and ‘keydown’ events on the Editors ‘Content’ Component, and I had to use the enzymes mount functions ‘attachTo’ parameter in order to do so. So I wrote a ‘simlateTyping’ function looking like the following:

export function simulateKeyPress(wrapper, key) {
  const events = [
    'keydown',
    'beforeinput',
    // 'input',
  ]
  events.forEach((event, i) => {
    const eventObj = {
      altKey: false,
      charCode: 0,
      ctrlKey: false,
      metaKey: false,
      shiftKey: false,
      which: keycode(key),
      keyCode: keycode(key),
      data: key,
      key,
    }
    wrapper.simulate(event, eventObj)
  })
}

export function simulateTyping(wrapper, str) {
  const chars = str.split('')
  chars.forEach(char => simulateKeyPress(wrapper, char))
}

I wrote a basic test for the editor:

describe('<SlateEditor />', () => {
  stateChangeExpectation('can type text', canTypeTextOutput, (wrapper, editorStore) => {
    editorStore.doUpdateState(
      editorStore.state.transform().selectAll().collapseToEnd().focus().apply(),
    )
    const contentWrapper = wrapper.find('Content')
    simulateTyping(contentWrapper, '12345678')
  })
})

The stateChangeExpectation function basically gives you an enzyme wrapper of the Editor comonent and the store in which the state is saved. After the method you pass is executed it expects the output specified as the second parameter. In my case the initial state was just a plain

Hello World!

and after the function executed a

Hello World!12345678

is expected, obviously ( I will list the input state and expected output below )

What’s the expected behavior?

However what I keep getting is this:

Hello World!2468|7531

(With the selection after the 8) Because apparently, the cursor doesn’t jump with the last typed character every second time. I’ve figured out that the reason for that lies somewhere in this code section https://github.com/ianstormtaylor/slate/blob/master/src/plugins/core.js#L114-L130 Where the condition is only fulfilled on every second character that is inserted. Does someone have any clue why this isn’t working like regular typing is? Would be really nice if someone could have a look at that.

I couldn’t create a JSFiddle because there is no enzyme CDN unfortunately. If you need it though I can create a little GitHub repo reproducing that issue.

Finally heres the initialState:

document:
  data: {}
  kind: document
  nodes:
    - data: {}
      kind: block
      isVoid: false
      type: paragraph
      nodes:
        - kind: text
          ranges:
            - kind: range
              text: 'Hello World!'
              marks: []
kind: state

And here the expected output

document:
  data: {}
  kind: document
  nodes:
    - data: {}
      kind: block
      isVoid: false
      type: paragraph
      nodes:
        - kind: text
          ranges:
            - kind: range
              text: 'Hello World!12345678'
              marks: []
kind: state

[ianstormtaylor]

Hey, thanks for using Slate! Unfortunately, we can’t offer support for usage questions in the issues here because it becomes overwhelming to maintain the project if the issues are filled with questions.

However, we do have a Slack channel and people are constantly asking and answering questions in there. So I’m going to close this issue, but I definitely recommend joining the Slack channel if you want to find people that might be able to help.

Thanks for understanding!

[wmhilton]

I really dislike this policy, because it means - even if this was answered - the answer is gone now because Slack has a very short search history. @marschi Do you remember how you solved this? I’m investigating using enzyme to simulate typing in slate as well.