About page for OWASP Nest

cspell/custom-dict.txt

@@ -77,6 +77,7 @@ samm
 seo
 SEO
 Sivagangai
+skillstruck
 slackbot
 SLF
 slideshare

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

@@ -0,0 +1,78 @@
+import { test, expect } from '@playwright/test'
+import { mockAboutData } from '@unit/data/mockAboutData'
+
+test.describe('About Page', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.route('**/graphql/', async (route) => {
+      const request = route.request()
+      const postData = request.postDataJSON()
+
+      if (postData.query?.includes('user')) {
+        const username = postData.variables.key
+        const userData = mockAboutData.users[username]
+        await route.fulfill({ status: 200, json: { data: { user: userData } } })
+      } else {
+        await route.fulfill({ status: 200, json: { data: { project: mockAboutData.project } } })
+      }
+    })
+
+    await page.goto('/about')
+  })
+
+  test('renders main sections correctly', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'About' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'History' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Leaders' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'Roadmap' })).toBeVisible()
+  })
+
+  test('displays contributor information when data is loaded', async ({ page }) => {
+    await expect(page.getByText('Contributor 1')).toBeVisible()
+    await expect(page.getByText('Contributor 2')).toBeVisible()
+  })
+
+  test('displays leaders data when data is loaded', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Leaders' })).toBeVisible()
+  })
+
+  test('displays technologies & Tools', async ({ page }) => {
+    const technologies = [
+      'Ansible',
+      'Docker',
+      'Jest',
+      'PlayWright',
+      'PostgreSQL',
+      'Pytest',
+      'React',
+      'Tailwind CSS',
+      'Typescript',
+    ]
+
+    for (const tech of technologies) {
+      await expect(page.getByText(tech)).toBeVisible()
+    }
+  })
+
+  test('loads roadmap items correctly', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: 'Roadmap' })).toBeVisible()
+    expect(await page.locator('li').count()).toBeGreaterThan(0)
+  })
+
+  test('displays animated counters with correct values', async ({ page }) => {
+    await expect(page.getByText('1.2K+Contributors')).toBeVisible()
+    await expect(page.getByText('40+Issues')).toBeVisible()
+    await expect(page.getByText('60+Forks')).toBeVisible()
+    await expect(page.getByText('890+Stars')).toBeVisible()
+  })
+
+  test('opens user profile in new window when leader button is clicked', async ({
+    page,
+    context,
+  }) => {
+    const pagePromise = context.waitForEvent('page')
+    await page.getByRole('button', { name: 'View Profile' }).first().click()
+    const newPage = await pagePromise
+    await newPage.waitForLoadState()
+    expect(newPage.url()).toContain('/community/users/')
+  })
+})

frontend/__tests__/unit/data/mockAboutData.ts

@@ -0,0 +1,44 @@
+export const mockAboutData = {
+  project: {
+    contributorsCount: 1200,
+    issuesCount: 40,
+    forksCount: 60,
+    starsCount: 890,
+    key: 'nest',
+    topContributors: Array.from({ length: 15 }, (_, i) => ({
+      avatar_url: `https://example.com/avatar${i + 1}.jpg`,
+      contributions_count: 30 - i,
+      login: `contributor${i + 1}`,
+      name: `Contributor ${i + 1}`,
+    })),
+    is_active: true,
+    languages: ['Python', 'GraphQL', 'JavaScript'],
+    level: 'Lab',
+    name: 'Test Project',
+    repositories_count: 3,
+    summary: 'Test summary',
+    topics: ['security', 'web'],
+    type: 'Tool',
+    url: 'https://github.com/test-project',
+  },
+  users: {
+    arkid15r: {
+      avatarUrl: 'https://avatars.githubusercontent.com/u/2201626?v=4',
+      company: 'OWASP',
+      name: 'Arkadii Yakovets',
+      url: '/community/users/arkid15r',
+    },
+    kasya: {
+      avatarUrl: 'https://avatars.githubusercontent.com/u/5873153?v=4',
+      company: 'skillstruck',
+      name: 'Kate Golovanova',
+      url: '/community/users/kasya',
+    },
+    mamicidal: {
+      avatarUrl: 'https://avatars.githubusercontent.com/u/112129498?v=4',
+      company: 'OWASP',
+      name: 'Starr Brown',
+      url: '/community/users/mamicidal',
+    },
+  },
+}