Cypress Tab Key, тестирование поведения React, запускаемого клавишей Tab

Question

У меня есть приложение React с поисковым вводом, которое должно отвечать на клавишу табуляции.

Поиск - это компонент Function, который просто использует onKeyDown для обработки вкладки

<input type="text" name="searchTerm" id="searchTerm" className={classes.formControl}
  disabled={disabled}
  placeholder={disabled ? 'Search not available' : 'Search'}
  value={term}
  onChange={handlers.update}
  onKeyDown={handlers.handleKeyDown}
/>

и обработчик ключа

const handleKeyDown = (event) => {
  if (event.keyCode === 13 || event.keyCode === 9) {
    getResults(event)
  }
  if (event.keyCode === 27) {
    reset()
  }
}

Я смотрел на cypress-plugin-tab , и хотя в исходном коде показано событие, запускающее здесь , мой тест не прошел.

it('pressing Tab should display the search results modal', () => {
  cy.get(searchInput).clear().type('XYZ123')
    .tab();  
  cy.get(modal).should('be.visible')
  cy.get(modalListItem).should('have.length', 2)
})

Эквивалентный тест для клавиши Enter делаетпреуспеть

it('pressing Enter should display the search results modal', () => {
  cy.get(searchInput).clear().type('XYZ123')
    .type('{enter}');
  cy.get(modal).should('be.visible')
  cy.get(modalListItem).should('have.length', 2)
})

Answer 1

Обсуждение проблемы # 299 показывает альтернативу, которая работает лучше, когда тест требует захвата события React. Обратите внимание, что в React есть «синтетические события», которые могут быть причиной проблемы.

См. Дженнифер-Шехане прокомментировала 11 апреля 2018

Cypress.Commands.add('typeTab', (shiftKey, ctrlKey) => {
  cy.focused().trigger('keydown', {
      keyCode: 9,
      which: 9,
      shiftKey: shiftKey,
      ctrlKey: ctrlKey
  });
});

Добавлениеэта команда, следующий тест завершается успешно

it('pressing Tab should display the search results modal', () => {
  cy.get(searchInput).clear().type('XYZ123')
  cy.typeTab();
  cy.get(modal).should('be.visible')
  cy.get(modalListItem).should('have.length', 2)
})