`onChange` is not called when using Cypress's `type` command

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

bug

What’s the current behavior?

Using Cypress’s type command to insert some text in a Slate editor. The Slate onChange handler doesn’t seem to be called while typing (note how the placeholder is never removed):

Here’s some console output for the onChange handler for the duration of this interaction:

This was only logged once (presumably when the editor mounted). Instead, this should’ve been logged several times and the leaf should’ve ended up with a text value equivalent to what was typed.

Slate: 0.57.1 Browser: Chrome (in a Cypress environment) OS: Mac

What’s the expected behavior?

onChange should be called as the value changes when typing. There’s some documentation about how events are handled for Cypress’s type command here.

[mwood23]

@alexmonteirocastro I couldn’t get it to work for me either and chased it down into the source. The solution posted works and goes through all the code paths you’d want as long as your Editable component has autoFocus on it. I’m using Storybook and had to cy.wait(200) on render for mine to work. To test your setup you can try running cypress against the Slate example.

// Spec file to be ran in Cypress
describe('Test that setup works', () => {
  beforeEach(function() {
    cy.visit('https://www.slatejs.org/examples/richtext')
  })

  it('Can type in Slate using helper commands', function() {
    cy.getEditor('[contenteditable=true]').typeInSlate('Some text here')
  })
})

Here’s a snippet from the examples on usage.

[reydelo]

The Cypress input commands (e.g. cy.type() and cy.clear()) work by dispatching input and change events - in the case of cy.type(), one per character. This mimics the behavior of a real browser as a user types on their keyboard and is enough to trigger the behavior of most application JavaScript.

However, Slate relies almost exclusively on the beforeinput event (see here https://docs.slatejs.org/concepts/xx-migrating#beforeinput) which is a new browser technology and an event which the Cypress input commands don’t simulate. Hopefully the Cypress team will update their input commands to dispatch the beforeinput event, but until they do I’ve created a couple of simple custom commands which will trigger Slate’s input event listeners and make it respond.

// commands.js
Cypress.Commands.add('getEditor', (selector) => {
  return cy.get(selector)
    .click();
});

Cypress.Commands.add('typeInSlate', { prevSubject: true }, (subject, text) => {
  return cy.wrap(subject)
    .then(subject => {
      subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'insertText', data: text }));
      return subject;
    })
});
 
Cypress.Commands.add('clearInSlate', { prevSubject: true }, (subject) => {
  return cy.wrap(subject)
    .then(subject => {
      subject[0].dispatchEvent(new InputEvent('beforeinput', { inputType: 'deleteHardLineBackward' }))
      return subject;
    })
});

// slateEditor.spec.js
cy.getEditor('[data-testid=slateEditor1] [contenteditable]')
    .typeInSlate('Some input text ');

cy.getEditor('[data-testid=slateEditor2] [contenteditable]')
    .clearInSlate()
    .typeInSlate('http://httpbin.org/status/409');

If you need to support other inputTypes, all of the inputTypes supported by Slate are listed here