Merge branch 'main' into fix-homepage-container-flexibility

Author: kasya

.github/workflows/run-ci-cd.yaml

@@ -483,6 +483,25 @@ jobs:
         working-directory: .github/ansible
         run: ansible-playbook -i inventory.yaml staging/proxy.yaml -e "github_workspace=$GITHUB_WORKSPACE"
 
+  run-lighthouse-ci:
+    name: Run Lighthouse CI
+    needs:
+      - deploy-staging-nest-proxy
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8
+
+      - name: Set up Node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020
+        with:
+          node-version: 22
+
+      - name: Run Lighthouse CI
+        working-directory: frontend
+        run: |
+          npx -y @lhci/[email protected] autorun
+
   build-production-images:
     name: Build Production Images
     env:

.gitignore

@@ -7,6 +7,7 @@ __pycache__
 .env*
 !.env.example
 .idea
+.lighthouseci/
 .local
 .mypy_cache
 .npm/

cspell/custom-dict.txt

@@ -69,6 +69,7 @@ inlinehilite
 isanori
 jumpstart
 kasya
+lhci
 libexpat
 linkify
 lte

frontend/Makefile

@@ -27,6 +27,9 @@ format-frontend-code:
 	|| (printf "pnpm run format"; for i in $$(seq 1 58); do printf "."; done; printf "\033[37;41mFailed\033[0m\n" \
 		&& pnpm run format))
 
+lighthouse-ci:
+	@cd frontend && npx -y @lhci/[email protected] autorun --collect.url=http://localhost:3000
+
 lint-frontend-code:
 	@(cd frontend && pnpm run lint:check >/dev/null 2>&1 \
 	&& (printf "pnpm run lint"; for i in $$(seq 1 60); do printf "."; done; printf "\033[30;42mPassed\033[0m\n") \

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

@@ -0,0 +1,190 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { useRouter } from 'next/navigation'
+import React from 'react'
+import type { Issue } from 'types/issue'
+import RecentIssues from 'components/RecentIssues'
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+}))
+
+jest.mock('@heroui/tooltip', () => ({
+  Tooltip: ({
+    children,
+    content,
+    id,
+  }: {
+    children: React.ReactNode
+    content: string
+    id: string
+  }) => (
+    <div data-testid={id} title={content}>
+      {children}
+    </div>
+  ),
+}))
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({
+    src,
+    alt,
+    fill,
+    objectFit,
+    ...props
+  }: {
+    src: string
+    alt: string
+    fill?: boolean
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+    [key: string]: unknown
+  }) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt={alt}
+      style={fill && { objectFit: objectFit as React.CSSProperties['objectFit'] }}
+      {...props}
+    />
+  ),
+}))
+
+const mockPush = jest.fn()
+beforeEach(() => {
+  ;(useRouter as jest.Mock).mockReturnValue({ push: mockPush })
+  mockPush.mockClear()
+})
+
+const baseIssue = {
+  author: {
+    avatarUrl: 'https://example.com/avatar.png',
+    login: 'user1',
+    name: 'User One',
+    contributionsCount: 10,
+    createdAt: 1234567890,
+    followersCount: 5,
+    followingCount: 2,
+    key: 'user1',
+    publicRepositoriesCount: 3,
+    url: 'https://github.com/user1',
+  },
+  createdAt: 1710000000,
+  hint: 'Hint',
+  labels: ['bug'],
+  organizationName: 'org',
+  projectName: 'proj',
+  projectUrl: 'https://github.com/org/proj',
+  summary: 'Summary',
+  title: 'Issue Title',
+  updatedAt: 1710000100,
+  url: 'https://github.com/org/proj/issues/1',
+  objectID: 'id1',
+  repositoryName: 'repo',
+}
+
+describe('<RecentIssues />', () => {
+  it('renders successfully with minimal required props', () => {
+    render(<RecentIssues data={[baseIssue]} />)
+    expect(screen.getByText('Recent Issues')).toBeInTheDocument()
+    expect(screen.getByText('Issue Title')).toBeInTheDocument()
+  })
+
+  it('renders "Nothing to display." when data is empty', () => {
+    render(<RecentIssues data={[]} />)
+    expect(screen.getByText('Nothing to display.')).toBeInTheDocument()
+  })
+
+  it('shows avatar when showAvatar is true', () => {
+    render(<RecentIssues data={[baseIssue]} showAvatar={true} />)
+    expect(screen.getByAltText('User One')).toBeInTheDocument()
+  })
+
+  it('hides avatar when showAvatar is false', () => {
+    render(<RecentIssues data={[baseIssue]} showAvatar={false} />)
+    expect(screen.queryByAltText('User One')).not.toBeInTheDocument()
+  })
+
+  it('renders repositoryName and navigates on click', () => {
+    render(<RecentIssues data={[baseIssue]} />)
+    const repoBtn = screen.getByText('repo')
+    expect(repoBtn).toBeInTheDocument()
+    fireEvent.click(repoBtn)
+    expect(mockPush).toHaveBeenCalledWith('/organizations/org/repositories/repo')
+  })
+
+  it('does not render repositoryName button if missing', () => {
+    const issue = { ...baseIssue }
+    delete issue.repositoryName
+    render(<RecentIssues data={[issue]} />)
+    expect(screen.queryByText('repo')).not.toBeInTheDocument()
+  })
+
+  it('renders formatted date', () => {
+    render(<RecentIssues data={[baseIssue]} />)
+    expect(screen.getByText(/Mar \d{1,2}, 2024/)).toBeInTheDocument()
+  })
+
+  it('renders label text', () => {
+    render(<RecentIssues data={[baseIssue]} />)
+    expect(screen.getByText('Issue Title')).toBeInTheDocument()
+  })
+
+  it('handles edge case: missing author', () => {
+    const issue: Issue = { ...baseIssue, author: undefined }
+    render(<RecentIssues data={[issue]} />)
+    expect(screen.getByText('Issue Title')).toBeInTheDocument()
+  })
+
+  it('handles edge case: missing title', () => {
+    const issue: Issue = { ...baseIssue, title: undefined }
+    render(<RecentIssues data={[issue]} />)
+    expect(screen.getByText('Recent Issues')).toBeInTheDocument()
+    expect(screen.getByText('repo')).toBeInTheDocument()
+    expect(screen.getByAltText('User One')).toBeInTheDocument()
+  })
+
+  it('has accessible roles and labels', () => {
+    render(<RecentIssues data={[baseIssue]} />)
+    expect(screen.getByRole('heading', { name: /Recent Issues/i })).toBeInTheDocument()
+  })
+
+  it('applies correct DOM structure and classNames', () => {
+    render(<RecentIssues data={[baseIssue]} />)
+    expect(screen.getByText('Recent Issues').closest('div')).toHaveClass('flex')
+  })
+
+  it('renders multiple issues', () => {
+    const issues = [baseIssue, { ...baseIssue, objectID: 'id2', title: 'Second Issue' }]
+    render(<RecentIssues data={issues} />)
+    expect(screen.getByText('Second Issue')).toBeInTheDocument()
+    expect(screen.getAllByText(/Issue Title|Second Issue/).length).toBeGreaterThan(1)
+  })
+
+  it('renders with long repositoryName and truncates', () => {
+    const issue = { ...baseIssue, repositoryName: 'a'.repeat(100) }
+    render(<RecentIssues data={[issue]} />)
+    expect(screen.getByText('a'.repeat(100))).toBeInTheDocument()
+  })
+
+  it('renders with custom organizationName', () => {
+    const issue = { ...baseIssue, organizationName: 'custom-org' }
+    render(<RecentIssues data={[issue]} />)
+    fireEvent.click(screen.getByText('repo'))
+    expect(mockPush).toHaveBeenCalledWith('/organizations/custom-org/repositories/repo')
+  })
+
+  it('renders with missing props gracefully', () => {
+    render(<RecentIssues data={[{} as Issue]} showAvatar={false} />)
+    expect(screen.getByText('Recent Issues')).toBeInTheDocument()
+  })
+
+  it('renders with null data', () => {
+    render(<RecentIssues data={null as unknown as Issue[]} />)
+    expect(screen.getByText('Nothing to display.')).toBeInTheDocument()
+  })
+
+  it('defaults to showing avatar when showAvatar is not provided', () => {
+    render(<RecentIssues data={[baseIssue]} />)
+    expect(screen.getByAltText('User One')).toBeInTheDocument()
+  })
+})

frontend/lighthouserc.json

@@ -0,0 +1,19 @@
+{
+  "ci": {
+    "assert": {
+      "assertions": {
+        "categories:performance": ["warn", { "minScore": 0.9 }],
+        "categories:accessibility": ["warn", { "minScore": 0.9 }],
+        "categories:best-practices": ["warn", { "minScore": 0.9 }],
+        "categories:seo": ["warn", { "minScore": 0.9 }]
+      }
+    },
+    "collect": {
+      "url": ["https://nest.owasp.dev/"],
+      "numberOfRuns": 3
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}

frontend/src/components/RecentIssues.tsx

@@ -39,7 +39,7 @@ const RecentIssues: React.FC<RecentIssuesProps> = ({ data, showAvatar = true })
                 className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-gray-600 hover:underline dark:text-gray-400"
                 onClick={() =>
                   router.push(
-                    `/organizations/${item.organizationName}/repositories/${item.repositoryName || ''}`
+                    `/organizations/${item.organizationName}/repositories/${item.repositoryName}`
                   )
                 }
               >