test : Add Comprehensive Test Coverage for (ui) audio-error-message.tsx & avatar

Issue Summary

Add comprehensive unit and component tests to improve test coverage for the AudioErrorMessage and AudioErrorMessageList components. This ensures all audio validation error scenarios, UI rendering conditions, action link behaviors, and edge cases are properly tested to reduce regression risk and improve reliability.

Problem Statement

The AudioErrorMessage and AudioErrorMessageList components currently have no dedicated test coverage, leaving important UI logic, conditional rendering, and error scenarios unverified.

What is missing? Missing test coverage for AudioErrorMessage Missing test coverage for AudioErrorMessageList No validation for all 7 audio error codes No validation for action link click behavior Edge cases not tested No fallback error testing Who is affected? Frontend developers working on audio validation UI QA team verifying audio upload workflows Users uploading audio files Future contributors modifying these components Impact: Increased regression risk UI behavior may break unnoticed Reduced maintainability No confidence during refactoring Manual testing required for validation Reproduction:

Run coverage report and observe missing coverage:

src/components/ui/audio-error-message.tsx

Run:

cd /home/prashanth/Desktop/corpus-client-app npm run test:coverage Proposed Solution

Add comprehensive unit tests using Vitest and React Testing Library.

Approach:

Write tests covering:

AudioErrorMessage Initial rendering All duration errors All quality errors All format errors Unknown error fallback Suggestion rendering Action link rendering Action click behavior Styling behavior Icon rendering Custom class handling AudioErrorMessageList Single error rendering Multiple error rendering Empty list behavior Order preservation Styling support Components/files affected:

Component:

src/components/ui/audio-error-message.tsx

Tests to add:

tests/src/components/ui/audio-error-message.test.tsx Dependencies: Vitest React Testing Library jsdom Testing mocks Test-Driven Development Acceptance Criteria (Given-When-Then) Scenario 1: AudioErrorMessage renders

Given the AudioErrorMessage component is mounted When the component loads Then the UI should render correctly And the error message should display

Scenario 2: Audio too short error

Given errorCode = audio_too_short When component renders Then correct message displays And suggestion displays

Scenario 3: Audio too long error

Given errorCode = audio_too_long When component renders Then action link displays And suggestion displays

Scenario 4: Action click handling

Given onAction callback exists When user clicks action link Then callback should execute

Scenario 5: Unknown error

Given invalid error code When component renders Then fallback message displays

Scenario 6: Multiple errors list

Given multiple error codes When component renders Then all errors display

Scenario 7: Empty list

Given empty error array When component renders Then nothing renders

Test Cases Test ID Test Description Precondition Test Steps Expected Result Priority TC-001 Render AudioErrorMessage Component mounted Load component UI renders High TC-002 Duration error test errorCode provided Render component Correct message High TC-003 Audio too long test audio_too_long Render Action link visible High TC-004 Action click test onAction exists Click link Callback executed High TC-005 No callback test No onAction Click link No crash High TC-006 Quality error test quiet/noise errors Render Correct message High TC-007 Format error test format errors Render Correct message High TC-008 Unknown error Invalid code Render Default message High TC-009 Single list error One error Render list Error shown High TC-010 Multiple errors Multiple codes Render list All errors shown High TC-011 Empty list [] Render Returns null High TC-012 Custom class className given Render Class applied Medium Unit Test Requirements Components/Functions to Test Module Function Test Cases AudioErrorMessage Render logic TC-001 AudioErrorMessage Error rendering TC-002 AudioErrorMessage Action click TC-004 AudioErrorMessage Fallback logic TC-008 AudioErrorMessageList Render logic TC-009 AudioErrorMessageList List rendering TC-010 AudioErrorMessageList Empty state TC-011 Test Assertions Required

✔ Renders correctly with initial state ✔ Handles user interactions ✔ Handles unknown errors ✔ Updates UI correctly ✔ Calls callbacks correctly ✔ Handles conditional rendering ✔ Applies styling correctly

Not applicable:

API calls Loading states Async operations Implementation Details Files to Change File Path Action Purpose tests/src/components/ui/audio-error-message.test.tsx Create Unit tests vitest.config.ts Modify Path configuration

Note:

No changes allowed in src folder

Technical Considerations Proper mocking of callbacks Test conditional rendering Maintain component behavior Avoid modifying production code Coverage limitation due to inline callbacks

Maximum achievable coverage:

Statements → 100% Functions → 100% Lines → 100% Branches → 93.75% Testing Strategy Manual Testing Test Environment:

Browser:

Chrome Firefox

Viewport:

Desktop Mobile Manual Test Steps:

AudioErrorMessage:

1 Render component 2 Verify messages 3 Verify suggestions 4 Click action links 5 Verify styling

AudioErrorMessageList:

1 Render list 2 Verify order 3 Verify empty case

Automated Testing Unit Tests: Component rendering tests Error message tests Interaction tests Unknown error tests Styling tests Conditional rendering tests

Integration Tests:

Not required (presentational component only)

Test Data Requirements

Example test data:

const allErrorCodes = [ 'audio_too_short', 'audio_too_long', 'audio_too_quiet', 'excessive_noise', 'unsupported_format', 'file_corrupt', 'incorrect_bitrate' ];

const mockOnAction = vi.fn(); Definition of Done Acceptance criteria met All tests passing Unit tests written Manual testing completed Code reviewed No console errors TypeScript types correct ESLint passes Coverage improved

Coverage improved for:

src/components/ui/audio-error-message.tsx