Implement Breadcrumbs

frontend/__tests__/e2e/helpers/expects.ts

@@ -1,16 +1,16 @@
 import { Page, expect } from '@playwright/test'
 
 export async function expectBreadCrumbsToBeVisible(page: Page, breadcrumbs: string[] = ['Home']) {
-  const breadcrumbsContainer = page.locator('[aria-label="breadcrumb"]')
+  const breadcrumbsContainer = page.locator('nav[role="navigation"][aria-label="breadcrumb"]')
 
-  await expect(breadcrumbsContainer).toBeVisible()
+  await expect(breadcrumbsContainer).toBeVisible({ timeout: 10000 })
   await expect(breadcrumbsContainer).toHaveCount(1)
 
-  for (const breadcrumb of breadcrumbs) {
-    await expect(breadcrumbsContainer.getByText(breadcrumb)).toBeVisible()
-  }
+  const expectedBreadcrumbs = breadcrumbs[0] === 'Home' ? breadcrumbs : ['Home', ...breadcrumbs]
 
-  const allBreadcrumbs = await breadcrumbsContainer.locator('li').allTextContents()
-  const visibleBreadcrumbs = allBreadcrumbs.filter((text) => text.trim() !== '')
-  await expect(visibleBreadcrumbs).toEqual(breadcrumbs)
+  for (const breadcrumb of expectedBreadcrumbs) {
+    await expect(breadcrumbsContainer.getByText(breadcrumb, { exact: true })).toBeVisible({
+      timeout: 5000,
+    })
+  }
 }

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

@@ -1,68 +1,134 @@
 import { render, screen } from '@testing-library/react'
-import { usePathname } from 'next/navigation'
 import BreadCrumbs from 'components/BreadCrumbs'
 import '@testing-library/jest-dom'
 
-jest.mock('next/navigation', () => ({
-  usePathname: jest.fn(),
-}))
+const renderBreadCrumbs = (items = [], ariaLabel = 'breadcrumb') =>
+  render(<BreadCrumbs breadcrumbItems={items} aria-label={ariaLabel} />)
 
-describe('BreadCrumb', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  test('does not render on root path "/"', () => {
-    ;(usePathname as jest.Mock).mockReturnValue('/')
+const sampleItems = [
+  { title: 'Dashboard', path: '/dashboard' },
+  { title: 'Users', path: '/dashboard/users' },
+  { title: 'Profile', path: '/dashboard/users/profile' },
+]
 
-    render(<BreadCrumbs />)
+describe('BreadCrumbs', () => {
+  test('does not render when breadcrumb item is empty', () => {
+    renderBreadCrumbs()
     expect(screen.queryByText('Home')).not.toBeInTheDocument()
   })
 
   test('renders breadcrumb with multiple segments', () => {
-    ;(usePathname as jest.Mock).mockReturnValue('/dashboard/users/profile')
-
-    render(<BreadCrumbs />)
-
+    renderBreadCrumbs(sampleItems)
     expect(screen.getByText('Home')).toBeInTheDocument()
     expect(screen.getByText('Dashboard')).toBeInTheDocument()
     expect(screen.getByText('Users')).toBeInTheDocument()
     expect(screen.getByText('Profile')).toBeInTheDocument()
   })
 
   test('disables the last segment (non-clickable)', () => {
-    ;(usePathname as jest.Mock).mockReturnValue('/settings/account')
-
-    render(<BreadCrumbs />)
-
+    const items = [
+      { title: 'Settings', path: '/settings' },
+      { title: 'Account', path: '/settings/account' },
+    ]
+    renderBreadCrumbs(items)
     const lastSegment = screen.getByText('Account')
     expect(lastSegment).toBeInTheDocument()
-    expect(lastSegment).not.toHaveAttribute('href')
+    expect(lastSegment.closest('a')).toBeNull()
+  })
+
+  test('links have correct path attributes', () => {
+    renderBreadCrumbs(sampleItems)
+    expect(screen.getByText('Home').closest('a')).toHaveAttribute('href', '/')
+    expect(screen.getByText('Dashboard').closest('a')).toHaveAttribute('href', '/dashboard')
+    expect(screen.getByText('Users').closest('a')).toHaveAttribute('href', '/dashboard/users')
+  })
+
+  test('links have hover styles', () => {
+    const items = [
+      { title: 'Dashboard', path: '/dashboard' },
+      { title: 'Users', path: '/dashboard/users' },
+    ]
+    renderBreadCrumbs(items)
+    expect(screen.getByText('Home').closest('a')).toHaveClass(
+      'hover:text-blue-700',
+      'hover:underline'
+    )
+    expect(screen.getByText('Dashboard').closest('a')).toHaveClass(
+      'hover:text-blue-700',
+      'hover:underline'
+    )
   })
 
-  test('links have correct href attributes', () => {
-    ;(usePathname as jest.Mock).mockReturnValue('/dashboard/users/profile')
+  test('has proper accessibility attributes', () => {
+    renderBreadCrumbs(sampleItems)
 
-    render(<BreadCrumbs />)
+    // Check nav element has proper role and aria-label
+    const nav = screen.getAllByRole('navigation')[0]
+    expect(nav).toHaveAttribute('aria-label', 'breadcrumb')
 
+    // Check last item has aria-current="page"
+    const lastItem = screen.getByText('Profile')
+    expect(lastItem).toHaveAttribute('aria-current', 'page')
+
+    // Check Home link has proper aria-label
     const homeLink = screen.getByText('Home').closest('a')
-    const dashboardLink = screen.getByText('Dashboard').closest('a')
-    const usersLink = screen.getByText('Users').closest('a')
+    expect(homeLink).toHaveAttribute('aria-label', 'Go to home page')
+  })
 
-    expect(homeLink).toHaveAttribute('href', '/')
-    expect(dashboardLink).toHaveAttribute('href', '/dashboard')
-    expect(usersLink).toHaveAttribute('href', '/dashboard/users')
+  test('supports custom aria-label', () => {
+    renderBreadCrumbs(sampleItems, 'custom breadcrumb')
+
+    const nav = screen.getAllByRole('navigation')[0]
+    expect(nav).toHaveAttribute('aria-label', 'custom breadcrumb')
   })
 
-  test('links have hover styles', () => {
-    ;(usePathname as jest.Mock).mockReturnValue('/dashboard/users')
+  test('filters out invalid breadcrumb items', () => {
+    const invalidItems = [
+      { title: 'Valid Item', path: '/valid' },
+      { title: '', path: '/invalid' }, // Missing title
+      { title: 'Another Valid', path: '' }, // Missing path
+      { title: 'Valid Again', path: '/valid-again' },
+    ]
 
-    render(<BreadCrumbs />)
+    renderBreadCrumbs(invalidItems)
+
+    // Should only render valid items
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Valid Item')).toBeInTheDocument()
+    expect(screen.getByText('Valid Again')).toBeInTheDocument()
+    expect(screen.queryByText('Another Valid')).not.toBeInTheDocument()
+  })
+
+  test('has focus styles for keyboard navigation', () => {
+    renderBreadCrumbs(sampleItems)
 
     const homeLink = screen.getByText('Home').closest('a')
     const dashboardLink = screen.getByText('Dashboard').closest('a')
 
-    expect(homeLink).toHaveClass('hover:text-blue-700', 'hover:underline')
-    expect(dashboardLink).toHaveClass('hover:text-blue-700', 'hover:underline')
+    expect(homeLink).toHaveClass('focus:outline-none', 'focus:ring-2', 'focus:ring-blue-500')
+    expect(dashboardLink).toHaveClass('focus:outline-none', 'focus:ring-2', 'focus:ring-blue-500')
+  })
+
+  test('separator icon is hidden from screen readers', () => {
+    renderBreadCrumbs(sampleItems)
+
+    // Look for SVG elements with aria-hidden="true"
+    const separators = screen.getAllByRole('img', { hidden: true })
+    separators.forEach((separator) => {
+      expect(separator).toHaveAttribute('aria-hidden', 'true')
+    })
+  })
+
+  test('generates unique keys for breadcrumb items', () => {
+    const itemsWithSamePath = [
+      { title: 'First', path: '/same-path' },
+      { title: 'Second', path: '/same-path' },
+    ]
+
+    renderBreadCrumbs(itemsWithSamePath)
+
+    // Should render without React key warnings
+    expect(screen.getByText('First')).toBeInTheDocument()
+    expect(screen.getByText('Second')).toBeInTheDocument()
   })
 })

frontend/__tests__/unit/data/mockProjectDetailsData.ts

@@ -57,6 +57,7 @@ export const mockProjectDetailsData = {
         openIssuesCount: 6,
         organization: {
           login: 'OWASP',
+          name: 'OWASP Foundation',
         },
         starsCount: 95,
         subscribersCount: 15,
@@ -70,6 +71,7 @@ export const mockProjectDetailsData = {
         openIssuesCount: 3,
         organization: {
           login: 'OWASP',
+          name: 'OWASP Foundation',
         },
         starsCount: 60,
         subscribersCount: 10,

frontend/__tests__/unit/data/mockRepositoryData.ts

@@ -30,6 +30,10 @@ export const mockRepositoryData = {
       key: 'test-project',
       name: 'Test Project',
     },
+    organization: {
+      login: 'test-org',
+      name: 'Test Organization',
+    },
     releases: [
       {
         name: 'v1.0.0',

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

@@ -48,17 +48,6 @@ describe('CommitteeDetailsPage Component', () => {
     })
   })
 
-  test('renders committee data correctly', async () => {
-    render(<CommitteeDetailsPage />)
-    await waitFor(() => {
-      expect(screen.getByText('Test Committee')).toBeInTheDocument()
-    })
-    expect(screen.getByText('This is a test committee summary.')).toBeInTheDocument()
-    expect(screen.getByText('Leader 1')).toBeInTheDocument()
-    expect(screen.getByText('Leader 2')).toBeInTheDocument()
-    expect(screen.getByText('https://owasp.org/test-committee')).toBeInTheDocument()
-  })
-
   test('displays "Committee not found" when there is no committee', async () => {
     ;(useQuery as jest.Mock).mockReturnValue({
       data: null,

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

@@ -70,7 +70,8 @@ describe('OrganizationDetailsPage', () => {
     render(<OrganizationDetailsPage />)
 
     await waitFor(() => {
-      expect(screen.getByText('Test Organization')).toBeInTheDocument()
+      const title = screen.getByRole('heading', { name: 'Test Organization' })
+      expect(title).toBeInTheDocument()
     })
 
     expect(screen.getByText('@test-org')).toBeInTheDocument()
@@ -210,4 +211,29 @@ describe('OrganizationDetailsPage', () => {
       expect(screen.queryByText(`Want to become a sponsor?`)).toBeNull()
     })
   })
+
+  test('renders breadcrumbs correctly', async () => {
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: mockOrganizationDetailsData,
+      error: null,
+    })
+
+    render(<OrganizationDetailsPage />)
+
+    await waitFor(() => {
+      expect(screen.getByText('Home')).toBeInTheDocument()
+      expect(screen.getByText('Organizations')).toBeInTheDocument()
+
+      const breadcrumbOrgName = screen.getByText(mockOrganizationDetailsData.organization.name, {
+        selector: 'span',
+      })
+      expect(breadcrumbOrgName).toBeInTheDocument()
+    })
+
+    const homeLink = screen.getByText('Home').closest('a')
+    const organizationsLink = screen.getByText('Organizations').closest('a')
+
+    expect(homeLink).toHaveAttribute('href', '/')
+    expect(organizationsLink).toHaveAttribute('href', '/organizations')
+  })
 })

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

@@ -78,11 +78,8 @@ describe('ProjectDetailsPage', () => {
 
     await waitFor(() => {
       expect(screen.getByText('Test Project')).toBeInTheDocument()
-      expect(screen.getByText('Lab')).toBeInTheDocument()
+      expect(screen.getByText('https://github.com/example-project')).toBeInTheDocument()
     })
-    expect(screen.getByText('2.2K Stars')).toBeInTheDocument()
-    expect(screen.getByText('10 Forks')).toBeInTheDocument()
-    expect(screen.getByText('10 Issues')).toBeInTheDocument()
   })
 
   test('renders error message when GraphQL request fails', async () => {

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

@@ -68,14 +68,14 @@ describe('RepositoryDetailsPage', () => {
     render(<RepositoryDetailsPage />)
 
     await waitFor(() => {
-      expect(screen.getByText('Test Repo')).toBeInTheDocument()
+      expect(screen.getAllByText('Test Repo')).toHaveLength(2) // Title and breadcrumb
       expect(screen.getByText('MIT')).toBeInTheDocument()
+      expect(screen.getByText('10 Commits')).toBeInTheDocument()
+      expect(screen.getByText('5 Contributors')).toBeInTheDocument()
+      expect(screen.getByText('3K Forks')).toBeInTheDocument()
+      expect(screen.getByText('2 Issues')).toBeInTheDocument()
+      expect(screen.getByText('50K Stars')).toBeInTheDocument()
     })
-    expect(screen.getByText('50K Stars')).toBeInTheDocument()
-    expect(screen.getByText('3K Forks')).toBeInTheDocument()
-    expect(screen.getByText('10 Commits')).toBeInTheDocument()
-    expect(screen.getByText('5 Contributors')).toBeInTheDocument()
-    expect(screen.getByText('2 Issues')).toBeInTheDocument()
   })
 
   test('renders error message when GraphQL request fails', async () => {
@@ -231,4 +231,81 @@ describe('RepositoryDetailsPage', () => {
       ).toBeInTheDocument()
     })
   })
+
+  test('renders breadcrumbs correctly with organization name', async () => {
+    render(<RepositoryDetailsPage />)
+
+    await waitFor(() => {
+      // Check that breadcrumbs are rendered with organization name
+      expect(screen.getByText('Home')).toBeInTheDocument()
+      expect(screen.getByText('Organizations')).toBeInTheDocument()
+      expect(screen.getByText('Repositories')).toBeInTheDocument()
+      const breadcrumbOrgName = screen.getByText(mockRepositoryData.repository.organization.name, {
+        selector: 'a',
+      })
+      expect(breadcrumbOrgName).toBeInTheDocument()
+
+      const breadcrumbRepoName = screen.getByText(mockRepositoryData.repository.name, {
+        selector: 'span',
+      })
+      expect(breadcrumbRepoName).toBeInTheDocument()
+    })
+
+    // Check breadcrumb links
+    const homeLink = screen.getByText('Home').closest('a')
+    const organizationsLink = screen.getByText('Organizations').closest('a')
+    const organizationNameLink = screen.getByText(mockRepositoryData.repository.organization.name, {
+      selector: 'a',
+    })
+    const repositoriesLink = screen.getByText('Repositories').closest('a')
+
+    expect(homeLink).toHaveAttribute('href', '/')
+    expect(organizationsLink).toHaveAttribute('href', '/organizations')
+    expect(organizationNameLink).toHaveAttribute(
+      'href',
+      `/organizations/${mockRepositoryData.repository.organization.login}`
+    )
+    expect(repositoriesLink).toHaveAttribute(
+      'href',
+      `/organizations/${mockRepositoryData.repository.organization.login}#repositories`
+    )
+  })
+
+  test('renders breadcrumbs with fallback to organization login when name is not available', async () => {
+    const repositoryDataWithoutOrgName = {
+      ...mockRepositoryData,
+      repository: {
+        ...mockRepositoryData.repository,
+        organization: {
+          ...mockRepositoryData.repository.organization,
+          name: null,
+        },
+      },
+    }
+
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: repositoryDataWithoutOrgName,
+      error: null,
+    })
+
+    render(<RepositoryDetailsPage />)
+
+    await waitFor(() => {
+      // Check that breadcrumbs fall back to organization login
+      expect(screen.getByText('Home')).toBeInTheDocument()
+      expect(screen.getByText('Organizations')).toBeInTheDocument()
+      expect(screen.getByText('Repositories')).toBeInTheDocument()
+
+      const breadcrumbOrgLogin = screen.getByText(
+        mockRepositoryData.repository.organization.login,
+        { selector: 'a' }
+      )
+      expect(breadcrumbOrgLogin).toBeInTheDocument()
+
+      const breadcrumbRepoName = screen.getByText(mockRepositoryData.repository.name, {
+        selector: 'span',
+      })
+      expect(breadcrumbRepoName).toBeInTheDocument()
+    })
+  })
 })