Fix: Repair broken GraphQL mock in Groups.spec.tsx causing async data load failure

## Summary `Groups.spec.tsx` fails because the component renders an error state instead of loading data successfully. The test at line 1412 expects an input to contain the value `"Group"` but it receives only `"G"`, indicating the GraphQL mock is not resolving correctly and the component falls into its error boundary. ## Root Cause The GraphQL mock setup for the Volunteer Groups query in `Groups.spec.tsx` is stale or broken — it either does not match the current query shape/variables, or it is not resolving asynchronously in time. The component then renders: `"Error occured while loading Volunteer Groups data"`. ## Affected File - `src/screens/UserPortal/Groups/Groups.spec.tsx` (line ~1412) ## Observed vs. Expected | | Value | |---|---| | Expected input value | `"Group"` | | Received input value | `"G"` | | Component render state | Error: `"Error occured while loading Volunteer Groups data"` | ## Starter Code / Fix Approach **Step 1:** Inspect the current mock definition in the spec file: ```bash grep -n 'VOLUNTEER_GROUP\|volunteerGroup\|MockedProvider\|mock' src/screens/UserPortal/Groups/Groups.spec.tsx | head -40 ``` **Step 2:** Confirm the current query and variables shape from the component: ```bash rg 'VOLUNTEER_GROUP\|useQuery\|volunteerGroup' src/screens/UserPortal/Groups/ --include='*.tsx' --include='*.ts' ``` **Step 3:** Update the mock to match the current query signature. Example pattern: ```typescript // Groups.spec.tsx — ensure mock request matches component query exactly const MOCK_VOLUNTEER_GROUPS = { request: { query: VOLUNTEER_GROUP_LIST, // must match the actual imported query variables: { orgId: 'test-org-id' }, // must match variables passed by component }, result: { data: { getVolunteerGroups: [ { id: '1', name: 'Group', description: 'Test group', volunteersRequired: 5 }, ], }, }, }; ``` **Step 4:** Ensure `await waitFor()` or `findBy*` queries are used in the test so async resolution completes before assertions: ```diff - expect(inputEl).toHaveValue('Group'); + await waitFor(() => expect(inputEl).toHaveValue('Group')); ``` **Step 5:** Run the test locally to confirm: ```bash npx jest src/screens/UserPortal/Groups/Groups.spec.tsx --no-coverage -t 'line 1412 test name' ``` ## References - PR: https://github.com/PalisadoesFoundation/talawa-admin/pull/7543 - Analysis comment: https://github.com/PalisadoesFoundation/talawa-admin/pull/7543#issuecomment-4210543487 - Requested by: @palisadoes