У меня есть следующий компонент MenuList, на котором я хочу проверить событие нажатия клавиши.
Компонент :
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import * as React from 'react';
export default function App() {
return (
<div>
<MenuList autoFocusItem={true}>
<MenuItem>option 1</MenuItem>
<MenuItem>option 2</MenuItem>
<MenuItem>option 3</MenuItem>
</MenuList>
</div>
);
}
Test :
import {
fireEvent,
render,
} from 'test-utils';
import React from 'react';
import TestMenuList from './TestMenuList';
test('that on key down press, the focus on menu list item moves down', async () => {
// Render component
const { getAllByRole, getByRole } = render(<TestMenuList />, {});
let MenuItem1 = getAllByRole('menuitem')[0];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(true); // assert 1
const Menu = getByRole('menu');
fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 });
MenuItem1 = getAllByRole('menuitem')[0];
const MenuItem2 = getAllByRole('menuitem')[1];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(false); // assert 2
expect(MenuItem2.classList.contains('Mui-focusVisible')).toBe(true); // assert 3
});
Чтобы убедиться, что пункт меню находится в фокусе, я проверяю, есть ли у пункта меню класс Mui-focusVisible. Поскольку я установил autoFocusItem={true} в MenuList, первый элемент меню должен автоматически добавить класс Mui-focusVisible. Это утверждение утверждения 1, которое проходит.
let MenuItem1 = getAllByRole('menuitem')[0];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(true); // assert 1
Затем я запустил событие нажатия клавиши в меню
const Menu = getByRole('menu');
fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 });
И проверил, был ли класс Mui-focusVisible удален из первого пункт меню и добавлен во второй пункт меню. Теперь тест не пройден в утверждениях утверждений 2 и 3.
MenuItem1 = getAllByRole('menuitem')[0];
const MenuItem2 = getAllByRole('menuitem')[1];
expect(MenuItem1.classList.contains('Mui-focusVisible')).toBe(false); // assert 2
expect(MenuItem2.classList.contains('Mui-focusVisible')).toBe(true); // assert 3
Я зарегистрировал classList для MenuItem1 и MenuItem2, чтобы увидеть, удаляется ли Mui-focusVisible из первого пункта меню и добавляется в 2-й пункт меню после события нажатия клавиши. Но класс Mui-focusVisible все еще находится в первом пункте меню, а не во втором.
Я попытался добавить await wait().
fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 });
await wait();
, обертывающий экран с act(() => {}),
act(() => fireEvent.keyDown(Menu, { Key: 'ArrowDown', code: 40 }));
await wait()
событием нажатия клавиши первого элемента списка меню вместо самого меню.
act(() => fireEvent.keyDown(MenuItem1, { Key: 'ArrowDown', code: 40 }));
await wait()
Никто из них не работал. Я создал codesandbox для этого компонента, и здесь, кажется, он отлично работает в пользовательском интерфейсе. Но тест не пройден.