当使用Selenium或Cypress进行测试时，如何在slate.js上触发更改事件

Question

我正在尝试找到一种方法来模拟E2E测试(使用硒或柏树(和slate.js 时的"更改"事件

在我们的UI中，当用户点击一个单词时，我们会弹出一个模态(与该单词相关(。我一直无法实现这一点，因为我无法让更改事件触发

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都列在editable.tsx 的源代码中

Answer 2

找到了一个解决方案：

1( 向编辑器添加引用

<Editor
ref={this.editor}
/>

2( 为自定义事件添加文档侦听器

componentDidMount() {
document.addEventListener("Test_SelectWord", this.onTestSelectWord)
}
componentWillUnmount() {
document.removeEventListener("Test_SelectWord", this.onTestSelectWord)
}

3( 创建一个处理程序，用于创建自定义选择事件

onTestSelectWord(val: any) {
let slateEditor = val.detail.parentElement.parentElement.parentElement.parentElement
// Events are special, can't use spread or Object.keys
let selectEvent: any = {}
for (let key in val) { 
if (key === 'currentTarget') {
selectEvent['currentTarget'] = slateEditor
}
else if (key === 'type') {
selectEvent['type'] = "select"
}
else {
selectEvent[key] = val[key] 
}
}
// Make selection
let selection = window.getSelection();        
let range = document.createRange();
range.selectNodeContents(val.detail);
selection.removeAllRanges();
selection.addRange(range)
// Fire select event
this.editor.current.onEvent("onSelect", selectEvent)
}

4( 在测试代码中使用以下内容：

arr = Array.from(document.querySelectorAll(".cl-token-node"))
text = arr.filter(element => element.children[0].innerText === "*WORD_YOU_ARE_SELECTING*")[0].children[0].children[0]
var event = new CustomEvent("Test_SelectWord", {detail: text})
document.dispatchEvent(event, text)

Answer 3

Cypress可以显式触发事件：https://docs.cypress.io/api/commands/trigger.html#Syntax

这可能对你有用：

cy.get(#element).trigger("change")