Skip to content

fix: resolve act warnings and prevent runtime crashes on empty data#1319

Open
MayankSharma-ops wants to merge 1 commit into
AOSSIE-Org:mainfrom
MayankSharma-ops:fix/act-warnings-and-empty-data
Open

fix: resolve act warnings and prevent runtime crashes on empty data#1319
MayankSharma-ops wants to merge 1 commit into
AOSSIE-Org:mainfrom
MayankSharma-ops:fix/act-warnings-and-empty-data

Conversation

@MayankSharma-ops

@MayankSharma-ops MayankSharma-ops commented Jun 13, 2026

Copy link
Copy Markdown

Fixes #1320

Addressed Issues:

  • Resolves React act(...) warning traces during Settings Page testing.
  • Fixes potential runtime crashes (TypeError: Cannot read properties of undefined (reading 'length')) when backend endpoints resolve empty/unmocked payloads.

Screenshots/Recordings:

N/A (This PR contains non-visual testing fixes, mock updates, and defensive state fallbacks).

Additional Notes:

This PR addresses two key issues in the testing suite and frontend components:

  1. Defensive API State Mapping: Added safety fallbacks (?? []) when dispatching fetched images to Redux (Home.tsx, AITagging.tsx, MyFav.tsx). This prevents components from crashing when the API returns undefined or missing lists.
  2. Standardized Default Mocks: Aligned the default global fetch mock in jest.setup.ts to return { success: true, data: [] } (of type BackendRes) instead of {}.
  3. Flushed Async Test Boundaries: Updated SettingsPage.test.tsx, PageSanity.test.tsx, and allPages.test.tsx settings test blocks to run asynchronously and wait for the mount-time fetch microtasks to resolve inside act(). This completely resolves the React act(...) warnings.

All 131 unit tests pass cleanly with zero console warnings/errors.

AI Usage Disclosure:

Check one of the checkboxes below:

  • This PR does not contain AI-generated code at all.
  • This PR contains AI-generated code. I have read the AI Usage Policy and this PR complies with this policy. I have tested the code locally and I am responsible for it.

I have used the following AI models and tools: Gemini (Antigravity AI coding assistant)

Checklist

  • My PR addresses a single issue, fixes a single bug or makes a single improvement.
  • My code follows the project's code style and conventions.
  • If applicable, I have made corresponding changes or additions to the documentation.
  • If applicable, I have made corresponding changes or additions to tests.
  • My changes generate no new warnings or errors.
  • I have joined the Discord server and I will share a link to this PR with the project maintainers there.
  • I have read the Contribution Guidelines.
  • Once I submit my PR, CodeRabbit AI will automatically review it and I will address CodeRabbit's comments.
  • I have filled this PR template completely and carefully, and I understand that my PR may be closed without review otherwise.

Summary by CodeRabbit

  • Bug Fixes

    • Added defensive null/undefined checks for image data handling across multiple pages, ensuring empty arrays are used as fallbacks when data is missing.
  • Tests

    • Updated test suites to properly handle asynchronous component rendering with effect flushing.
    • Improved mock endpoint configuration for API tests.

@github-actions

Copy link
Copy Markdown
Contributor

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

@coderabbitai

coderabbitai Bot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Walkthrough

This PR normalizes image data handling across the frontend by updating mock responses to a consistent shape, adding defensive null-coalescing fallbacks in page components, and migrating tests to properly handle async effects using React Testing Library's act() wrapper with effect-flushing delays.

Changes

Image Data Normalization and Test Async Migration

Layer / File(s) Summary
Mock API response shape normalization
frontend/jest.setup.ts
Jest mock for /models/setup endpoint updated to return { success: true, data: [] } instead of empty object, providing consistent response shape for dependent components.
Defensive image data handling in page components
frontend/src/pages/AITagging/AITagging.tsx, frontend/src/pages/Home/Home.tsx, frontend/src/pages/Home/MyFav.tsx
AITagging, Home, and MyFav components now safely derive images arrays with nullish-coalescing fallbacks (data?.data ?? []) to prevent undefined from propagating to Redux state setters.
Test async/act migration for effect flushing
frontend/src/pages/__tests__/PageSanity.test.tsx, frontend/src/pages/__tests__/SettingsPage.test.tsx, frontend/src/pages/__tests__/allPages.test.tsx
PageSanity, SettingsPage, and allPages tests updated to import and use React Testing Library act() wrapper with zero-delay promises to flush pending effects; setupTest in SettingsPage made async and all callers now await initialization.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • AOSSIE-Org/PictoPy#1056: Main PR's test updates build directly on the testing-suite refresh introduced in PR #1056 that adds/reshapes the page sanity tests and Jest test setup.

Suggested labels

TypeScript/JavaScript

Suggested reviewers

  • rahulharpal1603

Poem

🐰 A rabbit hops through jest mocks and data streams,
Where null coalescing guards uncertain dreams,
With act and async, tests now truly wait,
For pending effects to flush their fate,
Defensive and steady, the frontend's now great!

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: fixing act warnings in tests and preventing runtime crashes from empty data payloads.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions

Copy link
Copy Markdown
Contributor

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
frontend/src/pages/Home/Home.tsx (1)

43-43: ⚡ Quick win

Consider extracting the repeated image data normalization pattern.

All three image-displaying components use the same defensive fallback pattern (data?.data ?? []) as Image[] when preparing fetched images for Redux dispatch. This duplication could be reduced with a shared helper function.

  • frontend/src/pages/Home/Home.tsx#L43: Extract to a shared normalizeImagesResponse helper in @/utils or @/api/api-functions.
  • frontend/src/pages/AITagging/AITagging.tsx#L38: Replace with the shared helper.
  • frontend/src/pages/Home/MyFav.tsx#L45: Replace with the shared helper.
♻️ Example shared helper
// In `@/api/api-functions.ts` or `@/utils/imageHelpers.ts`
export function normalizeImagesResponse(response?: { data?: Image[] }): Image[] {
  return (response?.data ?? []) as Image[];
}

Then in each component:

-const images = (data?.data ?? []) as Image[];
+const images = normalizeImagesResponse(data);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/Home/Home.tsx` at line 43, Extract the repeated
normalization logic into a single exported helper normalizeImagesResponse in a
shared module (e.g., add export function normalizeImagesResponse(response?: {
data?: Image[] }): Image[] { return (response?.data ?? []) as Image[] } in
`@/api/api-functions.ts` or `@/utils/imageHelpers.ts`), then replace the inline
pattern in each site: frontend/src/pages/Home/Home.tsx (lines 43-43) — replace
const images = (data?.data ?? []) as Image[] with const images =
normalizeImagesResponse(data); frontend/src/pages/AITagging/AITagging.tsx (lines
38-38) — replace its (data?.data ?? []) as Image[] usage with
normalizeImagesResponse(data); frontend/src/pages/Home/MyFav.tsx (lines 45-45) —
replace its (data?.data ?? []) as Image[] usage with
normalizeImagesResponse(data); ensure the helper is imported where used and
exported from the shared module.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@frontend/src/pages/Home/Home.tsx`:
- Line 43: Extract the repeated normalization logic into a single exported
helper normalizeImagesResponse in a shared module (e.g., add export function
normalizeImagesResponse(response?: { data?: Image[] }): Image[] { return
(response?.data ?? []) as Image[] } in `@/api/api-functions.ts` or
`@/utils/imageHelpers.ts`), then replace the inline pattern in each site:
frontend/src/pages/Home/Home.tsx (lines 43-43) — replace const images =
(data?.data ?? []) as Image[] with const images = normalizeImagesResponse(data);
frontend/src/pages/AITagging/AITagging.tsx (lines 38-38) — replace its
(data?.data ?? []) as Image[] usage with normalizeImagesResponse(data);
frontend/src/pages/Home/MyFav.tsx (lines 45-45) — replace its (data?.data ?? [])
as Image[] usage with normalizeImagesResponse(data); ensure the helper is
imported where used and exported from the shared module.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: acea33d5-98b2-4a52-9e34-cc7f3736d52c

📥 Commits

Reviewing files that changed from the base of the PR and between 0d0cbec and 3c1a34f.

⛔ Files ignored due to path filters (1)
  • frontend/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (7)
  • frontend/jest.setup.ts
  • frontend/src/pages/AITagging/AITagging.tsx
  • frontend/src/pages/Home/Home.tsx
  • frontend/src/pages/Home/MyFav.tsx
  • frontend/src/pages/__tests__/PageSanity.test.tsx
  • frontend/src/pages/__tests__/SettingsPage.test.tsx
  • frontend/src/pages/__tests__/allPages.test.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Resolve React act(...) warnings in settings page tests and add defensive API checks

1 participant