javascript - How to test Slate JS behavior in Cypress - Stack Overflow

admin管理员组

文章数量:1431978

How can I insert text in a Slate editor with Cypress? The Slate onChange handler doesn't seem to be called while typing with cy.type() or cy.clear().

How can I insert text in a Slate editor with Cypress? The Slate onChange handler doesn't seem to be called while typing with cy.type() or cy.clear().

• javascript
• dom-events
• cypress
• slate.js

Share Improve this question Follow asked Apr 22, 2020 at 8:04 reydeloreydelo 35122 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The Cypress input mands (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/concepts/xx-migrating#beforeinput) which is a new browser technology and an event which the Cypress input mands don’t simulate. Hopefully the Cypress team will update their input mands to dispatch the beforeinput event, but until they do I’ve created a couple of simple custom mands which will trigger Slate’s input event listeners and make it respond.

// mands.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/status/409');

If you need to support other inputTypes, all of the inputTypes supported by Slate are listed in the source code for editable.tsx

As of Cypress v5.5, this now works as expected! No hacks should be required to make it work with Slate.

See https://github./cypress-io/cypress/issues/7088.

本文标签： javascriptHow to test Slate JS behavior in CypressStack Overflow