From a7e5b9978fc29171080e70c3926f68185ece3729 Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Sun, 14 Feb 2021 08:48:41 -0800
Subject: [PATCH] test(web): Select

---
 web/src/components/__tests__/Select.test.jsx | 34 ++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 web/src/components/__tests__/Select.test.jsx

diff --git a/web/src/components/__tests__/Select.test.jsx b/web/src/components/__tests__/Select.test.jsx
new file mode 100644
index 000000000..5425025cf
--- /dev/null
+++ b/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');
+  });
+});