Как проверить поведение Slate JS в Cypress

Question

Как я могу вставить текст в редактор Slate с помощью Cypress? Кажется, что обработчик Slate onChange не вызывается при наборе с cy.type() или cy.clear().

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, перечислены в исходном коде для editable.tsx