test: Add test files for src/hooks
Issue Summary
Implement and test multiple custom React hooks to ensure reliability, correctness, and robustness across different application functionalities such as mobile detection, authentication, notifications, geolocation, typing assistance, and onboarding flow.
Problem Statement Several custom hooks lacked comprehensive testing coverage. This affects reliability in critical areas like authentication, notifications, geolocation, and onboarding. Without proper tests: Bugs may go unnoticed Edge cases may break functionality UI behavior may become inconsistent Hooks involve browser APIs, async operations, and state transitions which require careful validation.
Proposed Solution Write unit tests for all major hooks: use-Mobile use-Toast useAuth useGeolocation useTeluguTyping useWelcomeTour Simulate real-world scenarios using mocks (navigator, APIs, timers, etc.) Ensure: Proper state updates Error handling Cleanup behavior Update useGeolocation.ts to expose setCoordinates for better usability.
Test-Driven Development Acceptance Criteria (Given-When-Then)
Scenario 1: Detect mobile screen correctly
Given a screen width less than mobile breakpoint When the useIsMobile hook runs Then it should return true And update when screen resizes
Scenario 2: Toast lifecycle management
Given a toast is triggered When a new toast is added Then only one toast should exist And it should auto-remove after timeout
Scenario 3: Authentication workflow
Given a valid login response with token When useAuth processes the response Then token should be stored securely And user data should be fetched
Scenario 4: Geolocation tracking
Given browser supports geolocation When location is requested Then coordinates should be returned And loading state should update correctly
Scenario 5: Telugu typing transformation
Given user types phonetic input When useTeluguTyping processes it Then correct Telugu characters should be generated
Scenario 6: Welcome tour flow
Given first-time user When app loads Then onboarding tour should start And navigate through steps correctly
Test Cases
| Test ID | Test Description | Precondition | Test Steps | Expected Result | Priority |
|---|---|---|---|---|---|
| TC-001 | Detect mobile screen | Screen width set | 1. Render hook 2. Resize screen |
Returns correct mobile state | High |
| TC-002 | Toast add/remove | Toast initialized | 1. Add toast 2. Wait timeout |
Toast removed automatically | High |
| TC-003 | Auth login success | Mock API response | 1. Call login 2. Check state |
Token stored & user set | High |
| TC-004 | Geolocation success | Navigator mock | 1. Request location | Coordinates returned | High |
| TC-005 | Telugu typing logic | Input provided | 1. Type phonetics | Correct Telugu output | Medium |
| TC-006 | Welcome tour trigger | First-time user | 1. Load app | Tour starts correctly | Medium |
Unit Test Requirements
Components/Functions to Test:
| Module/Component | Function/Hook | Test Cases to Cover |
|---|---|---|
use-mobile.test.tsx |
useIsMobile |
TC-001 |
use-toast.test.ts |
useToast |
TC-002 |
useAuth.test.tsx |
useAuth |
TC-003 |
useGeolocation.test.ts |
useGeolocation |
TC-004 |
useTeluguTyping.test.tsx |
useTeluguTyping |
TC-005 |
useWelcomeTour.test.ts |
useWelcomeTour |
TC-006 |
Test Assertions Required:
[x] Renders correctly with initial state [x] Handles user input correctly [x] Validates input and shows errors [x] Calls API with correct payload [x] Handles loading state [x] Handles success response [x] Handles error response [x] Updates UI state appropriately
Implementation Details Files to Change
| File Path | Action | Purpose |
|---|---|---|
src/hooks/use-mobile.test.tsx |
Create | Test mobile detection |
src/hooks/use-toast.test.ts |
Create | Test toast system |
src/hooks/useAuth.test.tsx |
Create | Test authentication flow |
src/hooks/useGeolocation.test.ts |
Create | Test geolocation |
src/hooks/useGeolocation.ts |
Modify | Add setCoordinates
|
src/hooks/useTeluguTyping.test.tsx |
Create | Test typing logic |
src/hooks/useWelcomeTour.test.ts |
Create | Test onboarding flow |
Technical Considerations Use Vitest and React Testing Library Mock: navigator.geolocation localStorage API calls (fetch/axios) timers (vi.useFakeTimers) Ensure cleanup of event listeners and timers Handle async behavior using waitFor and act
UI/UX Requirements Hooks must: Respond instantly to user interaction Handle errors gracefully Maintain consistent state Responsive behavior for mobile detection Smooth onboarding experience
Testing Strategy Manual Testing
Test Environment:
Browser: Chrome, Firefox Viewport: Desktop & Mobile User Role: General user
Manual Test Steps:
Trigger login/signup flows Test toast notifications Enable/disable location Run onboarding flow
Automated Testing
Unit Tests:
[x] Component render tests [x] User interaction tests [x] API integration tests [x] Error handling tests
Integration Tests (if applicable):
[x] Hook interaction with components [x] Route/navigation triggers
Definition of Done [x] Acceptance criteria met [x] All test cases passing [x] Unit tests written (high coverage) [x] Manual testing completed [x] Code reviewed [x] No console errors [x] TypeScript types defined [x] Linting passed [x] i18n handled