test:add test cases to MediaTypeWheel.tsx and MediaUploadComponent.tsx

Issue Summary

Add missing unit test files for MediaTypeWheel.tsx and MediaUploadComponent.tsx. Currently, these components do not have any test coverage, which leads to unverified behavior. The expected behavior is to have proper unit tests ensuring rendering, user interactions, and edge cases are validated.

Problem Statement

Test files for MediaTypeWheel.tsx and MediaUploadComponent.tsx are missing.
Developers and QA teams are affected due to lack of automated testing.
This results in low test coverage, higher risk of bugs, and reduced confidence in code changes.
The issue can be reproduced by checking the project structure and observing no test files exist for these components.

Proposed Solution

Create new test files:
- MediaTypeWheel.test.tsx
- MediaUploadComponent.test.tsx
Use Vitest and React Testing Library.
Write tests for rendering, user interactions (selection and file upload), state updates, and error handling.
Mock necessary dependencies such as file inputs and props.
No major dependencies or blockers identified.

Test-Driven Development

Acceptance Criteria (Given-When-Then)

Scenario 1: Render MediaTypeWheel

Given the MediaTypeWheel component is rendered
  And media types are available
 When the component loads
 Then all media type options should be displayed
  And a default selection should be visible

Scenario 2: Select media type

Given the MediaTypeWheel is displayed
 When a user selects a media type
 Then the selected type should update

Scenario 3: Upload valid file

Given the MediaUploadComponent is rendered
 When a user uploads a valid file
 Then the file should be accepted

Scenario 4: Handle invalid file upload

Given the MediaUploadComponent is rendered
 When a user uploads an invalid file
 Then an error message should be displayed

Test Cases

Test ID	Test Description	Precondition	Test Steps	Expected Result	Priority
TC-001	Render MediaTypeWheel	Component initialized	1.Render component 2.Verify UI	Media types displayed	High
TC-002	Select media type	Component rendered	1.Click media type 2.Verify selection	Selected type updates	High
TC-003	Render MediaUploadComponent	Component initialized	1.Render component	Upload UI visible	High
TC-004	Upload valid file	Component ready	1.Upload valid file 2.Verify state	File accepted	High
TC-005	Upload invalid file	Component ready	1.Upload invalid file	Error message shown	Medium

Unit Test Requirements

Components/Functions to Test:

Module/Component	Function/Hook	Test Cases to Cover
`MediaTypeWheel.tsx`	Selection handler	TC-001, TC-002
`MediaUploadComponent.tsx`	File upload handler	TC-003, TC-004, TC-005

Test Assertions Required:

Renders correctly with initial state
Handles user input correctly
Validates input and shows errors
Calls API with correct payload
Handles loading state
Handles success response
Handles error response
Updates UI state appropriately

Implementation Details

Files to Change

File Path	Action	Purpose
`src/components/MediaTypeWheel.tsx`	Modify	Improve testability if needed
`src/components/MediaUploadComponent.tsx`	Modify	Improve testability if needed
`src/__tests__/MediaTypeWheel.test.tsx`	Create	Unit tests
`src/__tests__/MediaUploadComponent.test.tsx`	Create	Unit tests

Technical Considerations

Use Vitest as test runner
Use React Testing Library
Mock File API for upload testing
Focus on behavior-based testing

UI/UX Requirements

UI updates correctly on media selection
Clear feedback on file upload success/error
Accessibility using roles and labels

Mockups/Wireframes:

Testing Strategy

Manual Testing

Test Environment:

Browser: Chrome
Viewport: Desktop/Tablet/Mobile
User Role: General user

Manual Test Steps:

Render both components
Select media types
Upload valid and invalid files

Automated Testing

Unit Tests:

Component render tests
User interaction tests
API integration tests
Error handling tests

Integration Tests (if applicable):

Multi-component interaction tests
Route navigation tests

Test Data Requirements

// Example mock data
const mockTestData = {
  validFile: new File(["data"], "file.png", { type: "image/png" }),
  invalidFile: new File(["data"], "file.txt", { type: "text/plain" }),
  mediaTypes: ["image", "video", "audio"]
}