Fixed breadcrumb styling and added tests (OWASP#1435)

* Fixed breadcrumb styling and added tests

* Added more tests

* Update code

---------

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

Author: samyak003

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

@@ -39,4 +39,30 @@ describe('BreadCrumb', () => {
     expect(lastSegment).toBeInTheDocument()
     expect(lastSegment).not.toHaveAttribute('href')
   })
+
+  test('links have correct href attributes', () => {
+    ;(usePathname as jest.Mock).mockReturnValue('/dashboard/users/profile')
+
+    render(<BreadCrumbs />)
+
+    const homeLink = screen.getByText('Home').closest('a')
+    const dashboardLink = screen.getByText('Dashboard').closest('a')
+    const usersLink = screen.getByText('Users').closest('a')
+
+    expect(homeLink).toHaveAttribute('href', '/')
+    expect(dashboardLink).toHaveAttribute('href', '/dashboard')
+    expect(usersLink).toHaveAttribute('href', '/dashboard/users')
+  })
+
+  test('links have hover styles', () => {
+    ;(usePathname as jest.Mock).mockReturnValue('/dashboard/users')
+
+    render(<BreadCrumbs />)
+
+    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')
+  })
 })

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

@@ -131,4 +131,18 @@ describe('ChaptersPage Component', () => {
     // Clean up the mock
     jest.restoreAllMocks()
   })
+
+  test('detail links are clickable and navigate correctly', async () => {
+    render(<ChaptersPage />)
+
+    await waitFor(() => {
+      const detailLinks = screen.getAllByText('View Details')
+      expect(detailLinks.length).toBeGreaterThan(0)
+
+      detailLinks.forEach((link, index) => {
+        fireEvent.click(link)
+        expect(mockRouter.push).toHaveBeenCalledWith(`/chapters/chapter_${index + 1}`)
+      })
+    })
+  })
 })

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

@@ -141,4 +141,20 @@ describe('ProjectPage Component', () => {
     // Clean up the mock
     jest.restoreAllMocks()
   })
+
+  test('detail links are clickable and navigate correctly', async () => {
+    render(<ProjectsPage />)
+
+    await waitFor(() => {
+      const detailLinks = screen.getAllByRole('button', { name: /View Details/i })
+      expect(detailLinks.length).toBeGreaterThan(0)
+
+      detailLinks.forEach((link, index) => {
+        fireEvent.click(link)
+        expect(mockRouter.push).toHaveBeenCalledWith(`/projects/project_${index + 1}`)
+      })
+    })
+
+    jest.restoreAllMocks()
+  })
 })

frontend/src/app/about/page.tsx

@@ -72,7 +72,7 @@ const About = () => {
   }
 
   return (
-    <div className="mt-16 min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
+    <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="mx-auto max-w-6xl">
         <h1 className="mb-6 mt-4 text-4xl font-bold">About</h1>
         <SecondaryCard icon={faScroll} title="History">

frontend/src/app/snapshots/[id]/page.tsx

@@ -110,7 +110,7 @@ const SnapshotDetailsPage: React.FC = () => {
   }
 
   return (
-    <div className="mx-auto mt-16 min-h-screen max-w-6xl p-4">
+    <div className="mx-auto min-h-screen max-w-6xl p-4">
       <div className="mb-8 mt-8 rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div>

frontend/src/app/snapshots/page.tsx

@@ -62,8 +62,8 @@ const SnapshotsPage: React.FC = () => {
   }
 
   return (
-    <div className="mt-16 min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
-      <div className="mt-16 flex min-h-screen w-full flex-col items-center justify-normal p-5 text-text">
+    <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
+      <div className="flex min-h-screen w-full flex-col items-center justify-normal p-5 text-text">
         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {!snapshots?.length ? (
             <div className="col-span-full py-8 text-center">No Snapshots found</div>

frontend/src/components/BreadCrumbs.tsx

@@ -15,7 +15,7 @@ export default function BreadCrumbs() {
   if (pathname === homeRoute) return null
 
   return (
-    <div className="absolute bottom-2 left-0 top-1 mt-16 w-full py-2">
+    <div className="mt-16 w-full pt-4">
       <div className="w-full px-8 sm:px-8 md:px-8 lg:px-8">
         <Breadcrumbs
           aria-label="breadcrumb"

frontend/src/components/CardDetailsPage.tsx

@@ -46,7 +46,7 @@ const DetailsCard = ({
   repositories = [],
 }: DetailsCardProps) => {
   return (
-    <div className="mt-16 min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
+    <div className="min-h-screen bg-white p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="mx-auto max-w-6xl">
         <h1 className="mb-6 mt-4 text-4xl font-bold">{title}</h1>
         <p className="mb-6 text-xl">{description}</p>

frontend/src/components/SearchPageLayout.tsx

@@ -40,7 +40,7 @@ const SearchPageLayout = ({
     }
   }, [isLoaded, isFirstLoad])
   return (
-    <div className="mt-16 flex min-h-screen w-full flex-col items-center justify-normal p-5 text-text">
+    <div className="flex min-h-screen w-full flex-col items-center justify-normal p-5 text-text">
       <div className="flex w-full items-center justify-center">
         <SearchBar
           isLoaded={isFirstLoad}