56 close button fix tests (#57)

e2e/team.spec.ts

@@ -45,7 +45,7 @@ test('shows the team in English', async ({ page }) => {
     await expect(annLink).toHaveAttribute('target', '_blank')
 })
 
-test('shows the team in Japanese', async ({ page }) => {
+test('shows the team in Japanese', async ({ page, viewport }) => {
     await page.goto('/#/team')
 
     // switch locale to Japanese
@@ -56,8 +56,13 @@ test('shows the team in Japanese', async ({ page }) => {
 
     const teamContainer = page.getByLabel('team-container')
 
-    // click off to close sidebar
-    await teamContainer.click({ force: true })
+    // close the sidebar
+    if (viewport && viewport.width < 600) {
+        const closeButton = page.getByLabel('close-button')
+        await closeButton.click()
+    } else {
+        await teamContainer.click({ force: true })
+    }
 
     const heading = teamContainer.getByText('✨ リーダーシップ・チーム ✨')
     await expect(heading).toBeVisible()

playwright.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
     /* Retry on CI only */
-    retries: process.env.CI ? 2 : 0,
+    retries: process.env.CI ? 2 : 1,
     /* Opt out of parallel tests on CI. */
     workers: process.env.CI ? 1 : undefined,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
@@ -29,6 +29,8 @@ export default defineConfig({
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: 'on-first-retry',
     },
+    outputDir: './playwright-report',
+
 
     /* Configure projects for major browsers */
     projects: [

src/components/SideDrawer/DrawerContents.tsx

@@ -3,20 +3,34 @@ import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+import Stack from '@mui/material/Stack'
 import { useTheme } from '@mui/material/styles'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import StyledNavLink from '../StyledNavLink/StyledNavLink'
 import LocaleToggle from '../LocaleToggle/LocaleToggle'
 import { useTranslation } from 'react-i18next'
 
-const DrawerContents: FC = () => {
+interface DrawerContentsProps {
+    closeDrawer: () => void
+}
+
+const DrawerContents: FC<DrawerContentsProps> = ({ closeDrawer }) => {
     const theme = useTheme()
     const { t } = useTranslation()
+
     let navList = <></>
     if (useMediaQuery(theme.breakpoints.down('sm'))) {
         navList = (<>
             <ListItem>
-                <StyledNavLink to='/'>Home</StyledNavLink>
+                <Stack direction='row' sx={{ width: '100%', m: 0, p: 0 }}>
+                    <StyledNavLink to='/'>Home</StyledNavLink>
+                    <Box sx={{ display: 'flex-grow', width: '100%' }} />
+                    <IconButton onClick={closeDrawer} aria-label='close-button'>
+                        <CloseIcon />
+                    </IconButton>
+                </Stack>
             </ListItem>
             <ListItem>
                 <StyledNavLink to='/team'>{t('sidebar.team')}</StyledNavLink>
@@ -28,7 +42,7 @@ const DrawerContents: FC = () => {
         </>)
     }
 
-    return <Box sx={{ width: 300 }}>
+    return <Box sx={{ width: 300 }} aria-label='drawer-contents'>
         <List>
             {navList}
             <ListItem>

src/components/SideDrawer/SideDrawer.tsx

@@ -37,7 +37,7 @@ const SideDrawer: FC = () => {
             onClose={toggleDrawer(false)}
             aria-label="drawer"
         >
-            <DrawerContents />
+            <DrawerContents closeDrawer={() => { setOpen(false) }} />
         </SwipeableDrawer>
     </>
 }

src/components/SideDrawer/__test__/TestDrawerContents.test.tsx

@@ -1,14 +1,34 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { render } from '@/tests/customRender'
 import { screen } from '@testing-library/react'
 import DrawerContents from '../DrawerContents'
+import userEvent from '@testing-library/user-event'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+vi.mock('@mui/material/useMediaQuery', () => {
+    return {
+        default: vi.fn()
+    }
+})
 
 describe('DrawerContents', () => {
     it('should display the DrawerContents', async () => {
-        render(<DrawerContents />)
+        render(<DrawerContents closeDrawer={() => { }} />)
         const japanese = await screen.findByText('日本語')
         expect(japanese).toBeVisible()
     })
 
+    it('should call closeDrawer when clicking x on mobile viewport', async () => {
+        const mock = vi.fn(() => { })
+        const user = userEvent.setup()
+        vi.mocked(useMediaQuery).mockReturnValue(true)
+
+        render(<DrawerContents closeDrawer={mock} />)
+        const closeButton = await screen.findByLabelText('close-button')
+        await user.click(closeButton)
+
+        expect(mock).toHaveBeenCalled()
+    })
+
     it.todo('should show the NavLinks on mobile screens')
 })

src/components/SideDrawer/__test__/TestSideDrawer.test.tsx

@@ -1,10 +1,21 @@
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { render } from '@/tests/customRender'
 import { screen, waitFor } from '@testing-library/react'
 import Box from '@mui/material/Box'
 import Stack from '@mui/material/Stack'
 import SideDrawer from '../SideDrawer'
 import userEvent from '@testing-library/user-event'
+import useMediaQuery from '@mui/material/useMediaQuery'
+
+vi.mock('@mui/material/useMediaQuery', () => {
+    return {
+        default: vi.fn()
+    }
+})
+
+beforeEach(() => {
+    vi.resetAllMocks()
+})
 
 describe('SideDrawer', () => {
     it('should initially render the Drawer closed', async () => {
@@ -61,4 +72,24 @@ describe('SideDrawer', () => {
             expect(drawer).not.toBeVisible()
         })
     })
+
+    it('should close the Drawer when clicking the close icon on mobile view', async () => {
+        const user = userEvent.setup()
+        vi.mocked(useMediaQuery).mockReturnValue(true)
+
+        render(<SideDrawer />)
+
+        const button = await screen.findByLabelText('drawer-toggle-button')
+        await user.click(button)
+
+        const drawerContents = await screen.findByLabelText('drawer-contents')
+        expect(drawerContents).toBeVisible()
+
+        const closeButton = await screen.findByLabelText('close-button')
+        await user.click(closeButton)
+
+        await waitFor(() => {
+            expect(drawerContents).not.toBeVisible()
+        })
+    })
 })