From ece6c1203c090af66266de6457725042c5cff56d Mon Sep 17 00:00:00 2001
From: Paul Armstrong <paul@spaceyak.com>
Date: Fri, 12 Feb 2021 14:11:15 -0800
Subject: [PATCH] test(web): Menu, MenuItem

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

diff --git a/web/src/components/__tests__/Menu.test.jsx b/web/src/components/__tests__/Menu.test.jsx
new file mode 100644
index 000000000..208adc997
--- /dev/null
+++ b/web/src/components/__tests__/Menu.test.jsx
@@ -0,0 +1,52 @@
+import { h } from 'preact';
+import Menu, { MenuItem } from '../Menu';
+import { fireEvent, render, screen } from '@testing-library/preact';
+import { useRef } from 'preact/hooks';
+
+describe('Menu', () => {
+  test('renders a dialog', async () => {
+    function Test() {
+      const relativeRef = useRef();
+      return (
+        <div>
+          <div ref={relativeRef} />
+          <Menu relativeTo={relativeRef} />
+        </div>
+      );
+    }
+
+    render(<Test />);
+    expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  });
+});
+
+describe('MenuItem', () => {
+  test('renders a menu item', async () => {
+    render(<MenuItem label="Tacos" />);
+    expect(screen.queryByRole('option')).toHaveTextContent('Tacos');
+  });
+
+  test('calls onSelect when clicked', async () => {
+    const handleSelect = jest.fn();
+    render(<MenuItem label="Tacos" onSelect={handleSelect} value="tacos-value" />);
+    fireEvent.click(screen.queryByRole('option'));
+    expect(handleSelect).toHaveBeenCalledWith('tacos-value', 'Tacos');
+  });
+
+  test('renders and icon when passed', async () => {
+    function Icon() {
+      return <div data-testid="icon" />;
+    }
+    render(<MenuItem icon={Icon} label="Tacos" />);
+    expect(screen.queryByTestId('icon')).toBeInTheDocument();
+  });
+
+  test('applies different styles when focused', async () => {
+    const { rerender } = render(<MenuItem label="Tacos" />);
+    const classes = Array.from(screen.queryByRole('option').classList);
+    rerender(<MenuItem label="Tacos" focus />);
+    const focusClasses = Array.from(screen.queryByRole('option').classList);
+
+    expect(focusClasses.length).toBeGreaterThan(classes.length);
+  });
+});