Refactor tests and mock data for badges functionality

- Improved formatting and readability in user_test.py by adjusting line breaks.
- Updated mockBadgeData.ts to enhance consistency in object formatting.
- Simplified Tooltip mock in Badges.test.tsx for better clarity.
- Minor adjustments in Badges.tsx for consistent className formatting.

Author: Piyushrathoree

backend/tests/apps/github/api/internal/nodes/user_test.py

@@ -97,7 +97,9 @@ def test_badges_field_empty(self):
         """Test badges field resolution with no badges."""
         mock_user = Mock()
         mock_badges_queryset = Mock()
-        mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value = []
+        (
+            mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value
+        ) = []
         mock_user.badges = mock_badges_queryset
 
         result = UserNode.badges(mock_user)
@@ -111,9 +113,9 @@ def test_badges_field_single_badge(self):
         mock_user_badge.badge = mock_badge
 
         mock_badges_queryset = Mock()
-        mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value = [
-            mock_user_badge
-        ]
+        (
+            mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value
+        ) = [mock_user_badge]
         mock_user.badges = mock_badges_queryset
 
         result = UserNode.badges(mock_user)
@@ -154,7 +156,9 @@ def test_badges_field_sorted_by_weight_and_name(self):
         # Set up the mock queryset to return badges in the expected sorted order
         # (highest weight first, then by name for same weight)
         mock_badges_queryset = Mock()
-        mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value = [
+        (
+            mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value
+        ) = [
             mock_user_badge_high,  # weight 100
             mock_user_badge_medium_a,  # weight 50, name "Medium Weight A"
             mock_user_badge_medium_b,  # weight 50, name "Medium Weight B"
@@ -185,7 +189,9 @@ def test_badges_field_filters_inactive_badges(self):
         """Test badges field only returns active badges."""
         mock_user = Mock()
         mock_badges_queryset = Mock()
-        mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value = []
+        (
+            mock_badges_queryset.filter.return_value.select_related.return_value.order_by.return_value
+        ) = []
         mock_user.badges = mock_badges_queryset
 
         UserNode.badges(mock_user)

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

@@ -40,9 +40,8 @@ jest.mock('@fortawesome/free-solid-svg-icons', () => ({
   },
 }))
 
-// Mock Tooltip component
-jest.mock('@heroui/tooltip', () => {
-  const MockTooltip = ({
+jest.mock('@heroui/tooltip', () => ({
+  Tooltip: ({
     children,
     content,
     ...props
@@ -54,13 +53,8 @@ jest.mock('@heroui/tooltip', () => {
     <div data-testid="tooltip" data-content={content} {...props}>
       {children}
     </div>
-  )
-  MockTooltip.displayName = 'MockTooltip'
-  return {
-    __esModule: true,
-    Tooltip: MockTooltip,
-  }
-})
+  ),
+}))
 
 describe('Badges', () => {
   const defaultProps = {

frontend/__tests__/unit/data/mockBadgeData.ts

@@ -1,63 +1,63 @@
 import type { Badge } from 'types/badge'
 
 export const mockBadgeData: Badge[] = [
-    {
-        id: '1',
-        name: 'Contributor',
-        cssClass: 'fa-medal',
-        description: 'Active contributor to OWASP projects',
-        weight: 1,
-    },
-    {
-        id: '2',
-        name: 'Security Expert',
-        cssClass: 'fa-shield-alt',
-        description: 'Security expertise demonstrated',
-        weight: 2,
-    },
-    {
-        id: '3',
-        name: 'Code Reviewer',
-        cssClass: 'fa-code',
-        description: 'Regular code reviewer',
-        weight: 1,
-    },
-    {
-        id: '4',
-        name: 'Mentor',
-        cssClass: 'fa-user-graduate',
-        description: 'Mentors other contributors',
-        weight: 3,
-    },
-    {
-        id: '5',
-        name: 'Project Lead',
-        cssClass: 'fa-crown',
-        description: 'Leads OWASP projects',
-        weight: 4,
-    },
+  {
+    id: '1',
+    name: 'Contributor',
+    cssClass: 'fa-medal',
+    description: 'Active contributor to OWASP projects',
+    weight: 1,
+  },
+  {
+    id: '2',
+    name: 'Security Expert',
+    cssClass: 'fa-shield-alt',
+    description: 'Security expertise demonstrated',
+    weight: 2,
+  },
+  {
+    id: '3',
+    name: 'Code Reviewer',
+    cssClass: 'fa-code',
+    description: 'Regular code reviewer',
+    weight: 1,
+  },
+  {
+    id: '4',
+    name: 'Mentor',
+    cssClass: 'fa-user-graduate',
+    description: 'Mentors other contributors',
+    weight: 3,
+  },
+  {
+    id: '5',
+    name: 'Project Lead',
+    cssClass: 'fa-crown',
+    description: 'Leads OWASP projects',
+    weight: 4,
+  },
 ]
 
 export const mockUserBadgeQueryResponse = {
-    user: {
-        id: '1',
-        login: 'testuser',
-        name: 'Test User',
-        badges: mockBadgeData,
-        badgeCount: 5,
-    },
+  user: {
+    id: '1',
+    login: 'testuser',
+    name: 'Test User',
+    badges: mockBadgeData,
+    badgeCount: 5,
+  },
 }
 
 export const mockUserWithoutBadgeQueryResponse = {
-    user: {
-        id: '2',
-        login: 'testuser2',
-        name: 'Test User 2',
-        badges: [],
-        badgeCount: 0,
-    },
+  user: {
+    id: '2',
+    login: 'testuser2',
+    name: 'Test User 2',
+    badges: [],
+    badgeCount: 0,
+  },
 }
 
 export const mockBadgeQueryResponse = {
-    badges: mockBadgeData,
+  badges: mockBadgeData,
 }

frontend/src/components/Badges.tsx

@@ -27,7 +27,7 @@ const Badges = ({ name, cssClass, showTooltip = true }: BadgeProps) => {
     return (
       <div className="inline-flex items-center">
         {showTooltip ? (
-          <Tooltip content={`${name} (icon not found)`} className='bg-gray-800'>
+          <Tooltip content={`${name} (icon not found)`} className="bg-gray-800">
             <FontAwesomeIcon icon={['fas', 'medal']} className="h-4 w-4 text-gray-400" />
           </Tooltip>
         ) : (