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