improve team mamber card and add tests

src/components/OptionalLinkWrapper/OptionalLinkWrapper.tsx

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from 'react'
+
+interface OptionalLinkWrapperProps {
+    url?: string
+    children: ReactNode
+}
+
+/**
+ * If url is falsy, returns children. If url is truthy, returns the component wrapped in a link
+ */
+const OptionalLinkWrapper: FC<OptionalLinkWrapperProps> = ({ url, children }) => {
+    if (url) {
+        return <a href={url} target='_blank' rel="noreferrer">
+            {children}
+        </a>
+    }
+    return children
+}
+
+export default OptionalLinkWrapper

src/components/OptionalLinkWrapper/__test__/OptionalLinkWrapper.test.tsx

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@/tests/customRender'
+import { screen } from '@testing-library/react'
+import OptionalLinkWrapper from '../OptionalLinkWrapper';
+
+
+describe('OptionalLinkWrapper', () => {
+    const exampleURL = 'https://example.com'
+
+    it('should render the link when URL is set', async () => {
+        render(<OptionalLinkWrapper url={exampleURL}>
+            <span>child</span>
+        </OptionalLinkWrapper>)
+
+        const link = await screen.findByRole('link')
+        expect(link).toHaveAttribute('href', exampleURL)
+
+        const child = await screen.findByText('child')
+        expect(child).toBeVisible()
+    })
+
+    it.each(['', undefined])('should render the child component when URL is %i', async (url: string | undefined) => {
+        render(<OptionalLinkWrapper url={url}>
+            <span>child</span>
+        </OptionalLinkWrapper>)
+
+        const child = await screen.findByText('child')
+        expect(child).toBeVisible()
+
+        const link = screen.queryByRole('link')
+        expect(link).toBeNull()
+    })
+});

src/routes/Team/TeamMemberCard.tsx → src/components/TeamMemberCard/TeamMemberCard.tsx

@@ -5,6 +5,7 @@ import CardMedia from '@mui/material/CardMedia'
 import Typography from '@mui/material/Typography'
 import TeamMember from '@/types/TeamMember'
 import i18next from 'i18next'
+import OptionalLinkWrapper from '../OptionalLinkWrapper/OptionalLinkWrapper';
 
 interface TeamMemberCardProps {
     member: TeamMember
@@ -25,23 +26,24 @@ const TeamMemberCard: FC<TeamMemberCardProps> = ({ member }) => {
         }
     }, [member])
 
+    return <OptionalLinkWrapper url={member.url}>
+        <Card sx={{ height: 420 }}>
+            <CardMedia
+                sx={{ height: 300, width: 300 }}
+                image={member.image}
+                title={name}
+            />
+            <CardContent>
+                <Typography variant='h6'>
+                    {name}
+                </Typography>
+                <Typography variant="subtitle1">
+                    {title}
+                </Typography>
 
-    return <Card sx={{ height: 420 }}>
-        <CardMedia
-            sx={{ height: 300, width: 300 }}
-            image={member.image}
-            title="green iguana"
-        />
-        <CardContent>
-            <Typography variant='h6'>
-                {name}
-            </Typography>
-            <Typography variant="subtitle1">
-                {title}
-            </Typography>
-
-        </CardContent>
-    </Card>
+            </CardContent>
+        </Card>
+    </OptionalLinkWrapper>
 }
 
 export default TeamMemberCard

src/components/TeamMemberCard/__team__/TeamMemberCard.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@/tests/customRender'
+import { screen } from '@testing-library/react'
+import TeamMemberCard from '../TeamMemberCard';
+import TeamMember from '@/types/TeamMember';
+import '@/i18n/config';
+import i18next from 'i18next';
+import { I18nextProvider } from 'react-i18next';
+
+
+describe('TeamMemberCard', () => {
+    const member = {
+        nameEN: 'Alice',
+        nameJA: 'アリス',
+        titleEN: 'Lead',
+        titleJA: 'リード',
+        image: 'example.png',
+        url: 'https://example.com'
+    } as TeamMember
+
+    it('should render a TeamMemberCard in English', async () => {
+        render(<TeamMemberCard member={member} />)
+        const name = await screen.findByText(member.nameEN)
+        expect(name).toBeVisible()
+        const title = await screen.findByText(member.titleEN)
+        expect(title).toBeVisible()
+        const link = await screen.findByRole('link')
+        expect(link).toHaveAttribute('href', member.url)
+        const image = await screen.findByRole('img')
+        expect(image).toBeVisible()
+    })
+
+    it('should render a TeamMemberCard in Japanese', async () => {
+        await i18next.changeLanguage('ja')
+        render(<I18nextProvider i18n={i18next}>
+            <TeamMemberCard member={member} />
+        </I18nextProvider>)
+
+        const name = await screen.findByText(member.nameJA)
+        expect(name).toBeVisible()
+        const title = await screen.findByText(member.titleJA)
+        expect(title).toBeVisible()
+        const link = await screen.findByRole('link')
+        expect(link).toHaveAttribute('href', member.url)
+        const image = await screen.findByRole('img')
+        expect(image).toBeVisible()
+    })
+});

src/routes/Team/Team.tsx

@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
 import TeamMember from '@/types/TeamMember'
-import TeamMemberCard from './TeamMemberCard'
+import TeamMemberCard from '@/components/TeamMemberCard/TeamMemberCard'
 import team from './team.json'
 
 

src/routes/Team/team.json

@@ -4,48 +4,55 @@
         "nameJA": "キルザー·杏",
         "titleEN": "Director",
         "titleJA": "ディレクター",
-        "image": "Ann.png"
+        "image": "Ann.png",
+        "url": "https://annkilzer.net"
     },
     {
         "nameEN": "Paty Cortez",
         "nameJA": "",
         "titleEN": "",
         "titleJA": "",
-        "image": ""
+        "image": "",
+        "url": ""
     },
     {
         "nameEN": "Maria Tenorio",
         "nameJA": "",
         "titleEN": "",
         "titleJA": "",
-        "image": "todo"
+        "image": "todo",
+        "url": ""
     },
     {
         "nameEN": "Krizza Bullecer",
         "nameJA": "",
         "titleEN": "",
         "titleJA": "",
-        "image": "todo"
+        "image": "todo",
+        "url": ""
     },
     {
         "nameEN": "Daria Vazhenina",
         "nameJA": "",
         "titleEN": "",
         "titleJA": "",
-        "image": "todo"
+        "image": "todo",
+        "url": ""
     },
     {
         "nameEN": "Anna Nakayama",
         "nameJA": "",
         "titleEN": "",
         "titleJA": "",
-        "image": "todo"
+        "image": "todo",
+        "url": ""
     },
     {
         "nameEN": "Aidan Fournier",
         "nameJA": "",
         "titleEN": "",
         "titleJA": "",
-        "image": "todo"
+        "image": "todo",
+        "url": ""
     }
 ]

src/types/TeamMember.ts

@@ -4,6 +4,7 @@ type TeamMember = {
     titleEN: string
     titleJA: string
     image: string
+    url: string
 }
 
 export default TeamMember