Как вызвать событие изменения на slate.js при тестировании с Selenium или Cypress - PullRequest
Новая
       10

Как вызвать событие изменения на slate.js при тестировании с Selenium или Cypress

0 голосов
/ 03 декабря 2018

Я пытаюсь найти способ смоделировать событие «изменение» при выполнении тестирования E2E (с селеном или кипарисом) и slate.js

В нашем пользовательском интерфейсе, когда пользователь нажимает на слово,мы выскакиваем модал (связанный с этим словом).Я не смог этого добиться, так как не могу заставить событие изменения вызвать

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Нашел решение:

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)
0 голосов
/ 03 декабря 2018

Cypress может явно вызывать события: https://docs.cypress.io/api/commands/trigger.html#Syntax

Это может работать для вас: 

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