diff --git a/src/components/Shell/Shell.test.tsx b/src/components/Shell/Shell.test.tsx new file mode 100644 index 0000000..866083f --- /dev/null +++ b/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 ( + + + + ) +} + +describe('Shell', () => { + describe('menu drawer', () => { + test('can be opened', () => { + render() + const menuButton = screen.getByLabelText('Open menu') + userEvent.click(menuButton) + const navigation = screen.getByRole('navigation') + expect(navigation).toBeVisible() + }) + + test('can be closed', async () => { + render() + 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() + }) + }) + }) +}) diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx index 9f48cf5..db08ffa 100644 --- a/src/components/Shell/Shell.tsx +++ b/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} > - + {theme.direction === 'ltr' ? ( ) : ( @@ -222,7 +222,7 @@ export const Shell = ({ children }: ShellProps) => { - +