如何使用Cypress在Slate编辑器中插入文本?用onChange
或cy.type()
键入时似乎未调用Slate cy.clear()
处理程序。
答案 0 :(得分:5)
赛普拉斯的输入命令(例如cy.type()
和cy.clear()
)通过调度input
和change
事件来工作-对于cy.type()
,每个字符一个。这模仿了用户在其键盘上键入时真实浏览器的行为,并且足以触发大多数应用程序JavaScript的行为。
但是,Slate几乎完全依赖于beforeinput
事件(请参见此处https://docs.slatejs.org/concepts/xx-migrating#beforeinput),该事件是一种新的浏览器技术,是赛普拉斯输入命令不模拟的事件。希望赛普拉斯团队会更新他们的输入命令以调度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');
如果您需要支持其他inputType,则会列出in the source code for editable.tsx
列出Slate支持的所有inputType。答案 1 :(得分:0)
从赛普拉斯v5.5开始,现在可以正常使用了!无需黑客即可使其与Slate一起使用。