Feat/revamp member profile page

frontend/__tests__/a11y/components/ContributionHeatmap.a11y.test.tsx

@@ -78,7 +78,7 @@ describe.each([
   it('should not have any accessibility violations', async () => {
     const { container } = render(<ContributionHeatmap {...defaultProps} />)
 
-    await screen.findByTestId('mock-heatmap-chart')
+    await screen.findAllByTestId('mock-heatmap-chart')
 
     const results = await axe(container)
 

frontend/__tests__/a11y/components/RepositoryCard.a11y.test.tsx

@@ -47,7 +47,7 @@ describe.each([
   })
 
   it('should not have any accessibility violations when expanded', async () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+    const repositories = Array.from({ length: 7 }, (_, i) => createMockRepository(i))
     const { container } = render(<RepositoryCard repositories={repositories} />)
 
     const showMoreButton = screen.getByRole('button', { name: /show more/i })

frontend/__tests__/unit/components/InfoBlock.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 import millify from 'millify'
 import React from 'react'
-import { FaUser, FaStar, FaCode } from 'react-icons/fa6'
+import { FaUser, FaStar } from 'react-icons/fa6'
 import { pluralize } from 'utils/pluralize'
 import InfoBlock from 'components/InfoBlock'
 
@@ -73,37 +73,16 @@ describe('InfoBlock Component', () => {
             unit="contributor"
             pluralizedName="contributors"
             precision={2}
-            label="Team Members"
             className="custom-class"
           />
         )
 
         expect(screen.getByTestId('icon-star')).toBeInTheDocument()
-        expect(screen.getByText('Team Members')).toBeInTheDocument()
         expect(screen.getByText('1.5k contributors')).toBeInTheDocument()
       })
     })
 
     describe('Conditional rendering logic', () => {
-      it('should show label when provided', () => {
-        mockMillify.mockReturnValue('50')
-        mockPluralize.mockReturnValue('projects')
-
-        render(<InfoBlock icon={FaCode} value={50} label="Active Projects" />)
-
-        expect(screen.getByText('Active Projects')).toBeInTheDocument()
-        expect(screen.getByText('Active Projects')).toHaveClass('text-sm', 'font-medium')
-      })
-
-      it('should not show label when not provided', () => {
-        mockMillify.mockReturnValue('50')
-        mockPluralize.mockReturnValue('projects')
-
-        render(<InfoBlock icon={FaCode} value={50} />)
-
-        expect(screen.queryByText('Active Projects')).not.toBeInTheDocument()
-      })
-
       it('should show "No" prefix when value is 0', () => {
         mockMillify.mockReturnValue('0')
         mockPluralize.mockReturnValue('items')
@@ -233,20 +212,6 @@ describe('InfoBlock Component', () => {
     })
 
     describe('Default values and fallbacks', () => {
-      it('should not render a label element when label prop is not provided', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('items')
-
-        render(<InfoBlock icon={FaUser} value={100} />)
-
-        // Verify only the formatted value is rendered, no label
-        expect(screen.getByText('100 items')).toBeInTheDocument()
-
-        // Verify no element with label styling exists
-        const labelElements = document.querySelectorAll('.text-sm.font-medium')
-        expect(labelElements).toHaveLength(0)
-      })
-
       it('should use empty string as default className', () => {
         mockMillify.mockReturnValue('100')
         mockPluralize.mockReturnValue('items')
@@ -286,16 +251,6 @@ describe('InfoBlock Component', () => {
         expect(screen.getByText('2.5k stars')).toBeInTheDocument()
       })
 
-      it('should render label with correct styling', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('repos')
-
-        render(<InfoBlock icon={FaCode} value={100} label="Repositories" />)
-
-        const label = screen.getByText('Repositories')
-        expect(label).toHaveClass('text-sm', 'font-medium')
-      })
-
       it('should render tooltip content correctly for positive values', () => {
         mockMillify.mockReturnValue('1.5k')
         mockPluralize.mockReturnValue('contributors')
@@ -379,10 +334,10 @@ describe('InfoBlock Component', () => {
         expect(wrapper).toHaveClass('flex')
 
         const icon = screen.getByTestId('icon-user')
-        expect(icon).toHaveClass('mr-3', 'mt-1', 'w-5')
+        expect(icon).toHaveClass('w-5', 'text-gray-500')
 
         const contentDiv = wrapper.children[1] as HTMLElement
-        expect(contentDiv.children[0]).toHaveClass('text-sm', 'md:text-base')
+        expect(contentDiv).toHaveClass('text-base', 'text-gray-600')
       })
 
       it('should apply custom className correctly', () => {
@@ -404,20 +359,7 @@ describe('InfoBlock Component', () => {
         render(<InfoBlock icon={FaUser} value={100} />)
 
         const icon = screen.getByTestId('icon-user')
-        expect(icon).toHaveClass('mr-3', 'mt-1', 'w-5')
-      })
-
-      it('should have correct text container styling', () => {
-        mockMillify.mockReturnValue('100')
-        mockPluralize.mockReturnValue('items')
-
-        render(<InfoBlock icon={FaUser} value={100} label="Test Label" />)
-
-        const textContainer = screen.getByText('100 items').closest('div')
-        expect(textContainer).toHaveClass('text-sm', 'md:text-base')
-
-        const label = screen.getByText('Test Label')
-        expect(label).toHaveClass('text-sm', 'font-medium')
+        expect(icon).toHaveClass('w-5', 'text-gray-500')
       })
     })
 

frontend/__tests__/unit/components/Milestones.test.tsx

@@ -193,7 +193,6 @@ describe('Milestones', () => {
     render(<Milestones data={[milestone]} />)
 
     expect(screen.getByText('Jan 1, 2023')).toBeInTheDocument()
-    expect(screen.getByText('10 closed')).toBeInTheDocument()
     expect(screen.getByText('5 open')).toBeInTheDocument()
     expect(screen.getByTestId('truncated-text')).toHaveTextContent('awesome-repo')
   })
@@ -246,17 +245,13 @@ describe('Milestones', () => {
     expect(screen.getByTestId('milestone-0')).toBeInTheDocument()
     expect(screen.getByTestId('milestone-1')).toBeInTheDocument()
     expect(screen.getByTestId('milestone-2')).toBeInTheDocument()
-    expect(screen.getByText('5 closed')).toBeInTheDocument()
-    expect(screen.getByText('10 closed')).toBeInTheDocument()
-    expect(screen.getByText('15 closed')).toBeInTheDocument()
   })
 
   it('handles edge case with zero counts', () => {
     render(
       <Milestones data={[createMockMilestone({ closedIssuesCount: 0, openIssuesCount: 0 })]} />
     )
 
-    expect(screen.getByText('0 closed')).toBeInTheDocument()
     expect(screen.getByText('0 open')).toBeInTheDocument()
   })
 
@@ -265,7 +260,6 @@ describe('Milestones', () => {
       <Milestones data={[createMockMilestone({ closedIssuesCount: 999, openIssuesCount: 1000 })]} />
     )
 
-    expect(screen.getByText('999 closed')).toBeInTheDocument()
     expect(screen.getByText('1000 open')).toBeInTheDocument()
   })
 

frontend/__tests__/unit/components/RecentRelease.test.tsx

@@ -382,10 +382,6 @@ describe('RecentReleases Component', () => {
     })
 
     // Check for main card structure - look for the card wrapper
-    const cardElement = container.querySelector(
-      String.raw`.mb-4.w-full.rounded-lg.bg-gray-200.p-4.dark\:bg-gray-700`
-    )
-    expect(cardElement).toBeInTheDocument()
 
     // Check for proper grid layout
     const gridElement = container.querySelector('.grid')

frontend/__tests__/unit/components/RepositoryCard.test.tsx

@@ -82,65 +82,67 @@ describe('RepositoryCard', () => {
     expect(container.querySelector('.grid')).toBeNull()
   })
 
-  it('shows first 4 repositories initially when there are more than 4', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('shows first 6 repositories initially when there are more than 6', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
-    expect(screen.getByText('Repository 3')).toBeInTheDocument()
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
-    expect(screen.queryByText('Repository 5')).not.toBeInTheDocument()
+    expect(screen.getByText('Repository 5')).toBeInTheDocument()
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 7')).not.toBeInTheDocument()
   })
 
-  it('shows all repositories when there are 4 or fewer', () => {
-    const repositories = Array.from({ length: 3 }, (_, i) => createMockRepository(i))
+  it('shows all repositories when there are 6 or fewer', () => {
+    const repositories = Array.from({ length: 5 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
     expect(screen.getByText('Repository 1')).toBeInTheDocument()
     expect(screen.getByText('Repository 2')).toBeInTheDocument()
+    expect(screen.getByText('Repository 3')).toBeInTheDocument()
+    expect(screen.getByText('Repository 4')).toBeInTheDocument()
   })
 
-  it('displays ShowMoreButton when there are more than 4 repositories', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('displays ShowMoreButton when there are more than 6 repositories', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.getByRole('button', { name: /Show/ })).toBeInTheDocument()
   })
 
-  it('does not display ShowMoreButton when there are 4 or fewer repositories', () => {
-    const repositories = Array.from({ length: 4 }, (_, i) => createMockRepository(i))
+  it('does not display ShowMoreButton when there are 6 or fewer repositories', () => {
+    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
     expect(screen.queryByRole('button', { name: /Show/ })).not.toBeInTheDocument()
   })
 
-  it('toggles between showing 4 and all repositories when clicked', () => {
-    const repositories = Array.from({ length: 6 }, (_, i) => createMockRepository(i))
+  it('toggles between showing 6 and all repositories when clicked', () => {
+    const repositories = Array.from({ length: 8 }, (_, i) => createMockRepository(i))
 
     render(<RepositoryCard repositories={repositories} />)
 
-    // Initially shows first 4
+    // Initially shows first 6
     expect(screen.getByText('Repository 0')).toBeInTheDocument()
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
 
     // Click show more
     fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
     // Now shows all repositories
-    expect(screen.getByText('Repository 4')).toBeInTheDocument()
-    expect(screen.getByText('Repository 5')).toBeInTheDocument()
+    expect(screen.getByText('Repository 6')).toBeInTheDocument()
+    expect(screen.getByText('Repository 7')).toBeInTheDocument()
 
     // Click show less
     fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-    // Back to showing first 4
-    expect(screen.queryByText('Repository 4')).not.toBeInTheDocument()
-    expect(screen.queryByText('Repository 5')).not.toBeInTheDocument()
+    // Back to showing first 6
+    expect(screen.queryByText('Repository 6')).not.toBeInTheDocument()
+    expect(screen.queryByText('Repository 7')).not.toBeInTheDocument()
   })
 
   it('renders repository items with correct information', () => {
@@ -311,22 +313,22 @@ describe('RepositoryCard', () => {
     })
 
     it('archived badge persists when toggling show more/less', () => {
-      const repositories = Array.from({ length: 6 }, (_, i) => ({
+      const repositories = Array.from({ length: 8 }, (_, i) => ({
         ...createMockRepository(i),
         isArchived: i % 2 === 0,
       }))
 
       render(<RepositoryCard repositories={repositories} />)
 
-      expect(screen.getAllByText('Archived')).toHaveLength(2)
+      expect(screen.getAllByText('Archived')).toHaveLength(3)
 
       fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-      expect(screen.getAllByText('Archived')).toHaveLength(3)
+      expect(screen.getAllByText('Archived')).toHaveLength(4)
 
       fireEvent.click(screen.getByRole('button', { name: /Show/ }))
 
-      expect(screen.getAllByText('Archived')).toHaveLength(2)
+      expect(screen.getAllByText('Archived')).toHaveLength(3)
     })
 
     it('clicking archived repository still navigates correctly', () => {

frontend/__tests__/unit/pages/Home.test.tsx

@@ -213,7 +213,6 @@ describe('Home', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })

frontend/__tests__/unit/pages/OrganizationDetails.test.tsx

@@ -118,7 +118,6 @@ describe('OrganizationDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })

frontend/__tests__/unit/pages/ProjectDetails.test.tsx

@@ -260,7 +260,6 @@ describe('ProjectDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })

frontend/__tests__/unit/pages/RepositoryDetails.test.tsx

@@ -188,7 +188,6 @@ describe('RepositoryDetailsPage', () => {
         expect(screen.getByText(milestone.title)).toBeInTheDocument()
         expect(screen.getByText(milestone.repositoryName)).toBeInTheDocument()
         expect(screen.getByText(`${milestone.openIssuesCount} open`)).toBeInTheDocument()
-        expect(screen.getByText(`${milestone.closedIssuesCount} closed`)).toBeInTheDocument()
       }
     })
   })