chore: now actually runs tests

# Conflicts:
#   test/utils/programStore.test.ts

src/pages/MonitoringPage/Components.tsx

@@ -1,204 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styles from './MonitoringPage.module.css';
-
-/**
- * HELPER: Unified sender function
- * In a real app, you might move this to a /services or /hooks folder
- */
-const sendUserInterrupt = async (type: string, context: string) => {
-  try {
-    const response = await fetch("http://localhost:8000/button_pressed", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type, context }),
-    });
-    if (!response.ok) throw new Error("Backend response error");
-    console.log(`Interrupt Sent - Type: ${type}, Context: ${context}`);
-  } catch (err) {
-    console.error(`Failed to send interrupt:`, err);
-  }
-};
-
-// --- GESTURE COMPONENT ---
-export const GestureControls: React.FC = () => {
-  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
-
-  const gestures = [
-    { label: "Body Talk 1", value: "animations/Stand/BodyTalk/Speaking/BodyTalk_1" },
-    { label: "Thinking 8", value: "animations/Stand/Gestures/Thinking_8" },
-    { label: "Thinking 1", value: "animations/Stand/Gestures/Thinking_1" },
-    { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" },
-  ];
-
-  return (
-    <div className={styles.gestures}>
-      <h4>Gestures</h4>
-      <div className={styles.gestureInputGroup}>
-        <select 
-          value={selectedGesture} 
-          onChange={(e) => setSelectedGesture(e.target.value)}
-        >
-          {gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
-        </select>
-        <button onClick={() => sendUserInterrupt("gesture", selectedGesture)}>
-          Actuate
-        </button>
-      </div>
-    </div>
-  );
-};
-
-// --- PRESET SPEECH COMPONENT ---
-export const SpeechPresets: React.FC = () => {
-  const phrases = [
-    { label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
-    { label: "Repeat please", text: "Could you repeat that please" },
-    { label: "About yourself", text: "Tell me something about yourself" },
-  ];
-
-  return (
-    <div className={styles.speech}>
-      <h4>Speech Presets</h4>
-      <ul>
-        {phrases.map((phrase, i) => (
-          <li key={i}>
-            <button 
-              className={styles.speechBtn} 
-              onClick={() => sendUserInterrupt("speech", phrase.text)}
-            >
-              "{phrase.label}"
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-// --- DIRECT SPEECH (INPUT) COMPONENT ---
-export const DirectSpeechInput: React.FC = () => {
-  const [text, setText] = useState("");
-
-  const handleSend = () => {
-    if (!text.trim()) return;
-    sendUserInterrupt("speech", text);
-    setText(""); // Clear after sending
-  };
-
-  return (
-    <div className={styles.directSpeech}>
-      <h4>Direct Pepper Speech</h4>
-      <div className={styles.speechInput}>
-        <input 
-          type="text" 
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="Type message..." 
-          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-        />
-        <button onClick={handleSend}>Send</button>
-      </div>
-    </div>
-  );
-};
-
-// --- interface for goals/triggers/norms/conditional norms ---
-type StatusItem = {
-  id?: string | number;
-  achieved?: boolean;
-  description?: string;
-  label?: string;
-  norm?: string;
-};
-
-interface StatusListProps {
-  title: string;
-  items: StatusItem[];
-  type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
-}
-
-// --- STATUS LIST COMPONENT ---
-export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) => {
-  return (
-    <section className={styles.phaseBox}>
-      <h3>{title}</h3>
-      <ul>
-        {items.length > 0 ? (
-          items.map((item, idx) => {
-            const isAchieved = item.achieved;
-            const showIndicator = type !== 'norm';
-            const canOverride = showIndicator && !isAchieved;
-
-            return (
-              <li key={item.id ?? idx} className={styles.statusItem}>
-                {showIndicator && (
-                  <span 
-                    className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
-                    onClick={() => canOverride && sendUserInterrupt("override", String(item.id))}
-                    title={canOverride ? `Send override for ID: ${item.id}` : 'Achieved'}
-                    style={{ cursor: canOverride ? 'pointer' : 'default' }}
-                  >
-                    {isAchieved ? "✔️" : "❌"}
-                  </span>
-                )}
-
-                <span className={styles.itemDescription}>
-                  {item.description || item.label || item.norm}
-                </span>
-              </li>
-            );
-          })
-        ) : (
-          <p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
-        )}
-      </ul>
-    </section>
-  );
-};
-
-
-// --- Robot Connected --- 
-export const RobotConnected = () => {
-
-  /**
-     * The current connection state:
-     * - `true`: Robot is connected.
-     * - `false`: Robot is not connected.
-     * - `null`: Connection status is unknown (initial check in progress).
-     */
-    const [connected, setConnected] = useState<boolean | null>(null);
-  
-    useEffect(() => {
-      // Open a Server-Sent Events (SSE) connection to receive live ping updates.
-      // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
-      const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
-      eventSource.onmessage = (event) => {
-      
-        // Expecting messages in JSON format: `true` or `false`
-        console.log("received message:", event.data);
-        try {
-          const data = JSON.parse(event.data);
-  
-          try {
-            setConnected(data)
-          }
-          catch {
-            console.log("couldnt extract connected from incoming ping data")
-          }
-  
-        } catch {
-          console.log("Ping message not in correct format:", event.data);
-        }
-      };
-  
-      // Clean up the SSE connection when the component unmounts.
-      return () => eventSource.close();
-    }, []);
-
-  return  (
-  <div>
-    <h3>Connection:</h3>
-    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
-  </div>
-  )
-}

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -1,184 +0,0 @@
-.dashboardContainer {
-  display: grid;
-  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
-  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
-  grid-template-areas:
-    "header logs"
-    "main logs"
-    "footer footer";
-  gap: 1rem;
-  padding: 1rem;
-  background-color: #f5f5f5;
-  font-family: Arial, sans-serif;
-}
-
-/* HEADER */
-.experimentOverview {
-  grid-area: header;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-  position: static; /* ensures it scrolls away */
-}
-
-.phaseProgress {
-  margin-top: 0.5rem;
-}
-
-.phase {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  margin: 0 3px;
-  text-align: center;
-  line-height: 25px;
-  background: #ccc;
-}
-
-.completed {
-  background-color: #5cb85c;
-  color: white;
-}
-
-.current {
-  background-color: #f0ad4e;
-  color: white;
-}
-
-.connected {
-  color: green;
-  font-weight: bold;
-}
-
-.disconnected {
-  color: red;
-  font-weight: bold;
-}
-
-.pausePlayInactive{
-  background-color: gray;
-}
-
-.pausePlayActive{
-  background-color: green;
-}
-
-.next {
-  background-color: lightgray;
-}
-
-.restartPhase{
-  background-color: rgb(255, 123, 0);
-}
-
-.restartExperiment{
-  background-color: red;
-}
-
-/* MAIN GRID */
-.phaseOverview {
-  grid-area: main;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, auto);
-  gap: 1rem;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.phaseBox {
-  background: #f9f9f9;
-  border: 1px solid #ddd;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
-}
-
-.phaseOverviewText {
-  grid-column: 1 / -1; /* make the title span across both columns */
-  font-size: 1.4rem;
-  font-weight: 600;
-  margin: 0;            /* remove default section margin */
-  padding: 0.25rem 0;   /* smaller internal space */
-}
-
-.phaseOverviewText h3{
-  margin: 0;            /* removes top/bottom whitespace */
-  padding: 0;           /* keeps spacing tight */
-}
-
-.phaseBox h3 {
-  margin-top: 0;
-  border-bottom: 1px solid #ddd;
-  padding-bottom: 0.4rem;
-}
-
-.checked::before {
-  content: '✔️ ';
-}
-
-/* LOGS */
-.logs {
-  grid-area: logs;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.logs textarea {
-  width: 100%;
-  height: 200px;
-  margin-top: 0.5rem;
-}
-
-/* FOOTER */
-.controlsSection {
-  grid-area: footer;
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  background: #fff;
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.gestures,
-.speech,
-.directSpeech {
-  flex: 1;
-}
-
-.speechInput {
-  display: flex;
-  margin-top: 0.5rem;
-}
-
-.speechInput input {
-  flex: 1;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-}
-
-.speechInput button {
-  background: #007bff;
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-}
-
-/* RESPONSIVE */
-@media (max-width: 900px) {
-  .phaseOverview {
-    grid-template-columns: 1fr;
-  }
-
-  .controlsSection {
-    flex-direction: column;
-  }
-}

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import styles from './MonitoringPage.module.css';
-import useProgramStore from "../../utils/programStore.ts";
-import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList, RobotConnected } from './Components';
-import { nextPhase, pauseExperiment, playExperiment, resetExperiment, resetPhase } from ".//MonitoringPageAPI.ts"
-
-type Goal = { id?: string | number; description?: string; achieved?: boolean };
-type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
-type Norm = { id?: string | number; norm?: string };
-
-
-const MonitoringPage: React.FC = () => {
-  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
-  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
-  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
-  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
-
-  // Can be used to block actions until feedback from CB.
-  const [loading, setLoading] = React.useState(false);
-  const [isPlaying, setIsPlaying] = React.useState(false);
-
-  const phaseIds = getPhaseIds();
-  const [phaseIndex, _] = React.useState(0);
-
-  if (phaseIds.length === 0) {
-    return <p className={styles.empty}>No program loaded.</p>;
-  }
-
-  const phaseId = phaseIds[phaseIndex];
-
-  const goals = getGoalsInPhase(phaseId) as Goal[];
-  const triggers = getTriggersInPhase(phaseId) as Trigger[];
-  const norms = getNormsInPhase(phaseId) as Norm[];
-
-  // Handle logic of 'next' button.
-
-  const handleButton = async (button: string, _context?: string, _endpoint?: string) => {
-    try {
-      setLoading(true);
-      switch (button)  {
-        case "pause":
-          await pauseExperiment();
-          break;
-        case "play":
-          await playExperiment();
-          break;
-        case "nextPhase":
-          await nextPhase();
-          break;
-        case "resetPhase":
-          await resetPhase();
-          break;
-        case "resetExperiment":
-          await resetExperiment();
-          break;
-        default:
-      }
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  }
-  return (
-    <div className={styles.dashboardContainer}>
-      {/* HEADER */}
-      <header className={styles.experimentOverview}>
-        <div className={styles.phaseName}>
-          <h2>Experiment Overview</h2>
-          <p><strong>Phase name:</strong> Rhyming fish</p>
-          <div className={styles.phaseProgress}>
-            <span className={`${styles.phase} ${styles.completed}`}>1</span>
-            <span className={`${styles.phase} ${styles.completed}`}>2</span>
-            <span className={`${styles.phase} ${styles.current}`}>3</span>
-            <span className={styles.phase}>4</span>
-            <span className={styles.phase}>5</span>
-          </div>
-        </div>
-
-        <div className={styles.experimentControls}>
-          <h3>Experiment Controls</h3>
-          <div className={styles.controlsButtons}>
-            {/*Pause button*/}
-            <button 
-            className={`${!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
-            onClick={() => {
-              setIsPlaying(false);
-              handleButton("pause");}
-            }
-            disabled={loading}
-            >❚❚</button>
-
-            {/*Play button*/}
-            <button 
-            className={`${isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
-            onClick={() => {
-              setIsPlaying(true);
-              handleButton("play");}
-            }
-            disabled={loading}
-            >▶</button>
-
-            {/*Next button*/}
-            <button
-              className={styles.next}
-              onClick={() => handleButton("nextPhase")}
-              disabled={loading}
-            >
-              ⏭
-            </button>
-
-            {/*Restart Phase button*/}
-            <button 
-              className={styles.restartPhase}
-              onClick={() => handleButton("resetPhase")}
-              disabled={loading}
-            >
-              ↩
-            </button>
-
-            {/*Restart Experiment button*/}
-            <button 
-              className={styles.restartExperiment}
-              onClick={() => handleButton("resetExperiment")}
-              disabled={loading}
-              >
-                ⟲
-              </button>
-          </div>  
-        </div>
-
-        <div className={styles.connectionStatus}>
-          {RobotConnected()}
-        </div>
-      </header>
-
-      {/* MAIN GRID */}
-      
-      <main className={styles.phaseOverview}>
-        <section className={styles.phaseOverviewText}>
-          <h3>Phase Overview</h3>
-        </section>
-
-        <StatusList title="Goals" items={goals} type="goal" />
-        <StatusList title="Triggers" items={triggers} type="trigger" />
-        <StatusList title="Norms" items={norms} type="norm" />
-        <StatusList 
-          title="Conditional Norms" 
-          items={[{ id: 'cn_1', norm: '“RP is sad” - Be nice', achieved: false }]} 
-          type="cond_norm" 
-        />
-      </main>
-
-      {/* LOGS */}
-      <aside className={styles.logs}>
-        <h3>Logs</h3>
-        <div className={styles.logHeader}>
-          <span>Global:</span>
-          <button>ALL</button>
-          <button>Add</button>
-          <button className={styles.live}>Live</button>
-        </div>
-        <textarea defaultValue="Example Log: much log"></textarea>
-      </aside>
-
-      {/* FOOTER */}
-      <footer className={styles.controlsSection}>
-        <GestureControls />
-        <SpeechPresets />
-        <DirectSpeechInput />
-      </footer>
-    </div>
-  );
-}
-
-export default MonitoringPage;

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -1,64 +0,0 @@
-const API_BASE = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
-
-
-/**
- * HELPER: Unified sender function
- * In a real app, you might move this to a /services or /hooks folder
- */
-const sendAPICall = async (type: string, context: string, endpoint?: string) => {
-  try {
-    const response = await fetch(`${API_BASE}${endpoint ?? ""}`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type, context }),
-    });
-    if (!response.ok) throw new Error("Backend response error");
-    console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
-  } catch (err) {
-    console.error(`Failed to send api call:`, err);
-  }
-};
-
-
-/**
- * Sends an API call to the CB for going to the next phase. 
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function nextPhase(): Promise<void> {
-  const type = "next_phase"
-  const context = ""
-  sendAPICall(type, context)
-}
-
-
-/**
- * Sends an API call to the CB for going to reset the currect phase 
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function resetPhase(): Promise<void> {
-  const type = "reset_phase"
-  const context = ""
-  sendAPICall(type, context)
-}
-
-/**
- * Sends an API call to the CB for going to reset the experiment
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function resetExperiment(): Promise<void> {
-  const type = "reset_experiment"
-  const context = ""
-  sendAPICall(type, context)
-}
-
-export async function pauseExperiment(): Promise<void> {
-  const type = "pause"
-  const context = "true"
-  sendAPICall(type, context)
-}
-
-export async function playExperiment(): Promise<void> {
-  const type = "pause"
-  const context = "false"
-  sendAPICall(type, context)
-}

src/pages/VisProgPage/VisProg.tsx

@@ -16,7 +16,7 @@ import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
 import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
-import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
+import SimpleProgram from "../SimpleProgram/SimpleProgram.tsx";
 
 // --| config starting params for flow |--
 
@@ -140,7 +140,7 @@ function VisualProgrammingUI() {
 }
 
 // currently outputs the prepared program to the console
-function runProgramm() {
+function runProgram() {
   const phases = graphReducer();
   const program = {phases}
   console.log(JSON.stringify(program, null, 2));
@@ -183,11 +183,11 @@ function VisProgPage() {
   const [showSimpleProgram, setShowSimpleProgram] = useState(false);
   const setProgramState = useProgramStore((state) => state.setProgramState);
 
-  const runProgram = () => {
+  const onClick = () => {
     const phases = graphReducer();       // reduce graph
     setProgramState({ phases });          // <-- save to store
     setShowSimpleProgram(true);          // show SimpleProgram
-    runProgramm();                        // send to backend if needed
+    runProgram();                        // send to backend if needed
   };
 
   if (showSimpleProgram) {
@@ -196,7 +196,7 @@ function VisProgPage() {
       <button onClick={() => setShowSimpleProgram(false)}>
         Back to Editor ◀ 
       </button>
-      <MonitoringPage/>
+      <SimpleProgram/>
     </div>
     );
   }
@@ -204,7 +204,7 @@ function VisProgPage() {
   return (
     <>
       <VisualProgrammingUI/>
-      <button onClick={runProgram}>run program</button>
+      <button onClick={onClick}>run program</button>
     </>
   )
 }

test/pages/simpleProgram/SimpleProgram.test.tsx

@@ -0,0 +1,176 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import SimpleProgram from "../../../src/pages/SimpleProgram/SimpleProgram";
+import useProgramStore from "../../../src/utils/programStore";
+
+/**
+ * Helper to preload the program store before rendering.
+ */
+function loadProgram(phases: Record<string, unknown>[]) {
+  useProgramStore.getState().setProgramState({ phases });
+}
+
+describe("SimpleProgram", () => {
+  beforeEach(() => {
+    loadProgram([]);
+  });
+
+  test("shows empty state when no program is loaded", () => {
+    render(<SimpleProgram />);
+    expect(screen.getByText("No program loaded.")).toBeInTheDocument();
+  });
+
+  test("renders first phase content", () => {
+    loadProgram([
+      {
+        id: "phase-1",
+        norms: [{ id: "n1", norm: "Be polite" }],
+        goals: [{ id: "g1", description: "Finish task", achieved: true }],
+        triggers: [{ id: "t1", label: "Keyword trigger" }],
+      },
+    ]);
+
+    render(<SimpleProgram />);
+
+    expect(screen.getByText("Phase 1 / 1")).toBeInTheDocument();
+    expect(screen.getByText("Be polite")).toBeInTheDocument();
+    expect(screen.getByText("Finish task")).toBeInTheDocument();
+    expect(screen.getByText("Keyword trigger")).toBeInTheDocument();
+  });
+
+  test("renders empty messages when phase has no data", () => {
+    loadProgram([
+      {
+        id: "phase-1",
+        norms: [],
+        goals: [],
+        triggers: [],
+      },
+    ]);
+
+    render(<SimpleProgram />);
+
+    expect(screen.getAllByText("No norms defined.").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("No goals defined.").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("No triggers defined.").length).toBeGreaterThanOrEqual(1);
+    expect(
+      screen.getByText("No conditional norms defined.")
+    ).toBeInTheDocument();
+  });
+
+  test("allows navigating between phases", () => {
+    loadProgram([
+      {
+        id: "phase-1",
+        norms: [],
+        goals: [],
+        triggers: [],
+      },
+      {
+        id: "phase-2",
+        norms: [{ id: "n2", norm: "Be careful" }],
+        goals: [],
+        triggers: [],
+      },
+    ]);
+
+    render(<SimpleProgram />);
+
+    expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Next ▶"));
+
+    expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
+    expect(screen.getByText("Be careful")).toBeInTheDocument();
+  });
+
+  test("prev button is disabled on first phase", () => {
+    loadProgram([{ id: "phase-1", norms: [], goals: [], triggers: [] }]);
+
+    render(<SimpleProgram />);
+    expect(screen.getByText("◀ Prev")).toBeDisabled();
+  });
+
+  test("next button is disabled on last phase", () => {
+    loadProgram([{ id: "phase-1", norms: [], goals: [], triggers: [] }]);
+
+    render(<SimpleProgram />);
+    expect(screen.getByText("Next ▶")).toBeDisabled();
+  });
+
+  test("prev and next buttons enable/disable correctly when navigating", () => {
+    loadProgram([
+      { id: "p1", norms: [], goals: [], triggers: [] },
+      { id: "p2", norms: [], goals: [], triggers: [] },
+    ]);
+
+    render(<SimpleProgram />);
+
+    const prev = screen.getByText("◀ Prev");
+    const next = screen.getByText("Next ▶");
+
+    expect(prev).toBeDisabled();
+    expect(next).not.toBeDisabled();
+
+    fireEvent.click(next);
+
+    expect(prev).not.toBeDisabled();
+    expect(next).toBeDisabled();
+  });
+
+  test("renders achieved and unachieved goals with correct icons", () => {
+    loadProgram([
+      {
+        id: "phase-1",
+        norms: [],
+        goals: [
+          { id: "g1", description: "Done goal", achieved: true },
+          { id: "g2", description: "Failed goal", achieved: false },
+        ],
+        triggers: [],
+      },
+    ]);
+
+    render(<SimpleProgram />);
+
+    expect(screen.getByText("✔")).toBeInTheDocument();
+    expect(screen.getByText("✖")).toBeInTheDocument();
+    expect(screen.getByText("Done goal")).toBeInTheDocument();
+    expect(screen.getByText("Failed goal")).toBeInTheDocument();
+  });
+
+  test("renders fallback labels when optional fields are missing", () => {
+    loadProgram([
+      {
+        id: "phase-1",
+        norms: [{}],
+        goals: [{}],
+        triggers: [{}],
+      },
+    ]);
+
+    render(<SimpleProgram />);
+
+    expect(screen.getByText("Unnamed norm")).toBeInTheDocument();
+    expect(screen.getByText("Unnamed goal")).toBeInTheDocument();
+    expect(screen.getByText("Unnamed trigger")).toBeInTheDocument();
+  });
+
+  test("does not crash when navigating beyond boundaries", () => {
+    loadProgram([
+      { id: "p1", norms: [], goals: [], triggers: [] },
+      { id: "p2", norms: [], goals: [], triggers: [] },
+    ]);
+
+    render(<SimpleProgram />);
+
+    fireEvent.click(screen.getByText("Next ▶"));
+    fireEvent.click(screen.getByText("Next ▶"));
+
+    expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("◀ Prev"));
+    fireEvent.click(screen.getByText("◀ Prev"));
+
+    expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
+  });
+});

test/pages/simpleProgram/SimpleProgram.tsx

@@ -1,83 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import SimpleProgram from "../../../src/pages/SimpleProgram/SimpleProgram";
-import useProgramStore from "../../../src/utils/programStore";
-
-/**
- * Helper to preload the program store before rendering.
- */
-function loadProgram(phases: Record<string, unknown>[]) {
-  useProgramStore.getState().setProgramState({ phases });
-}
-
-describe("SimpleProgram", () => {
-  beforeEach(() => {
-    loadProgram([]);
-  });
-
-  test("shows empty state when no program is loaded", () => {
-    render(<SimpleProgram />);
-    expect(screen.getByText("No program loaded.")).toBeInTheDocument();
-  });
-
-  test("renders first phase content", () => {
-    loadProgram([
-      {
-        id: "phase-1",
-        norms: [{ id: "n1", norm: "Be polite" }],
-        goals: [{ id: "g1", description: "Finish task", achieved: true }],
-        triggers: [{ id: "t1", label: "Keyword trigger" }],
-      },
-    ]);
-
-    render(<SimpleProgram />);
-
-    expect(screen.getByText("Phase 1 / 1")).toBeInTheDocument();
-    expect(screen.getByText("Be polite")).toBeInTheDocument();
-    expect(screen.getByText("Finish task")).toBeInTheDocument();
-    expect(screen.getByText("Keyword trigger")).toBeInTheDocument();
-  });
-
-  test("allows navigating between phases", () => {
-    loadProgram([
-      {
-        id: "phase-1",
-        norms: [],
-        goals: [],
-        triggers: [],
-      },
-      {
-        id: "phase-2",
-        norms: [{ id: "n2", norm: "Be careful" }],
-        goals: [],
-        triggers: [],
-      },
-    ]);
-
-    render(<SimpleProgram />);
-
-    expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByText("Next ▶"));
-
-    expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
-    expect(screen.getByText("Be careful")).toBeInTheDocument();
-  });
-
-  test("prev button is disabled on first phase", () => {
-    loadProgram([
-      { id: "phase-1", norms: [], goals: [], triggers: [] },
-    ]);
-
-    render(<SimpleProgram />);
-    expect(screen.getByText("◀ Prev")).toBeDisabled();
-  });
-
-  test("next button is disabled on last phase", () => {
-    loadProgram([
-      { id: "phase-1", norms: [], goals: [], triggers: [] },
-    ]);
-
-    render(<SimpleProgram />);
-    expect(screen.getByText("Next ▶")).toBeDisabled();
-  });
-});

test/utils/programStore.test.ts

@@ -85,14 +85,30 @@ describe('useProgramStore', () => {
     ).toThrow('phase with id:"missing-phase" not found');
   });
 
-  // this test should be at the bottom to avoid conflicts with the previous tests
   it('should clone program state when setting it (no shared references should exist)', () => {
-    useProgramStore.getState().setProgramState(mockProgram);
+    const changeableMockProgram: ReducedProgram = {
+      phases: [
+        {
+          id: 'phase-1',
+          norms: [{ id: 'norm-1' }],
+          goals: [{ id: 'goal-1' }],
+          triggers: [{ id: 'trigger-1' }],
+        },
+        {
+          id: 'phase-2',
+          norms: [{ id: 'norm-2' }],
+          goals: [{ id: 'goal-2' }],
+          triggers: [{ id: 'trigger-2' }],
+        },
+      ],
+    };
+
+    useProgramStore.getState().setProgramState(changeableMockProgram);
 
     const storedProgram = useProgramStore.getState().getProgramState();
 
     // mutate original
-    (mockProgram.phases[0].norms as any[]).push({ id: 'norm-mutated' });
+    (changeableMockProgram.phases[0].norms as any[]).push({ id: 'norm-mutated' });
 
     // store should NOT change
     expect(storedProgram.phases[0]['norms']).toHaveLength(1);