adding feature of anchor links

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

@@ -1,6 +1,10 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 import { mockChapterDetailsData } from '@unit/data/mockChapterDetailsData'
 
+function getFirstHeading(page: Page, name: string) {
+  return page.getByRole('heading', { name }).first()
+}
+
 test.describe('Chapter Details Page', () => {
   test.beforeEach(async ({ page }) => {
     await page.route('**/graphql/', async (route) => {
@@ -32,7 +36,7 @@ test.describe('Chapter Details Page', () => {
   })
 
   test('should have top contributors', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Top Contributors')).toBeVisible()
     await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
     await expect(page.getByText('Contributor 1')).toBeVisible()
     await expect(page.getByText('10 Contributions')).toBeVisible()

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

@@ -1,6 +1,10 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 import { mockCommitteeDetailsData } from '@unit/data/mockCommitteeDetailsData'
 
+function getFirstHeading(page: Page, name: string) {
+  return page.getByRole('heading', { name }).first()
+}
+
 test.describe('Committee Details Page', () => {
   test.beforeEach(async ({ page }) => {
     await page.route('**/graphql/', async (route) => {
@@ -18,14 +22,14 @@ test.describe('Committee Details Page', () => {
   })
 
   test('should have committee details block', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Committee Details' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Committee Details')).toBeVisible()
     await expect(page.getByText('Last Updated: Dec 13, 2024')).toBeVisible()
     await expect(page.getByText('Leaders: Leader 1, Leader 2')).toBeVisible()
     await expect(page.getByRole('link', { name: 'https://owasp.org/test-committee' })).toBeVisible()
   })
 
   test('should have top contributors', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Top Contributors')).toBeVisible()
     await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
     await expect(page.getByText('Contributor 1')).toBeVisible()
     await expect(page.getByText('2157 Contributions')).toBeVisible()

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

@@ -1,5 +1,9 @@
 import { mockHomeData } from '@e2e/data/mockHomeData'
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
+
+function getFirstHeading(page: Page, name: string) {
+  return page.getByRole('heading', { name }).first()
+}
 
 test.describe('Home Page', () => {
   test.beforeEach(async ({ page }) => {
@@ -22,15 +26,16 @@ test.describe('Home Page', () => {
   })
 
   test('should have new chapters', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'New Chapters' })).toBeVisible()
+    await expect(getFirstHeading(page, 'New Chapters')).toBeVisible()
     await expect(page.getByRole('link', { name: 'chapter 1' })).toBeVisible()
     await expect(page.getByText('Chapter Leader1,').first()).toBeVisible()
     await expect(page.getByText('Feb 20, 2025').first()).toBeVisible()
     await page.getByRole('link', { name: 'chapter 1' }).click()
     expect(page.url()).toContain('chapters/chapter-1')
   })
+
   test('should have new projects', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'New Projects' })).toBeVisible()
+    await expect(getFirstHeading(page, 'New Projects')).toBeVisible()
     await expect(page.getByRole('link', { name: 'Project 1', exact: true })).toBeVisible()
     await expect(page.getByText('Project Leader1,').first()).toBeVisible()
     await expect(page.getByText('Dec 6, 2024').first()).toBeVisible()
@@ -39,29 +44,29 @@ test.describe('Home Page', () => {
   })
 
   test('should have recent posts', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent News & Opinions' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Recent News & Opinions')).toBeVisible()
     await expect(page.getByRole('link', { name: 'Post 1', exact: true })).toBeVisible()
     await expect(page.getByText('Author 1')).toBeVisible()
     await expect(page.getByText('Feb 24').first()).toBeVisible({ timeout: 10000 })
     await page.getByRole('link', { name: 'Post 1' }).click()
   })
 
   test('should have top contributors', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Top Contributors')).toBeVisible()
     await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
     await expect(page.getByText('Contributor 1')).toBeVisible()
     await expect(page.getByText('Project 21')).toBeVisible()
   })
 
   test('should have recent issues', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Recent Issues')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Issue 1' })).toBeVisible()
     await expect(page.getByText('Feb 24,').first()).toBeVisible()
     await expect(page.getByText('5 comments')).toBeVisible()
   })
 
   test('should have recent Releases', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent Releases' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Recent Releases')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Release 1' })).toBeVisible()
     await expect(page.getByText('Feb 22,')).toBeVisible()
     await expect(page.getByText('v1', { exact: true })).toBeVisible()
@@ -78,7 +83,7 @@ test.describe('Home Page', () => {
   })
 
   test('should have upcoming events', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Upcoming Events' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Upcoming Events')).toBeVisible()
     await expect(page.getByRole('button', { name: 'Event 1' })).toBeVisible()
     await expect(page.getByText('Feb 27 — 28, 2025')).toBeVisible()
     await page.getByRole('button', { name: 'Event 1' }).click()

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

@@ -1,6 +1,10 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 import { mockProjectDetailsData } from '@unit/data/mockProjectDetailsData'
 
+function getFirstHeading(page: Page, name: string) {
+  return page.getByRole('heading', { name }).first()
+}
+
 test.describe('Project Details Page', () => {
   test.beforeEach(async ({ page }) => {
     await page.route('**/graphql/', async (route) => {
@@ -20,7 +24,7 @@ test.describe('Project Details Page', () => {
   })
 
   test('should have project details block', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Project Details' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Project Details')).toBeVisible()
     await expect(page.getByText('Last Updated: Feb 7, 2025')).toBeVisible()
     await expect(page.getByText('Level: Lab')).toBeVisible()
     await expect(page.getByText('Leaders: alice, bob')).toBeVisible()
@@ -36,21 +40,21 @@ test.describe('Project Details Page', () => {
   })
 
   test('should have project topics', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Topics' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Topics')).toBeVisible()
     await expect(page.getByText('graphql', { exact: true })).toBeVisible()
     await expect(page.getByText('django', { exact: true })).toBeVisible()
     await expect(page.getByText('backend')).toBeVisible()
   })
 
   test('should have project languages', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Languages' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Languages')).toBeVisible()
     await expect(page.getByText('Python', { exact: true })).toBeVisible()
     await expect(page.getByText('GraphQL', { exact: true })).toBeVisible()
     await expect(page.getByText('JavaScript', { exact: true })).toBeVisible()
   })
 
   test('should have top contributors', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Top Contributors')).toBeVisible()
     await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
     await expect(page.getByText('Contributor 1')).toBeVisible()
     await expect(page.getByText('30 Contributions')).toBeVisible()
@@ -68,22 +72,22 @@ test.describe('Project Details Page', () => {
   })
 
   test('should have project recent issues', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Recent Issues')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Fix authentication bug' })).toBeVisible()
     await expect(page.getByRole('img', { name: 'Dave Debugger' })).toBeVisible()
     await expect(page.getByText('Feb 5, 2025')).toBeVisible()
     await expect(page.getByText('5 comments')).toBeVisible()
   })
 
   test('should have project recent releases', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent Releases' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Recent Releases')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'V1.2.0' })).toBeVisible()
     await expect(page.getByRole('img', { name: 'Charlie Dev' })).toBeVisible()
     await expect(page.getByText('Jan 20, 2025')).toBeVisible()
   })
 
   test('should have project repositories', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Repositories' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Repositories')).toBeVisible()
     await expect(page.getByText('Repo One')).toBeVisible()
     await expect(page.getByText('Stars95')).toBeVisible()
     await expect(page.getByText('Forks12')).toBeVisible()

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

@@ -1,6 +1,10 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 import { mockRepositoryData } from '@unit/data/mockRepositoryData'
 
+function getFirstHeading(page: Page, name: string) {
+  return page.getByRole('heading', { name }).first()
+}
+
 test.describe('Repository Details Page', () => {
   test.beforeEach(async ({ page }) => {
     await page.route('**/graphql/', async (route) => {
@@ -18,7 +22,7 @@ test.describe('Repository Details Page', () => {
   })
 
   test('should have repository details block', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Repository Details' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Repository Details')).toBeVisible()
     await expect(page.getByText('Last Updated: Jan 1, 2024')).toBeVisible()
     await expect(page.getByText('License: MIT')).toBeVisible()
     await expect(page.getByText('Size: 1200 KB')).toBeVisible()
@@ -34,18 +38,19 @@ test.describe('Repository Details Page', () => {
   })
 
   test('should have topics', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Topics' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Topics')).toBeVisible()
     await expect(page.getByText('JavaScript', { exact: true })).toBeVisible()
     await expect(page.getByText('TypeScript', { exact: true })).toBeVisible()
   })
 
   test('should have languages', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Languages' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Languages')).toBeVisible()
     await expect(page.getByText('web', { exact: true })).toBeVisible()
     await expect(page.getByText('security', { exact: true })).toBeVisible()
   })
+
   test('should have top contributors', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Top Contributors')).toBeVisible()
     await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
     await expect(page.getByText('Contributor 1')).toBeVisible()
     await expect(page.getByText('30 Contributions')).toBeVisible()
@@ -63,15 +68,15 @@ test.describe('Repository Details Page', () => {
   })
 
   test('should have recent issues', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent Issues' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Recent Issues')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'Bug fix required' })).toBeVisible()
     await expect(page.getByRole('img', { name: 'Test User 1' })).toBeVisible()
     await expect(page.getByText('Jan 2, 2024')).toBeVisible()
     await expect(page.getByText('4 comments')).toBeVisible()
   })
 
   test('should have recent releases', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Recent Releases' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Recent Releases')).toBeVisible()
     await expect(page.getByRole('heading', { name: 'v1.0.0' })).toBeVisible()
     await expect(page.getByRole('img', { name: 'Test User 2' })).toBeVisible()
     await expect(page.getByText('Jan 1, 2024', { exact: true })).toBeVisible()

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

@@ -1,6 +1,10 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 import { mockUserDetailsData } from '@unit/data/mockUserDetails'
 
+function getFirstHeading(page: Page, name: string) {
+  return page.getByRole('heading', { name }).first()
+}
+
 test.describe('User Details Page', () => {
   test.beforeEach(async ({ page }) => {
     await page.route('**/graphql/', async (route) => {
@@ -12,12 +16,12 @@ test.describe('User Details Page', () => {
     await page.goto('community/users/test-user')
   })
   test('should have a heading and summary', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Test User' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Test User')).toBeVisible()
     await expect(page.getByText('Test @User')).toBeVisible()
   })
 
   test('should have user details block', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'User Details' })).toBeVisible()
+    await expect(getFirstHeading(page, 'User Details')).toBeVisible()
     await expect(page.getByText('Location: Test Location')).toBeVisible()
     await expect(page.getByText('Email: [email protected]')).toBeVisible()
     await expect(page.getByText('Company: Test Company')).toBeVisible()
@@ -30,23 +34,23 @@ test.describe('User Details Page', () => {
   })
 
   test('should have user issues', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Issues' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Issues')).toBeVisible()
     await expect(page.getByText('Test Issue')).toBeVisible()
     await expect(page.getByText('5 Comments')).toBeVisible()
   })
 
   test('should have user releases', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Releases' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Releases')).toBeVisible()
     await expect(page.getByText('v1.0.0')).toBeVisible()
   })
 
   test('should have user pull requests', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Pull Requests' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Pull Requests')).toBeVisible()
     await expect(page.getByText('Test Pull Request')).toBeVisible()
   })
 
   test('should have top repositories', async ({ page }) => {
-    await expect(page.getByRole('heading', { name: 'Repositories' })).toBeVisible()
+    await expect(getFirstHeading(page, 'Repositories')).toBeVisible()
     await expect(page.getByText('Test Repo')).toBeVisible()
   })
 })

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

@@ -187,7 +187,7 @@ describe('About Component', () => {
 
     const contributorsSection = screen
       .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
+      .closest('div.mb-8') as HTMLElement
     const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)
 

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

@@ -105,7 +105,7 @@ describe('ProjectDetailsPage', () => {
 
     const contributorsSection = screen
       .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
+      .closest('div.mb-8') as HTMLElement
     const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)
 

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

@@ -107,7 +107,7 @@ describe('RepositoryDetailsPage', () => {
 
     const contributorsSection = screen
       .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
+      .closest('div.mb-8') as HTMLElement
     const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)