test: validate drawer toggling

src/components/Shell/Shell.test.tsx

@@ -0,0 +1,38 @@
+import { waitFor, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter as Router } from 'react-router-dom'
+
+import { Shell, ShellProps } from './Shell'
+
+const ShellStub = (overrides: ShellProps = {}) => {
+  return (
+    <Router>
+      <Shell {...overrides} />
+    </Router>
+  )
+}
+
+describe('Shell', () => {
+  describe('menu drawer', () => {
+    test('can be opened', () => {
+      render(<ShellStub />)
+      const menuButton = screen.getByLabelText('Open menu')
+      userEvent.click(menuButton)
+      const navigation = screen.getByRole('navigation')
+      expect(navigation).toBeVisible()
+    })
+
+    test('can be closed', async () => {
+      render(<ShellStub />)
+      const menuButton = screen.getByLabelText('Open menu')
+      userEvent.click(menuButton)
+      const closeMenu = screen.getByLabelText('Close menu')
+      userEvent.click(closeMenu)
+      const navigation = screen.getByRole('navigation')
+
+      await waitFor(() => {
+        expect(navigation).not.toBeVisible()
+      })
+    })
+  })
+})

src/components/Shell/Shell.tsx

@@ -35,7 +35,7 @@ import Home from '@mui/icons-material/Home'
 import { ShellContext } from 'ShellContext'
 import { AlertOptions } from 'models/shell'
 
-interface ShellProps extends PropsWithChildren {}
+export interface ShellProps extends PropsWithChildren {}
 
 const drawerWidth = 240
 
@@ -185,7 +185,7 @@ export const Shell = ({ children }: ShellProps) => {
                 size="large"
                 edge="start"
                 color="inherit"
-                aria-label="menu"
+                aria-label="Open menu"
                 sx={{ mr: 2, ...(isDrawerOpen && { display: 'none' }) }}
                 onClick={handleDrawerOpen}
               >
@@ -213,7 +213,7 @@ export const Shell = ({ children }: ShellProps) => {
             open={isDrawerOpen}
           >
             <DrawerHeader>
-              <IconButton onClick={handleDrawerClose}>
+              <IconButton onClick={handleDrawerClose} aria-label="Close menu">
                 {theme.direction === 'ltr' ? (
                   <ChevronLeftIcon />
                 ) : (
@@ -222,7 +222,7 @@ export const Shell = ({ children }: ShellProps) => {
               </IconButton>
             </DrawerHeader>
             <Divider />
-            <List>
+            <List role="navigation">
               <Link to="/">
                 <ListItem disablePadding>
                   <ListItemButton>