diff --git a/src/components/ui/DropdownMenu/tests/DropdownMenu.hybridInteraction.test.tsx b/src/components/ui/DropdownMenu/tests/DropdownMenu.hybridInteraction.test.tsx new file mode 100644 index 000000000..1d9701ac1 --- /dev/null +++ b/src/components/ui/DropdownMenu/tests/DropdownMenu.hybridInteraction.test.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import DropdownMenu from '../DropdownMenu'; + +describe('DropdownMenu hybrid interaction', () => { + const menu = () => ( + + Open + + + One + Two + Three + + + + ); + + test('pointer open then keyboard navigation selects item', async() => { + const user = userEvent.setup(); + render(menu()); + + await user.click(screen.getByText('Open')); + await user.keyboard('{ArrowDown}{ArrowDown}{Enter}'); + + await waitFor(() => expect(screen.queryByText('One')).not.toBeInTheDocument()); + await waitFor(() => expect(screen.getByText('Open')).toHaveFocus()); + }); + + test('keyboard open then pointer click selects item', async() => { + const user = userEvent.setup(); + render(menu()); + + const trigger = screen.getByText('Open'); + trigger.focus(); + await user.keyboard('{ArrowDown}'); + + await waitFor(() => expect(screen.getByText('One')).toBeInTheDocument()); + + await user.click(screen.getByText('Three')); + await waitFor(() => expect(screen.queryByText('Three')).not.toBeInTheDocument()); + await waitFor(() => expect(trigger).toHaveFocus()); + }); +});