如何在Cypress中测试Slate JS行为

Question

如何使用Cypress在Slate编辑器中插入文本？在使用cy.type()或cy.clear()键入时，可能不会调用板岩onChange处理程序。

Answer 1

Cypress输入命令(例如cy.type()和cy.clear())的工作方式是分派input和change事件-在cy.type()中，每个字符一个事件。这模拟了用户在键盘上键入时真实浏览器的行为，足以触发大多数应用程序JavaScript的行为。

然而，Slate几乎完全依赖于beforeinput事件(请参阅此处的https://docs.slatejs.org/concepts/xx-migrating#beforeinput)，这是一种新的浏览器技术，并且是Cypress输入命令不能模拟的事件。希望Cypress团队会更新他们的输入命令来分派beforeinput事件，但在他们这样做之前，我已经创建了几个简单的自定义命令，它们将触发Slate的输入事件侦听器并使其响应。

// 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');

如果您需要支持其他inputTypes，则列出了Slate支持的所有inputTypes in the source code for editable.tsx

Answer 2

从Cypress v5.5开始，它现在可以正常工作了！不需要黑客来使它与Slate一起工作。

参见https://github.com/cypress-io/cypress/issues/7088。