Add component tests for P3.11 (82 tests across 5 files)
- DecisionCard tests: 11 tests covering rendering, status icons, styling - DataPanel tests: 18 tests covering biometrics display, null handling, styling - NutritionPanel tests: 12 tests covering seeds, carbs, keto guidance display - OverrideToggles tests: 18 tests covering toggle states, callbacks, styling - DayCell tests: 23 tests covering phase coloring, today highlighting, click handling Total tests now: 707 passing across 40 test files Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
143
src/components/dashboard/data-panel.test.tsx
Normal file
143
src/components/dashboard/data-panel.test.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
// ABOUTME: Unit tests for DataPanel component.
|
||||
// ABOUTME: Tests biometrics display including body battery, HRV, and intensity.
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { DataPanel } from "./data-panel";
|
||||
|
||||
describe("DataPanel", () => {
|
||||
const baseProps = {
|
||||
bodyBatteryCurrent: 75,
|
||||
bodyBatteryYesterdayLow: 25,
|
||||
hrvStatus: "Balanced",
|
||||
weekIntensity: 120,
|
||||
phaseLimit: 200,
|
||||
remainingMinutes: 80,
|
||||
};
|
||||
|
||||
describe("rendering", () => {
|
||||
it("renders the YOUR DATA heading", () => {
|
||||
render(<DataPanel {...baseProps} />);
|
||||
|
||||
expect(screen.getByText("YOUR DATA")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders body battery current value", () => {
|
||||
render(<DataPanel {...baseProps} />);
|
||||
|
||||
expect(screen.getByText(/Body Battery: 75/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders yesterday low value", () => {
|
||||
render(<DataPanel {...baseProps} />);
|
||||
|
||||
expect(screen.getByText(/Yesterday Low: 25/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders HRV status", () => {
|
||||
render(<DataPanel {...baseProps} hrvStatus="Balanced" />);
|
||||
|
||||
expect(screen.getByText(/HRV: Balanced/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders week intensity with phase limit", () => {
|
||||
render(<DataPanel {...baseProps} />);
|
||||
|
||||
expect(screen.getByText(/Week: 120\/200 min/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders remaining minutes", () => {
|
||||
render(<DataPanel {...baseProps} />);
|
||||
|
||||
expect(screen.getByText(/Remaining: 80 min/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("null value handling", () => {
|
||||
it("displays N/A when bodyBatteryCurrent is null", () => {
|
||||
render(<DataPanel {...baseProps} bodyBatteryCurrent={null} />);
|
||||
|
||||
expect(screen.getByText(/Body Battery: N\/A/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays N/A when bodyBatteryYesterdayLow is null", () => {
|
||||
render(<DataPanel {...baseProps} bodyBatteryYesterdayLow={null} />);
|
||||
|
||||
expect(screen.getByText(/Yesterday Low: N\/A/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays N/A for both when both are null", () => {
|
||||
render(
|
||||
<DataPanel
|
||||
{...baseProps}
|
||||
bodyBatteryCurrent={null}
|
||||
bodyBatteryYesterdayLow={null}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Body Battery: N\/A/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Yesterday Low: N\/A/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("HRV status variations", () => {
|
||||
it("displays Balanced HRV status", () => {
|
||||
render(<DataPanel {...baseProps} hrvStatus="Balanced" />);
|
||||
|
||||
expect(screen.getByText(/HRV: Balanced/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays Unbalanced HRV status", () => {
|
||||
render(<DataPanel {...baseProps} hrvStatus="Unbalanced" />);
|
||||
|
||||
expect(screen.getByText(/HRV: Unbalanced/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays Unknown HRV status", () => {
|
||||
render(<DataPanel {...baseProps} hrvStatus="Unknown" />);
|
||||
|
||||
expect(screen.getByText(/HRV: Unknown/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("intensity values", () => {
|
||||
it("displays zero intensity correctly", () => {
|
||||
render(<DataPanel {...baseProps} weekIntensity={0} />);
|
||||
|
||||
expect(screen.getByText(/Week: 0\/200 min/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays when over phase limit", () => {
|
||||
render(<DataPanel {...baseProps} weekIntensity={250} phaseLimit={200} />);
|
||||
|
||||
expect(screen.getByText(/Week: 250\/200 min/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays zero remaining minutes", () => {
|
||||
render(<DataPanel {...baseProps} remainingMinutes={0} />);
|
||||
|
||||
expect(screen.getByText(/Remaining: 0 min/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("displays negative remaining minutes", () => {
|
||||
render(<DataPanel {...baseProps} remainingMinutes={-50} />);
|
||||
|
||||
expect(screen.getByText(/Remaining: -50 min/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe("styling", () => {
|
||||
it("renders within a bordered container", () => {
|
||||
const { container } = render(<DataPanel {...baseProps} />);
|
||||
|
||||
const panel = container.firstChild as HTMLElement;
|
||||
expect(panel).toHaveClass("rounded-lg", "border", "p-4");
|
||||
});
|
||||
|
||||
it("renders heading with semibold font", () => {
|
||||
render(<DataPanel {...baseProps} />);
|
||||
|
||||
const heading = screen.getByText("YOUR DATA");
|
||||
expect(heading).toHaveClass("font-semibold");
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user