test(web): NavigationDrawer

web/src/components/NavigationDrawer.jsx

@@ -12,9 +12,10 @@ export default function NavigationDrawer({ children, header }) {
 
   return (
     <Fragment>
-      {showDrawer ? <div key="scrim" className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
+      {showDrawer ? <div data-testid="scrim" key="scrim" className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
       <div
         key="drawer"
+        data-testid="drawer"
         className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform ${
           !showDrawer ? '-translate-x-full lg:translate-x-0' : 'translate-x-0'
         } transition-transform duration-300`}

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

@@ -0,0 +1,61 @@
+import { h } from 'preact';
+import * as Context from '../../context';
+import NavigationDrawer, { Destination } from '../NavigationDrawer';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('NavigationDrawer', () => {
+  let useDrawer, setShowDrawer;
+
+  beforeEach(() => {
+    setShowDrawer = jest.fn();
+    useDrawer = jest.spyOn(Context, 'useDrawer').mockImplementation(() => ({ showDrawer: true, setShowDrawer }));
+  });
+
+  test('renders a navigation drawer', async () => {
+    render(
+      <NavigationDrawer>
+        <div data-testid="children">Hello</div>
+      </NavigationDrawer>
+    );
+    expect(screen.queryByTestId('children')).toHaveTextContent('Hello');
+    expect(screen.queryByTestId('drawer').classList.contains('translate-x-full')).toBe(false);
+    expect(screen.queryByTestId('drawer').classList.contains('translate-x-0')).toBe(true);
+  });
+
+  test('is dismissed when the scrim is clicked', async () => {
+    useDrawer
+      .mockReturnValueOnce({ showDrawer: true, setShowDrawer })
+      .mockReturnValueOnce({ showDrawer: false, setShowDrawer });
+    render(<NavigationDrawer />);
+    fireEvent.click(screen.queryByTestId('scrim'));
+    expect(setShowDrawer).toHaveBeenCalledWith(false);
+  });
+
+  test('is not visible when not set to show', async () => {
+    useDrawer.mockReturnValue({ showDrawer: false, setShowDrawer });
+    render(<NavigationDrawer />);
+    expect(screen.queryByTestId('scrim')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('drawer').classList.contains('-translate-x-full')).toBe(true);
+    expect(screen.queryByTestId('drawer').classList.contains('translate-x-0')).toBe(false);
+  });
+});
+
+describe('Destination', () => {
+  let setShowDrawer;
+
+  beforeEach(() => {
+    setShowDrawer = jest.fn();
+    jest.spyOn(Context, 'useDrawer').mockImplementation(() => ({ showDrawer: true, setShowDrawer }));
+  });
+
+  test('dismisses the drawer moments after being clicked', async () => {
+    render(
+      <NavigationDrawer>
+        <Destination href="/tacos" text="Tacos" />
+      </NavigationDrawer>
+    );
+    fireEvent.click(screen.queryByText('Tacos'));
+    jest.runAllTimers();
+    expect(setShowDrawer).toHaveBeenCalledWith(false);
+  });
+});