feat: add comprehensive unit tests for DisplayIcon component

[RizWaaN3024]

Add comprehensive unit tests for DisplayIcon component

Proposed change

Resolves #1808

This PR adds comprehensive unit test coverage for the DisplayIcon React component to ensure reliable functionality and prevent regressions.

What's Added:

• 30+ test cases covering essential scenarios: rendering, conditional logic, prop behavior, text formatting, edge cases, DOM structure, and accessibility
• Complete mocking of external dependencies (@heroui/tooltip, millify, FontAwesomeIconWrapper, utils/data)
• SonarQube compliant code with proper TypeScript naming conventions
• Error documentation for null/undefined edge cases
• Accessibility validation with tooltip configuration testing

Test Coverage:

• Basic rendering and conditional display logic
• Icon and class application based on item types
• Number formatting with millify library
• Tooltip accessibility features
• DOM structure validation
• Edge case handling (null, undefined, zero values)

Checklist

• I've read and followed the contributing guidelines.
• I've run make check-test locally; all checks and tests passed.

[coderabbitai]

Summary by CodeRabbit

• Tests
  • Added comprehensive unit tests for DisplayIcon, covering render conditions, icon/text display, numeric formatting (compact values), tooltip content/behavior, accessibility attributes, interaction via hover, edge cases (missing/invalid data), and visual class variations.
• Chores
  • Expanded spellcheck dictionary to include “unhover,” reducing false-positive spelling warnings in documentation and CI checks.

Walkthrough

Adds a new comprehensive unit test suite for the DisplayIcon component and a single cspell dictionary entry ("unhover").

Changes

Cohort / File(s)	Summary
Unit tests: DisplayIcon frontend/__tests__/unit/components/DisplayIcon.test.tsx	Adds a comprehensive test suite mocking Tooltip, millify, FontAwesomeIconWrapper, and ICONS; covers rendering conditions, prop-driven behavior, numeric formatting, labels, classes, accessibility attributes, edge cases, and hover/tooltip interactions.
Spell dictionary cspell/custom-dict.txt	Adds the word unhover to the custom dictionary.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Renders successfully with minimal required props; Conditional rendering logic; DOM structure / classNames / styles [#1808]	✅
Prop-based behavior; State changes / internal logic; Default values and fallbacks; Text/content rendering; Handles edge cases and invalid inputs [#1808]	✅
Accessibility roles and labels [#1808]	✅
Event handling — simulate user actions and verify callbacks [#1808]	❓	Tests simulate hover/tooltip behavior but do not assert invocation of external callback props (if any).

Out-of-scope changes

Code Change	Explanation
Added dictionary word unhover (cspell/custom-dict.txt)	This is a dev tooling/spelling dictionary entry unrelated to the test coverage objectives for DisplayIcon. It does not affect component behavior or tests' intent.

Possibly related PRs

• feat: add comprehensive unit tests for Card component #1856 — Adds Card tests that mock/use DisplayIcon; shares component-level test patterns and may overlap in mocked utilities and test fixtures.

Suggested reviewers

• arkid15r
• kasya

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 30632f7 and 77cd89a.

📒 Files selected for processing (2)

• cspell/custom-dict.txt (1 hunks)
• frontend/__tests__/unit/components/DisplayIcon.test.tsx (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• cspell/custom-dict.txt

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/tests/unit/components/DisplayIcon.test.tsx

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 7

🧹 Nitpick comments (1)

frontend/__tests__/unit/components/DisplayIcon.test.tsx (1)

49-322: Consider adding test coverage verification.

The test suite is comprehensive and well-organized. To ensure complete coverage, consider:

1. Running coverage reports to verify all branches are tested
2. Adding a test for the stars_count (with underscore) variant mentioned in the source code

npm test -- --coverage --collectCoverageFrom="frontend/src/components/DisplayIcon.tsx"

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e137c07 and ac1dfa9.

📒 Files selected for processing (1)

• frontend/__tests__/unit/components/DisplayIcon.test.tsx (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

frontend/__tests__/unit/components/DisplayIcon.test.tsx (2)

frontend/src/types/icon.ts (1)

• Icon (1-3)

frontend/src/components/DisplayIcon.tsx (1)

• DisplayIcon (7-60)

🔇 Additional comments (3)

frontend/__tests__/unit/components/DisplayIcon.test.tsx (3)

1-5: LGTM! Clean import structure.

The imports are well-organized and follow testing best practices.

---

59-74: LGTM! Basic rendering tests are comprehensive.

Good coverage of basic rendering scenarios including edge cases.

---

270-322: LGTM! Comprehensive test coverage for accessibility, internal logic, and event handling.

The tests effectively validate tooltip configuration, value formatting, className handling, and hover interactions.

[coderabbitai]

🛠️ Refactor suggestion

Consider graceful handling instead of throwing errors for null/undefined icons.

The current tests expect the component to throw errors for null/undefined icons. This approach has issues:

1. Error messages are implementation-dependent and can change
2. Components should handle invalid props gracefully

Consider updating the component to handle these cases without throwing:

-    it('throws error when icons object is null', () => {
-      expect(() => {
-        render(<DisplayIcon item="starsCount" icons={null as never} />)
-      }).toThrow('Cannot read properties of null')
-    })
+    it('handles null icons object gracefully', () => {
+      const { container } = render(<DisplayIcon item="starsCount" icons={null as never} />)
+      expect(container.firstChild).toBeNull()
+    })

-    it('throws error when icons object is undefined', () => {
-      expect(() => {
-        render(<DisplayIcon item="starsCount" icons={undefined as never} />)
-      }).toThrow('Cannot read properties of undefined')
-    })
+    it('handles undefined icons object gracefully', () => {
+      const { container } = render(<DisplayIcon item="starsCount" icons={undefined as never} />)
+      expect(container.firstChild).toBeNull()
+    })

This would require updating the component to add a null check:

// In DisplayIcon component
if (!icons || !icons[item]) return null

🤖 Prompt for AI Agents

In frontend/__tests__/unit/components/DisplayIcon.test.tsx around lines 177 to
187, the tests currently assert that rendering DisplayIcon with null/undefined
icons throws an error; instead, update the DisplayIcon component to handle falsy
icons gracefully by returning null when icons is null/undefined or when
icons[item] is missing, and then update these two tests to assert that rendering
does not throw and that nothing is rendered (e.g., expect queryByTestId or
container to be empty) rather than expecting a thrown error.

[kasya]

@RizWaaN3024 could you run make check locally and fix failing check? You'll need to update cspell to recognize word unhover

[RizWaaN3024]

@RizWaaN3024 could you run make check locally and fix failing check? You'll need to update cspell to recognize word unhover

Okay working on it

[kasya]

@RizWaaN3024 Thanks for updating this!

[RizWaaN3024]

Hi @arkid15r
Can you please review this PR?
Thanks

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud