作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何使用 Cypress 在 Slate 编辑器中插入文本?石板 onChange
使用 cy.type()
键入时似乎没有调用处理程序或 cy.clear()
.
最佳答案
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');
关于javascript - 如何在 Cypress 中测试 Slate JS 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61360117/
我是一名优秀的程序员,十分优秀!