61 lines
2.9 KiB
Markdown
61 lines
2.9 KiB
Markdown
# 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) |
|