Develop UI Tests for Core Components

[AyabongaQwabi]

Add UI Tests for Core Components

Objective:
Implement comprehensive UI tests to ensure the reliability and stability of the core components within our application. These tests will verify that components render correctly, handle user interactions appropriately, and maintain functionality across updates.

---

Checklists

1. Testing Framework Setup

• Ensure the testing environment is configured correctly with tools such as Jest and React Testing Library.

2. Core Components to Test

• Sidebar Component
  • Verify that it renders correctly in both expanded and collapsed states.
  • Test that navigation links redirect appropriately.
• Header/Topbar Component
  • Ensure the profile dropdown functions as expected.
  • Verify that notifications and quick action buttons operate correctly.
• Dashboard Cards
  • Confirm that metrics (e.g., earnings, subscriptions) update accurately based on mock data.
  • Test for responsiveness on various screen sizes.
• Registration and Login Form
  • Check field validations for both subscription creation and updates.
  • Test for both error and success messages.

3. Test Scenarios

• Ensure components render without crashing.
• Verify UI responsiveness across different viewport sizes.
• Test for accessibility compliance (e.g., ARIA roles, keyboard navigation).
• Ensure that error states are displayed when invalid data is entered.
• Test user interactions, including clicks, hovers, and form submissions.
• Confirm that state changes and data updates are reflected properly in the UI.

4. Testing Coverage

• Aim for at least 80% coverage of the core components.
• Identify and write tests for any edge cases.

5. Add Lighthouse Perfomance Metrics on Netlify

• Ask Aya for Netlify Details
• Add lighthouse plugin to main Inaethe website

---

Acceptance Criteria

• All core components have passing tests for rendering and user interactions.
• The test suite achieves a minimum of 80% coverage.
• Tests are written with clear descriptions and adhere to best practices.
• No major regressions or UI bugs are introduced in future updates.

---

Estimated Time to Complete:
2–3 days