test(web): Menu, MenuItem

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);
+  });
+});