phaseflow/src/components/dashboard/data-panel.test.tsx

// 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");
    });
  });
});