establish db

apps/web/src/components/TreatmentTimeline.test.tsx

@@ -1,120 +1,88 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import TreatmentTimeline, { treatmentStepsWithUrgency, type TreatmentStep } from "@/components/TreatmentTimeline";
+import TreatmentTimeline, {
+  treatmentStepsWithUrgency,
+  type TreatmentStep,
+  type UrgencyLevel,
+} from "@/components/TreatmentTimeline";
 
 describe("TreatmentTimeline", () => {
   const mockSteps: TreatmentStep[] = [
-    { action: "Remove and destroy all severely infected leaves immediately", urgency: "immediate" },
-    { action: "Apply copper-based fungicide spray every 7-10 days", urgency: "within-week" },
-    { action: "Improve air circulation by pruning lower leaves", urgency: "ongoing" },
-    { action: "Mulch around base with 2-3 inches of straw", urgency: "ongoing" },
-    { action: "Switch to drip irrigation to keep foliage dry", urgency: "ongoing" },
+    { action: "Remove affected leaves immediately", urgency: "immediate" },
+    { action: "Apply copper fungicide within a week", urgency: "within-week" },
+    { action: "Monitor plant health regularly", urgency: "ongoing" },
   ];
 
-  function renderTimeline(steps: TreatmentStep[]) {
-    return render(<TreatmentTimeline steps={steps} />);
-  }
-
-  describe("renders all treatment steps", () => {
-    it("shows all step actions", () => {
-      renderTimeline(mockSteps);
-      mockSteps.forEach((step) => {
-        expect(screen.getByText(step.action)).toBeInTheDocument();
-      });
-    });
-
-    it("shows numbered step indicators", () => {
-      renderTimeline(mockSteps);
-      for (let i = 1; i <= mockSteps.length; i++) {
-        expect(screen.getByText(i.toString())).toBeInTheDocument();
-      }
-    });
-
-    it("shows urgency badges for each step", () => {
-      renderTimeline(mockSteps);
-      expect(screen.getByText("Immediate")).toBeInTheDocument();
-      expect(screen.getByText("Within a week")).toBeInTheDocument();
-      expect(screen.getAllByText("Ongoing").length).toBeGreaterThan(0);
-    });
+  it("renders all treatment steps", () => {
+    render(<TreatmentTimeline steps={mockSteps} />);
+    expect(screen.getByText("Remove affected leaves immediately")).toBeInTheDocument();
+    expect(screen.getByText("Apply copper fungicide within a week")).toBeInTheDocument();
+    expect(screen.getByText("Monitor plant health regularly")).toBeInTheDocument();
   });
 
-  describe("urgency levels", () => {
-    it("renders immediate urgency with red styling", () => {
-      renderTimeline(mockSteps);
-      const immediateBadge = screen.getByText("Immediate");
-      expect(immediateBadge.closest("span")).toHaveClass("bg-red-100");
-    });
-
-    it("renders within-week urgency with amber styling", () => {
-      renderTimeline(mockSteps);
-      const weekBadge = screen.getByText("Within a week");
-      expect(weekBadge.closest("span")).toHaveClass("bg-warning-amber-100");
-    });
-
-    it("renders ongoing urgency with green styling", () => {
-      renderTimeline(mockSteps);
-      const ongoingBadges = screen.getAllByText("Ongoing");
-      expect(ongoingBadges.length).toBeGreaterThan(0);
-      expect(ongoingBadges[0].closest("span")).toHaveClass("bg-leaf-green-100");
-    });
+  it("renders numbered step indicators", () => {
+    render(<TreatmentTimeline steps={mockSteps} />);
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("2")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
   });
 
-  describe("disclaimer", () => {
-    it("shows treatment disclaimer at bottom", () => {
-      renderTimeline(mockSteps);
-      expect(screen.getByText(/Treatments may vary depending on plant species/)).toBeInTheDocument();
-    });
+  it("renders urgency badges", () => {
+    render(<TreatmentTimeline steps={mockSteps} />);
+    expect(screen.getByText("Immediate")).toBeInTheDocument();
+    expect(screen.getByText("Within a week")).toBeInTheDocument();
+    expect(screen.getByText("Ongoing")).toBeInTheDocument();
   });
 
-  describe("empty state", () => {
-    it("shows message when no steps provided", () => {
-      renderTimeline([]);
-      expect(screen.getByText("No treatment steps available.")).toBeInTheDocument();
-    });
+  it("renders disclaimer at bottom", () => {
+    render(<TreatmentTimeline steps={mockSteps} />);
+    expect(screen.getByText(/Treatments may vary/i)).toBeInTheDocument();
+    expect(screen.getByText(/consult a certified plant pathologist/i)).toBeInTheDocument();
   });
 
-  describe("timeline connectors", () => {
-    it("shows connector lines between steps", () => {
-      renderTimeline(mockSteps);
-      // There should be N-1 connector lines
-      const connectors = document.querySelectorAll('.bg-zinc-200.dark\\:bg-zinc-700');
-      // At least some connectors should exist for multi-step timelines
-      expect(connectors.length).toBeGreaterThan(0);
-    });
+  it("renders empty state when no steps provided", () => {
+    render(<TreatmentTimeline steps={[]} />);
+    expect(screen.getByText(/No treatment steps available/i)).toBeInTheDocument();
   });
 
-  describe("treatmentStepsWithUrgency helper", () => {
-    it("maps first step to immediate", () => {
-      const steps = treatmentStepsWithUrgency(["Step 1", "Step 2", "Step 3"]);
-      expect(steps[0].urgency).toBe("immediate");
-    });
+  it("renders single step without connector line", () => {
+    render(<TreatmentTimeline steps={[mockSteps[0]]} />);
+    expect(screen.getByText("Remove affected leaves immediately")).toBeInTheDocument();
+  });
 
-    it("maps second step to within-week", () => {
-      const steps = treatmentStepsWithUrgency(["Step 1", "Step 2", "Step 3"]);
-      expect(steps[1].urgency).toBe("within-week");
-    });
-
-    it("maps remaining steps to ongoing", () => {
-      const steps = treatmentStepsWithUrgency(["Step 1", "Step 2", "Step 3", "Step 4"]);
-      expect(steps[2].urgency).toBe("ongoing");
-      expect(steps[3].urgency).toBe("ongoing");
-    });
-
-    it("preserves action text", () => {
-      const actions = ["Remove leaves", "Apply fungicide", "Improve circulation"];
-      const steps = treatmentStepsWithUrgency(actions);
-      expect(steps.map((s) => s.action)).toEqual(actions);
-    });
-
-    it("handles single step", () => {
-      const steps = treatmentStepsWithUrgency(["Only step"]);
-      expect(steps).toHaveLength(1);
-      expect(steps[0].urgency).toBe("immediate");
-    });
-
-    it("handles empty array", () => {
-      const steps = treatmentStepsWithUrgency([]);
-      expect(steps).toHaveLength(0);
-    });
+  it("uses list role for timeline", () => {
+    render(<TreatmentTimeline steps={mockSteps} />);
+    const list = screen.getByRole("list");
+    expect(list).toBeInTheDocument();
+  });
+});
+
+describe("treatmentStepsWithUrgency", () => {
+  it("maps first step to immediate urgency", () => {
+    const steps = treatmentStepsWithUrgency(["First action"]);
+    expect(steps[0].urgency).toBe("immediate");
+    expect(steps[0].action).toBe("First action");
+  });
+
+  it("maps second step to within-week urgency", () => {
+    const steps = treatmentStepsWithUrgency(["First", "Second"]);
+    expect(steps[1].urgency).toBe("within-week");
+  });
+
+  it("maps remaining steps to ongoing urgency", () => {
+    const steps = treatmentStepsWithUrgency(["First", "Second", "Third", "Fourth"]);
+    expect(steps[2].urgency).toBe("ongoing");
+    expect(steps[3].urgency).toBe("ongoing");
+  });
+
+  it("returns empty array for empty input", () => {
+    const steps = treatmentStepsWithUrgency([]);
+    expect(steps).toEqual([]);
+  });
+
+  it("preserves action text", () => {
+    const actions = ["Action A", "Action B", "Action C"];
+    const steps = treatmentStepsWithUrgency(actions);
+    expect(steps.map((s) => s.action)).toEqual(actions);
   });
 });