Клавиша Tab не меняет сфокусированный элемент - PullRequest
0 голосов
/ 30 апреля 2019

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

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

Тем не менее, при срабатывании события на клавиатуре фокус не меняется, как в браузере.


С учетом компонента реакции в Component.js

import React from 'react'

export default () => (
  <>
    <button data-testid="one">
      one
    </button>
    <button data-testid="two">
      two
    </button>
  </>
)

и следующий тест Component.test.js

import React from 'react'
import 'jest-dom/extend-expect'
import { cleanup, fireEvent, render, wait } from 'react-testing-library'
import Component from './Component'

afterEach(cleanup)

it('changes focus on tab', async () => {
  const { getByTestId } = render(<Component />)
  const one = getByTestId('one')
  const two = getByTestId('two')

  one.focus()

  expect(one).toHaveFocus()

  fireEvent.keyDown(one, {
    key: 'Tab',
    code: 9,
    charCode: 9
  })

  await wait(() => {
    expect(two).toHaveFocus()
  })
})

тест не пройден, поскольку элемент data-testid="one" все еще имеет фокус.

См. CodeSandbox для редактируемой версииэтот код

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...