Skip to content

Commit 32f8ec9

Browse files
WesCossickWesCossick
committed
Refactor testing of up/down arrow keys to use fireEvent() 
1 parent d12d128 commit 32f8ec9

File tree

1 file changed

+112
-57
lines changed

1 file changed

+112
-57
lines changed

‎test/use-dropdown-menu.test.tsx‎

Lines changed: 112 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Imports
22
import React from 'react';
3-
import { act, render, screen } from '@testing-library/react';
3+
import { fireEvent, render, screen } from '@testing-library/react';
44
import userEvent from '@testing-library/user-event';
55
import TestComponent from './test-component';
66

@@ -49,21 +49,21 @@ it('Moves the focus to the first menu item after clicking the menu to open it, t
4949
expect(screen.getByText('Item 1')).toHaveFocus();
5050
});
5151

52-
/*
5352
it('Moves the focus to the first menu item after clicking the menu to open it, then pressing arrow down while focused on the menu button', () => {
5453
render(<TestComponent />);
5554

5655
userEvent.click(screen.getByText('Primary'));
5756

5857
expect(screen.getByText('Primary')).toHaveFocus();
5958

60-
userEvent.type(screen.getByText('Primary'), '{arrowdown}', {
61-
skipClick: true,
62-
});
59+
fireEvent(screen.getByText('Primary'), new KeyboardEvent('keydown', {
60+
key: 'ArrowDown',
61+
bubbles: true,
62+
cancelable: true,
63+
}));
6364

6465
expect(screen.getByText('Item 1')).toHaveFocus();
6566
});
66-
*/
6767

6868
it('Sets isOpen to true after pressing enter while focused on the menu button', () => {
6969
render(<TestComponent />);
@@ -106,60 +106,101 @@ it('Sets isOpen to false after clicking a menu item that calls the state change
106106
expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('false');
107107
});
108108

109-
/*
110109
it('Moves the focus to the next element in the menu after pressing the down arrow', () => {
111-
const component = render(<TestComponent />);
112-
const button = component.find('#menu-button');
113-
const firstMenuItem = component.find('#menu-item-1');
114-
const secondMenuItem = component.find('#menu-item-2');
110+
render(<TestComponent />);
115111

116-
button.getDOMNode<HTMLButtonElement>().focus();
117-
button.simulate('keydown', { key: 'Enter' });
118-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
119-
expect(document.activeElement?.id).toBe('menu-item-2');
112+
userEvent.tab();
120113

121-
secondMenuItem.simulate('keydown', { key: 'ArrowDown' });
122-
expect(document.activeElement?.id).toBe('menu-item-3');
114+
userEvent.type(screen.getByText('Primary'), '{enter}', {
115+
skipClick: true,
116+
});
117+
118+
expect(screen.getByText('Item 1')).toHaveFocus();
119+
120+
fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
121+
key: 'ArrowDown',
122+
bubbles: true,
123+
cancelable: true,
124+
}));
125+
126+
expect(screen.getByText('Item 2')).toHaveFocus();
123127
});
124128

125129
it('Moves the focus to the previous element in the menu after pressing the up arrow', () => {
126-
const component = render(<TestComponent />);
127-
const button = component.find('#menu-button');
128-
const firstMenuItem = component.find('#menu-item-1');
129-
const secondMenuItem = component.find('#menu-item-2');
130+
render(<TestComponent />);
131+
132+
userEvent.tab();
133+
134+
userEvent.type(screen.getByText('Primary'), '{enter}', {
135+
skipClick: true,
136+
});
137+
138+
expect(screen.getByText('Item 1')).toHaveFocus();
130139

131-
button.getDOMNode<HTMLButtonElement>().focus();
132-
button.simulate('keydown', { key: 'Enter' });
133-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
140+
fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
141+
key: 'ArrowDown',
142+
bubbles: true,
143+
cancelable: true,
144+
}));
145+
146+
expect(screen.getByText('Item 2')).toHaveFocus();
134147

135-
secondMenuItem.simulate('keydown', { key: 'ArrowUp' });
136-
expect(document.activeElement?.id).toBe('menu-item-1');
148+
fireEvent(screen.getByText('Item 2'), new KeyboardEvent('keydown', {
149+
key: 'ArrowUp',
150+
bubbles: true,
151+
cancelable: true,
152+
}));
153+
154+
expect(screen.getByText('Item 1')).toHaveFocus();
137155
});
138156

139157
it('Wraps the focus to the last element when pressing the up arrow at the beginning of the menu', () => {
140-
const component = render(<TestComponent />);
141-
const button = component.find('#menu-button');
142-
const firstMenuItem = component.find('#menu-item-1');
158+
render(<TestComponent />);
143159

144-
button.getDOMNode<HTMLButtonElement>().focus();
145-
button.simulate('keydown', { key: 'Enter' });
146-
firstMenuItem.simulate('keydown', { key: 'ArrowUp' });
147-
expect(document.activeElement?.id).toBe('menu-item-3');
160+
userEvent.tab();
161+
162+
userEvent.type(screen.getByText('Primary'), '{enter}', {
163+
skipClick: true,
164+
});
165+
166+
expect(screen.getByText('Item 1')).toHaveFocus();
167+
168+
fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
169+
key: 'ArrowUp',
170+
bubbles: true,
171+
cancelable: true,
172+
}));
173+
174+
expect(screen.getByText('Item 3')).toHaveFocus();
148175
});
149176

150177
it('Wraps the focus to the first element when pressing the down arrow at the end of the menu', () => {
151-
const component = render(<TestComponent />);
152-
const button = component.find('#menu-button');
153-
const firstMenuItem = component.find('#menu-item-1');
178+
render(<TestComponent />);
154179

155-
button.getDOMNode<HTMLButtonElement>().focus();
156-
button.simulate('keydown', { key: 'Enter' });
157-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
158-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
159-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
160-
expect(document.activeElement?.id).toBe('menu-item-1');
180+
userEvent.tab();
181+
182+
userEvent.type(screen.getByText('Primary'), '{enter}', {
183+
skipClick: true,
184+
});
185+
186+
expect(screen.getByText('Item 1')).toHaveFocus();
187+
188+
fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
189+
key: 'ArrowUp',
190+
bubbles: true,
191+
cancelable: true,
192+
}));
193+
194+
expect(screen.getByText('Item 3')).toHaveFocus();
195+
196+
fireEvent(screen.getByText('Item 3'), new KeyboardEvent('keydown', {
197+
key: 'ArrowDown',
198+
bubbles: true,
199+
cancelable: true,
200+
}));
201+
202+
expect(screen.getByText('Item 1')).toHaveFocus();
161203
});
162-
*/
163204

164205
it('Sets isOpen to false after pressing escape while focused on a menu item', () => {
165206
render(<TestComponent />);
@@ -234,22 +275,36 @@ it('Adds properties to items added after mount', () => {
234275
expect(screen.getByText('Item 4')).toHaveAttribute('role', 'menuitem');
235276
});
236277

237-
/*
238278
it('Can navigate to a dynamically-added item', () => {
239-
const component = render(<TestComponent />);
240-
const addItemButton = component.find('#add-item');
241-
const menuButton = component.find('#menu-button');
242-
const firstMenuItem = component.find('#menu-item-1');
243-
244-
addItemButton.simulate('click');
279+
render(<TestComponent />);
245280

246-
menuButton.getDOMNode<HTMLButtonElement>().focus();
247-
menuButton.simulate('keydown', { key: 'Enter' });
281+
userEvent.click(screen.getByText('Add Item'));
248282

249-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
250-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
251-
firstMenuItem.simulate('keydown', { key: 'ArrowDown' });
283+
userEvent.click(screen.getByText('Primary'));
252284

253-
expect(document.activeElement?.id).toBe('menu-item-4');
285+
fireEvent(screen.getByText('Primary'), new KeyboardEvent('keydown', {
286+
key: 'ArrowDown',
287+
bubbles: true,
288+
cancelable: true,
289+
}));
290+
291+
fireEvent(screen.getByText('Item 1'), new KeyboardEvent('keydown', {
292+
key: 'ArrowDown',
293+
bubbles: true,
294+
cancelable: true,
295+
}));
296+
297+
fireEvent(screen.getByText('Item 2'), new KeyboardEvent('keydown', {
298+
key: 'ArrowDown',
299+
bubbles: true,
300+
cancelable: true,
301+
}));
302+
303+
fireEvent(screen.getByText('Item 3'), new KeyboardEvent('keydown', {
304+
key: 'ArrowDown',
305+
bubbles: true,
306+
cancelable: true,
307+
}));
308+
309+
expect(screen.getByText('Item 4')).toHaveFocus();
254310
});
255-
*/

0 commit comments

Comments
 (0)