test(web): Select

web/src/components/__tests__/Select.test.jsx

@@ -0,0 +1,34 @@
+import { h } from 'preact';
+import Select from '../Select';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('Select', () => {
+ test('on focus, shows a menu', async () => {
+ const handleChange = jest.fn();
+ render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} />);
+
+ expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+ fireEvent.click(screen.getByRole('textbox'));
+ expect(screen.queryByRole('listbox')).toBeInTheDocument();
+ expect(screen.queryByRole('option', { name: 'tacos' })).toBeInTheDocument();
+ expect(screen.queryByRole('option', { name: 'burritos' })).toBeInTheDocument();
+
+ fireEvent.click(screen.queryByRole('option', { name: 'burritos' }));
+ expect(handleChange).toHaveBeenCalledWith('burritos', 'burritos');
+ });
+
+ test('allows keyboard navigation', async () => {
+ const handleChange = jest.fn();
+ render(<Select label="Tacos" onChange={handleChange} options={['tacos', 'burritos']} />);
+
+ expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+ const input = screen.getByRole('textbox');
+ fireEvent.focus(input);
+ fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+ expect(screen.queryByRole('listbox')).toBeInTheDocument();
+
+ fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
+ fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+ expect(handleChange).toHaveBeenCalledWith('burritos', 'burritos');
+ });
+});