babymonitor/frontend/testing_audit_report.md

Frontend Testing Audit Report

1. Coverage Report Summary

Metric	Value	Status
Statements	71%	🟡 Moderate
Branches	63.9%	🔴 Low
Functions	76.54%	🟡 Moderate
Lines	72.36%	🟡 Moderate

Module Breakdown

• components/stats/: ~50% (🔴 Critical)
• components/tracker/: ~89% (🟢 Good)
• utils/: ~99% (🟢 Excellent)
• hooks/: 0% detected (🔴 Critical)

---

2. Critical Gaps

🚨 High Risk: Missing Hook Coverage

There is no unit test coverage for custom React hooks. These are the core logic engines of the application.

• src/hooks/useSleepSession.ts (Handles all CRUD for sleep sessions)
• src/hooks/useStats.ts (Handles statistics data fetching)
• src/hooks/useSettings.ts (Manages application settings state)

🔴 Low Coverage Components

The following components are significantly under-tested and prone to regression:

• Pagination.tsx: 0% coverage. No tests exist for pagination logic or UI interaction.
• SessionList.tsx: ~55% coverage. Needs tests for session rendering, editing flow, and empty states.
• SleepTimetable.tsx: ~67% coverage. Needs deeper testing for complex time-range scenarios and midnight transitions.

---

3. Quality Audit

🔍 Shallow Tests

Some tests verify that components render but do not sufficiently exercise the underlying logic or state transitions.

• Example: TimeAdjuster.test.tsx (initial render check) is somewhat shallow, though it does attempt to test onTimeChange.

🏗️ Brittle Tests

A few tests rely on implementation details rather than user-facing behavior, making them prone to breaking during refactors.

• CSS Class Selection: SessionList.test.tsx uses .cursor-pointer to find the clickable row. It should use getByRole('row') or a semantic data-testid.
• Direct Input Selection: TimeAdjuster.test.tsx and others use container.querySelector('input'). While acceptable in some contexts, using screen.getByLabelText or screen.getByRole('spinbutton')/textbox is more robust.

🌿 Branch Coverage Issues

• TimeAdjuster.tsx: High statement coverage but only 50% branch coverage. This indicates that edge cases for invalid date inputs or time overflows are not being exercised.

---

4. Priority List (Recommended Action Plan)

Rank	Task	Target Area
1	Implement Hook Unit Tests	src/hooks/ (Essential for logic stability)
2	Implement Pagination.tsx tests	src/components/stats/ (Zero coverage)
3	Fix Branch Coverage for TimeAdjuster	src/components/tracker/ (Edge case validation)
4	Boost SessionList & SleepTimetable coverage	src/components/stats/ (Critical UI components)
5	Refactor tests for semantic selectors	Global (Reduce brittleness)