From fd856f8b91fb5eb99c57f022f1e1cde9e0f99119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Wed, 17 Jul 2024 23:18:38 +0900
Subject: [PATCH] fix e2e tests

---
 e2e/team.spec.ts                             | 11 ++++++++---
 src/components/SideDrawer/DrawerContents.tsx |  9 ++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/e2e/team.spec.ts b/e2e/team.spec.ts
index 23e4912..1494877 100644
--- a/e2e/team.spec.ts
+++ b/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()
diff --git a/src/components/SideDrawer/DrawerContents.tsx b/src/components/SideDrawer/DrawerContents.tsx
index 63a00e8..7f85f4b 100644
--- a/src/components/SideDrawer/DrawerContents.tsx
+++ b/src/components/SideDrawer/DrawerContents.tsx
@@ -19,6 +19,11 @@ interface DrawerContentsProps {
 const DrawerContents: FC<DrawerContentsProps> = ({ closeDrawer }) => {
     const theme = useTheme()
     const { t } = useTranslation()
+
+    const closeButton = <IconButton onClick={closeDrawer} aria-label='close-button'>
+        <CloseIcon />
+    </IconButton>
+
     let navList = <></>
     if (useMediaQuery(theme.breakpoints.down('sm'))) {
         navList = (<>
@@ -26,9 +31,7 @@ const DrawerContents: FC<DrawerContentsProps> = ({ closeDrawer }) => {
                 <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>
+                    {closeButton}
                 </Stack>
             </ListItem>
             <ListItem>