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