Breadcrumb component implementation (OWASP#1397)

* breadcrumb component

* updated code

* added e2e

* update code

* updated code

* Update code

* Update tests

---------

Co-authored-by: Arkadii Yakovets <[email protected]>

Author: yashgoyal0110

frontend/__tests__/e2e/helpers/expects.ts

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

frontend/__tests__/e2e/pages/About.spec.ts

@@ -1,3 +1,4 @@
+import { expectBreadCrumbsToBeVisible } from '@e2e/helpers/expects'
 import { test, expect } from '@playwright/test'
 import { mockAboutData } from '@unit/data/mockAboutData'
 
@@ -84,4 +85,8 @@ test.describe('About Page', () => {
     await newPage.waitForLoadState()
     expect(newPage.url()).toContain('/members/')
   })
+
+  test('breadcrumb renders correct segments on /about', async ({ page }) => {
+    await expectBreadCrumbsToBeVisible(page, ['Home', 'About'])
+  })
 })

frontend/__tests__/e2e/pages/Chapters.spec.ts

@@ -1,3 +1,4 @@
+import { expectBreadCrumbsToBeVisible } from '@e2e/helpers/expects'
 import { test, expect } from '@playwright/test'
 import { mockChapterData } from '@unit/data/mockChapterData'
 
@@ -54,4 +55,8 @@ test.describe('Chapters Page', () => {
     await contributeButton.click()
     await expect(page).toHaveURL('chapters/chapter_1')
   })
+
+  test('breadcrumb renders correct segments on /chapters', async ({ page }) => {
+    await expectBreadCrumbsToBeVisible(page, ['Home', 'Chapters'])
+  })
 })

frontend/__tests__/e2e/pages/Committees.spec.ts

@@ -1,3 +1,4 @@
+import { expectBreadCrumbsToBeVisible } from '@e2e/helpers/expects'
 import { test, expect } from '@playwright/test'
 import { mockCommitteeData } from '@unit/data/mockCommitteeData'
 
@@ -54,4 +55,8 @@ test.describe('Committees Page', () => {
     await contributeButton.click()
     await expect(page).toHaveURL('/committees/committee_1')
   })
+
+  test('breadcrumb renders correct segments on /committees', async ({ page }) => {
+    await expectBreadCrumbsToBeVisible(page, ['Home', 'Committees'])
+  })
 })

frontend/__tests__/e2e/pages/Contribute.spec.ts

@@ -1,3 +1,4 @@
+import { expectBreadCrumbsToBeVisible } from '@e2e/helpers/expects'
 import { test, expect } from '@playwright/test'
 import { mockContributeData } from '@unit/data/mockContributeData'
 
@@ -71,4 +72,7 @@ test.describe('Contribute Page', () => {
     await CloseButton.click()
     await expect(contributeButton).toBeVisible()
   })
+  test('breadcrumb renders correct segments on /contribute', async ({ page }) => {
+    await expectBreadCrumbsToBeVisible(page, ['Home', 'Contribute'])
+  })
 })

frontend/__tests__/e2e/pages/Organizations.spec.ts

@@ -1,3 +1,4 @@
+import { expectBreadCrumbsToBeVisible } from '@e2e/helpers/expects'
 import { test, expect } from '@playwright/test'
 import { mockOrganizationData } from '@unit/data/mockOrganizationData'
 
@@ -40,4 +41,8 @@ test.describe('Organization Page', () => {
     await expect(page.getByText('1k')).toBeVisible()
     await expect(page.getByText('1.5k')).toBeVisible()
   })
+
+  test('breadcrumb renders correct segments on /organizations', async ({ page }) => {
+    await expectBreadCrumbsToBeVisible(page, ['Home', 'Organizations'])
+  })
 })

frontend/__tests__/e2e/pages/Projects.spec.ts

@@ -1,3 +1,4 @@
+import { expectBreadCrumbsToBeVisible } from '@e2e/helpers/expects'
 import { test, expect } from '@playwright/test'
 import mockProjectData from '@unit/data/mockProjectData'
 
@@ -53,4 +54,7 @@ test.describe('Projects Page', () => {
     await contributeButton.click()
     await expect(page).toHaveURL('projects/project_1')
   })
+  test('breadcrumb renders correct segments on /projects', async ({ page }) => {
+    await expectBreadCrumbsToBeVisible(page, ['Home', 'Projects'])
+  })
 })

frontend/__tests__/e2e/pages/Users.spec.ts

@@ -1,3 +1,4 @@
+import { expectBreadCrumbsToBeVisible } from '@e2e/helpers/expects'
 import { test, expect } from '@playwright/test'
 import { mockUserData } from '@unit/data/mockUserData'
 
@@ -59,4 +60,7 @@ test.describe('Users Page', () => {
     await expect(page.getByText('1k')).toBeVisible()
     await expect(page.getByText('2k')).toBeVisible()
   })
+  test('breadcrumb renders correct segments on /members', async ({ page }) => {
+    await expectBreadCrumbsToBeVisible(page, ['Home', 'Members'])
+  })
 })

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

@@ -0,0 +1,42 @@
+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(),
+}))
+
+describe('BreadCrumb', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('does not render on root path "/"', () => {
+    ;(usePathname as jest.Mock).mockReturnValue('/')
+
+    render(<BreadCrumbs />)
+    expect(screen.queryByText('Home')).not.toBeInTheDocument()
+  })
+
+  test('renders breadcrumb with multiple segments', () => {
+    ;(usePathname as jest.Mock).mockReturnValue('/dashboard/users/profile')
+
+    render(<BreadCrumbs />)
+
+    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 lastSegment = screen.getByText('Account')
+    expect(lastSegment).toBeInTheDocument()
+    expect(lastSegment).not.toHaveAttribute('href')
+  })
+})

frontend/src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { Geist, Geist_Mono } from 'next/font/google'
 import React from 'react'
 import { Providers } from 'wrappers/provider'
+import BreadCrumbs from 'components/BreadCrumbs'
 import Footer from 'components/Footer'
 
 import Header from 'components/Header'
@@ -41,6 +42,7 @@ export default function RootLayout({
       >
         <Providers>
           <Header />
+          <BreadCrumbs />
           {children}
           <Footer />
           <ScrollToTop />