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

// ABOUTME: Unit tests for NutritionPanel component.
// ABOUTME: Tests display of seeds, carb range, and keto guidance.
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import type { NutritionGuidance } from "@/types";
import { NutritionPanel } from "./nutrition-panel";

describe("NutritionPanel", () => {
  const baseNutrition: NutritionGuidance = {
    seeds: "Flax & Pumpkin",
    carbRange: "100-150g",
    ketoGuidance: "Moderate carbs today",
  };

  describe("rendering", () => {
    it("renders the NUTRITION TODAY heading", () => {
      render(<NutritionPanel nutrition={baseNutrition} />);

      expect(screen.getByText("NUTRITION TODAY")).toBeInTheDocument();
    });

    it("renders seeds guidance with emoji", () => {
      render(<NutritionPanel nutrition={baseNutrition} />);

      expect(screen.getByText(/🌱 Flax & Pumpkin/)).toBeInTheDocument();
    });

    it("renders carb range with emoji", () => {
      render(<NutritionPanel nutrition={baseNutrition} />);

      expect(screen.getByText(/🍽️ Carbs: 100-150g/)).toBeInTheDocument();
    });

    it("renders keto guidance with emoji", () => {
      render(<NutritionPanel nutrition={baseNutrition} />);

      expect(
        screen.getByText(/🥑 Keto: Moderate carbs today/),
      ).toBeInTheDocument();
    });
  });

  describe("seed cycling phases", () => {
    it("displays follicular phase seeds (flax & pumpkin)", () => {
      const nutrition: NutritionGuidance = {
        ...baseNutrition,
        seeds: "Flax & Pumpkin",
      };

      render(<NutritionPanel nutrition={nutrition} />);

      expect(screen.getByText(/🌱 Flax & Pumpkin/)).toBeInTheDocument();
    });

    it("displays luteal phase seeds (sunflower & sesame)", () => {
      const nutrition: NutritionGuidance = {
        ...baseNutrition,
        seeds: "Sunflower & Sesame",
      };

      render(<NutritionPanel nutrition={nutrition} />);

      expect(screen.getByText(/🌱 Sunflower & Sesame/)).toBeInTheDocument();
    });
  });

  describe("carb range variations", () => {
    it("displays low carb range", () => {
      const nutrition: NutritionGuidance = {
        ...baseNutrition,
        carbRange: "50-75g",
      };

      render(<NutritionPanel nutrition={nutrition} />);

      expect(screen.getByText(/🍽️ Carbs: 50-75g/)).toBeInTheDocument();
    });

    it("displays high carb range", () => {
      const nutrition: NutritionGuidance = {
        ...baseNutrition,
        carbRange: "150-200g",
      };

      render(<NutritionPanel nutrition={nutrition} />);

      expect(screen.getByText(/🍽️ Carbs: 150-200g/)).toBeInTheDocument();
    });
  });

  describe("keto guidance variations", () => {
    it("displays keto-friendly guidance", () => {
      const nutrition: NutritionGuidance = {
        ...baseNutrition,
        ketoGuidance: "Good day for keto",
      };

      render(<NutritionPanel nutrition={nutrition} />);

      expect(
        screen.getByText(/🥑 Keto: Good day for keto/),
      ).toBeInTheDocument();
    });

    it("displays carb-loading guidance", () => {
      const nutrition: NutritionGuidance = {
        ...baseNutrition,
        ketoGuidance: "Consider carb loading",
      };

      render(<NutritionPanel nutrition={nutrition} />);

      expect(
        screen.getByText(/🥑 Keto: Consider carb loading/),
      ).toBeInTheDocument();
    });
  });

  describe("styling", () => {
    it("renders within a bordered container", () => {
      const { container } = render(
        <NutritionPanel nutrition={baseNutrition} />,
      );

      const panel = container.firstChild as HTMLElement;
      expect(panel).toHaveClass("rounded-lg", "border", "p-4");
    });

    it("renders heading with semibold font", () => {
      render(<NutritionPanel nutrition={baseNutrition} />);

      const heading = screen.getByText("NUTRITION TODAY");
      expect(heading).toHaveClass("font-semibold");
    });
  });
});