---
id: w3/m3/t005
title: Test coverage — meaningful tests for query mapping + chart/page behavior
worker: worker3
status: done
estimate: 30m
depends_on: [w3/m3/t003]
---

## Objective

Add tests that assert the behavior this milestone shipped — the query-arg mapping and the page's real failure modes — not snapshots for coverage's sake.

## Context

- Tests live in `__tests__` dirs adjacent to code (`dashboard/CLAUDE.md`); vitest setup + shared mocks under `dashboard/src/test/`.
- The load-bearing logic: range-preset → `startTime`/`resolutionSeconds` mapping; percentage/quantile arg passing; unit formatting (`bytes`→MiB, `seconds`→ms, cores); the unavailable/empty/unauthenticated chart states.

## Steps

1. Unit-test the range/arg mapping and unit formatters (pure functions).
2. Component-test one `MetricChart` with mocked Apollo: data → renders points; 503 `metrics source not configured` → unavailable state; empty series → "no data in range".
3. Assert the Percentage toggle re-queries with `percentage: true` (mock link captures variables).

## Files

- `dashboard/src/features/metrics/**/__tests__/*`
- `dashboard/src/test/*` (shared mocks if needed)

## Acceptance criteria

- [x] Tests fail if the range mapping, unit formatting, or error-state rendering regress. 29 new tests across 7 files: `lib/__tests__/{format,range}.test.ts` (pure functions — unit conversions, range-preset ordering/defaults, `resolveRange`'s sliding window), `components/__tests__/{svg-line-chart,svg-bar-chart}.test.tsx` (renders vs. empty state; a real bug found here — see below), `components/__tests__/{application-metrics-card,network-metrics-card}.test.tsx` (mocked `useMetrics`/`useLiveRange`: percentage/quantile args passed through correctly per-metric, unavailable state renders independently per metric without affecting siblings, latest-point vs. all-points selection).
- [x] No tautological/snapshot-everything tests; suite green (`yarn test`: 235/235, `yarn typecheck`/`yarn lint`/`yarn build` all clean).

**Bug found and fixed by these tests:** an all-zero-value series (a legitimate empty-traffic state) collapsed `SvgLineChart`/`SvgBarChart`'s three Y-axis gridline ticks to the same value, and they were keyed by `value` — React warned on duplicate keys. Fixed by keying gridlines by index instead of value in both chart components.

## Out of scope

- E2E browser tests against prod; visual regression tooling.
