Merge pull request #74 from fac30/feature/insight-area-charts

New Insights Charts

__tests__/AreaChart.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen } from "@testing-library/react";
+import MoodAreaChart from "@/app/insights/components/AreaChart";
+
+jest.mock("@/ui/shared/PlotlyChart", () => ({
+  __esModule: true,
+  default: ({ data }: { data: any }) => (
+    <div data-testid="plotly-chart" data-prop={JSON.stringify(data)} />
+  ),
+}));
+
+describe("AreaChart Component", () => {
+  const mockData = [
+    {
+      neurotransmitters: {
+        dopamine: 5,
+        serotonin: 3,
+        adrenaline: 7,
+      },
+      moodName: "Happy",
+      timestamp: "2023-01-01T12:00:00Z",
+      id: "1",
+      createdAt: "2023-01-01T12:00:00Z",
+    },
+    {
+      neurotransmitters: {
+        dopamine: 6,
+        serotonin: 4,
+        adrenaline: 8,
+      },
+      moodName: "Sad",
+      timestamp: "2023-01-02T12:00:00Z",
+      id: "2",
+      createdAt: "2023-01-02T12:00:00Z",
+    }
+  ];
+
+  const mockStartOfRange = new Date("2023-01-01T00:00:00Z");
+  const mockEndOfRange = new Date("2023-12-31T23:59:59Z");
+
+  it("renders without crashing", () => {
+    render(
+      <MoodAreaChart
+        dataArray={mockData}
+        startOfRange={mockStartOfRange}
+        endOfRange={mockEndOfRange}
+        selectedButton="day"
+      />
+    );
+
+    const plotlyChart = screen.getByTestId("plotly-chart");
+    expect(plotlyChart).toBeInTheDocument();
+  });
+
+  it("displays a message when no data is available", () => {
+    render(
+      <MoodAreaChart
+        dataArray={[]}
+        startOfRange={mockStartOfRange}
+        endOfRange={mockEndOfRange}
+        selectedButton="day"
+      />
+    );
+
+    expect(
+      screen.getByText("No data available for the graph.")
+    ).toBeInTheDocument();
+  });
+
+  it("correctly calculates percentage distribution", () => {
+    render(
+      <MoodAreaChart
+        dataArray={mockData}
+        startOfRange={mockStartOfRange}
+        endOfRange={mockEndOfRange}
+        selectedButton="day"
+      />
+    );
+
+    const plotlyChart = screen.getByTestId("plotly-chart");
+    const plotlyData = JSON.parse(
+      plotlyChart.getAttribute("data-prop") || "[]"
+    );
+
+    // Check that we have two traces (one for each mood)
+    expect(plotlyData).toHaveLength(2);
+
+    // First data point should be 100% for "Happy"
+    const happyTrace = plotlyData.find((d: any) => d.name === "Happy");
+    expect(happyTrace.y[0]).toBe(100); // First point should be 100%
+    expect(happyTrace.y[1]).toBe(50);  // Second point should be 50%
+
+    // Second mood should start at 0% and go to 50%
+    const sadTrace = plotlyData.find((d: any) => d.name === "Sad");
+    expect(sadTrace.y[0]).toBe(0);    // First point should be 0%
+    expect(sadTrace.y[1]).toBe(50);   // Second point should be 50%
+  });
+}); 

__tests__/Moods.test.tsx

@@ -1,13 +1,14 @@
 import { render, screen } from "@testing-library/react";
 import MoodsPage from "@/app/moods/page";
 
-// Mock the child components
 jest.mock("@/app/moods/components/Cube", () => ({
-  Cube: () => <div data-testid="mock-cube">Cube Component</div>,
+  __esModule: true,
+  default: () => <div data-testid="mock-cube">Cube Component</div>,
 }));
 
 jest.mock("@/app/moods/components/SliderBox", () => ({
-  SliderBox: () => <div data-testid="mock-slider-box">SliderBox Component</div>,
+  __esModule: true,
+  default: () => <div data-testid="mock-slider-box">SliderBox Component</div>,
 }));
 
 jest.mock("next/navigation", () => ({
@@ -32,7 +33,7 @@ describe("MoodsPage", () => {
 
   it("has correct layout structure", () => {
     const { container } = render(<MoodsPage />);
-
+    
     const mainDiv = container.firstChild;
     expect(mainDiv).toHaveClass("flex", "flex-col", "gap-4");
   });

__tests__/MoodsCube.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from "@testing-library/react";
-import { Cube } from "@/app/moods/components/Cube";
-import { SliderBox } from "@/app/moods/components/SliderBox";
+import Cube from "@/app/moods/components/Cube";
+import SliderBox from "@/app/moods/components/SliderBox";
 import { useState } from "react";
 import { Datum } from "plotly.js";
 

__tests__/MoodsMatrixToggle.test.tsx

@@ -1,12 +1,11 @@
 import { render, screen, fireEvent, act } from "@testing-library/react";
-import { Cube } from "@/app/moods/components/Cube";
+import Cube from "@/app/moods/components/Cube";
 import { useState } from "react";
 import { Datum } from "plotly.js";
 
 jest.mock("@/ui/shared/PlotlyChart", () => ({
   __esModule: true,
   default: ({ data, onLoaded }: { data: any; onLoaded: () => void }) => {
-    // Simulate the Plotly chart triggering the onLoaded callback
     setTimeout(onLoaded, 0);
     return <div data-testid="plotly-chart" data-prop={JSON.stringify(data)} />;
   },

__tests__/StreamGraph.test.tsx

@@ -0,0 +1,116 @@
+import { render, screen } from "@testing-library/react";
+import MoodStreamGraph from "@/app/insights/components/StreamGraph";
+
+jest.mock("@/ui/shared/PlotlyChart", () => ({
+  __esModule: true,
+  default: ({ data }: { data: any }) => (
+    <div data-testid="plotly-chart" data-prop={JSON.stringify(data)} />
+  ),
+}));
+
+describe("StreamGraph Component", () => {
+  const mockData = [
+    {
+      neurotransmitters: {
+        dopamine: 5,
+        serotonin: 3,
+        adrenaline: 7,
+      },
+      moodName: "Happy",
+      timestamp: "2023-01-01T12:00:00Z",
+      id: "1",
+      createdAt: "2023-01-01T12:00:00Z",
+    },
+    {
+      neurotransmitters: {
+        dopamine: 6,
+        serotonin: 4,
+        adrenaline: 8,
+      },
+      moodName: "Sad",
+      timestamp: "2023-01-02T12:00:00Z",
+      id: "2",
+      createdAt: "2023-01-02T12:00:00Z",
+    }
+  ];
+
+  const mockStartOfRange = new Date("2023-01-01T00:00:00Z");
+  const mockEndOfRange = new Date("2023-12-31T23:59:59Z");
+
+  it("renders without crashing", () => {
+    render(
+      <MoodStreamGraph
+        dataArray={mockData}
+        startOfRange={mockStartOfRange}
+        endOfRange={mockEndOfRange}
+        selectedButton="day"
+      />
+    );
+
+    const plotlyChart = screen.getByTestId("plotly-chart");
+    expect(plotlyChart).toBeInTheDocument();
+  });
+
+  it("displays a message when no data is available", () => {
+    render(
+      <MoodStreamGraph
+        dataArray={[]}
+        startOfRange={mockStartOfRange}
+        endOfRange={mockEndOfRange}
+        selectedButton="day"
+      />
+    );
+
+    expect(
+      screen.getByText("No data available for the graph.")
+    ).toBeInTheDocument();
+  });
+
+  it("displays a message when no data is in selected range", () => {
+    const outOfRangeStart = new Date("2024-01-01T00:00:00Z");
+    const outOfRangeEnd = new Date("2024-12-31T23:59:59Z");
+
+    render(
+      <MoodStreamGraph
+        dataArray={mockData}
+        startOfRange={outOfRangeStart}
+        endOfRange={outOfRangeEnd}
+        selectedButton="day"
+      />
+    );
+
+    expect(
+      screen.getByText("No data available in the selected range.")
+    ).toBeInTheDocument();
+  });
+
+  it("correctly sets up stream graph data", () => {
+    render(
+      <MoodStreamGraph
+        dataArray={mockData}
+        startOfRange={mockStartOfRange}
+        endOfRange={mockEndOfRange}
+        selectedButton="day"
+      />
+    );
+
+    const plotlyChart = screen.getByTestId("plotly-chart");
+    const plotlyData = JSON.parse(
+      plotlyChart.getAttribute("data-prop") || "[]"
+    );
+
+    // Check that we have two traces (one for each mood)
+    expect(plotlyData).toHaveLength(2);
+
+    // First mood should start with height 0.5
+    const firstMoodTrace = plotlyData[0];
+    expect(firstMoodTrace.y[0]).toBe(0.5);
+
+    // Second mood should start with height -0.5 to balance the graph
+    const secondMoodTrace = plotlyData[1];
+    expect(secondMoodTrace.y[0]).toBe(-0.5);
+
+    // Values should sum to 0 at any point
+    expect(firstMoodTrace.y[0] + secondMoodTrace.y[0]).toBe(0);
+  });
+});