如何使用 Cypress 在Slate编辑器中插入文本?使用onChangecy.type()键入时,似乎未调用Slate cy.clear()处理程序。

最佳答案

Cypress 的输入命令(例如cy.type()cy.clear())通过调度inputchange事件来工作-在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

09-17 17:41