Set up testing infrastructure and improve test coverage for frontend components

Issue Description

Our frontend codebase currently lacks a testing infrastructure and comprehensive test coverage. We need to set up a testing environment, implement initial test cases, and gradually improve our test coverage to ensure better code quality, reliability, and maintainability. This is an excellent opportunity for the open source community to contribute to the project in multiple stages.

Environment

For Frontend Issues:

• Browser: All modern browsers

Steps to Reproduce

N/A - This is an enhancement issue for setting up testing infrastructure and improving test coverage.

Expected Behavior

Phase 1 (Initial Setup):

• A properly configured testing environment for the frontend
• Initial test cases for key components and utilities
• Documentation on how to write and run tests

Phase 2 (Ongoing Improvement):

• Increased test coverage for frontend components and utilities
• Improved reliability and easier maintenance of the codebase
• Faster detection of potential bugs and regressions

Actual Behavior

• No testing infrastructure in place
• Lack of test cases for frontend components and utilities
• Potential for undetected bugs in production
• Some complex logic and edge cases are not adequately tested

Additional Context

• This issue is crucial for establishing a testing culture in our project
• We're starting from scratch, so any contribution is valuable
• Focus on setting up the testing infrastructure and writing initial test cases, then gradually improving coverage
• Consider using Jest and React Testing Library for component testing
• Aim to create a solid foundation that can be built upon by future contributors
• This issue can be tackled in multiple phases, allowing for ongoing contributions

We welcome contributions from the open source community to help set up our testing infrastructure, create initial test cases, and continuously improve our test coverage for frontend components.