feat(components): add unit tests and CTA/message support for EmptySta…

[Oluwasuyi-Oluwatimilehin-Daniel]

#closes #623

Pull Request: Add Unit Tests & CTA/Message Support for EmptyState Component (#623)

Title

feat(components): add unit tests and CTA/message support for EmptyState (#623)

Branch

feat/623-empty-state-unit-tests

---

Description

This pull request adds complete unit test coverage for the shared EmptyState.tsx component and updates its prop interface to cleanly support message, cta, and ctaHref props alongside existing title, description, image, and onReset props.

Key Changes

1. Component Enhancements (EmptyState.tsx)

• Added message, cta, and ctaHref to EmptyStateProps.
• Supported cta as an object ({ label?: string; text?: string; href?: string; onClick?: () => void }) or string.
• Rendered React Router <Link> for routing navigation when href is provided.
• Gracefully handled missing images/titles and empty message strings.
• Preserved 100% backward compatibility for existing uses (title, description, image, onReset).

2. Unit Tests (EmptyState.test.tsx)

Created comprehensive Vitest unit test suite covering:

• Message & CTA Visibility: Asserts both message text and CTA link element are rendered when provided.
• CTA Absence: Asserts no link or button element is rendered when cta is omitted.
• Navigation Triggering: Asserts clicking CTA with href navigates to the target route using React Router.
• Empty Message String: Asserts rendering <EmptyState message="" /> completes without throwing errors.
• String CTA & Callback Buttons: Asserts string cta with ctaHref and button cta with onClick handler operate as expected.
• Backward Compatibility: Asserts legacy title, description, image, and onReset props function properly.

---

Acceptance Criteria Checklist

Requirement / Criterion	Status	Verification
Message and CTA both visible when provided	✅ Pass	Tested in EmptyState.test.tsx
CTA absent when not provided	✅ Pass	Tested in EmptyState.test.tsx
CTA click triggers navigation to correct href	✅ Pass	Tested in EmptyState.test.tsx
Empty message string renders without error	✅ Pass	Tested in EmptyState.test.tsx
ESLint check passes with zero errors	✅ Pass	Verified with pnpm lint

---

How to Test

# 1. Checkout feature branch
git checkout feat/623-empty-state-unit-tests

# 2. Run unit tests for EmptyState component
PATH=/home/timiturn3r/.nvm/versions/node/v24.18.0/bin:$PATH pnpm test src/components/common/__tests__/EmptyState.test.tsx

# 3. Verify linter
PATH=/home/timiturn3r/.nvm/versions/node/v24.18.0/bin:$PATH pnpm lint

#closes

[drips-wave]

@Oluwasuyi-Oluwatimilehin-Daniel Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits