feat: The Big One UI

test/pages/monitoringPage/MonitoringPageComponents.test.tsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+// Corrected Imports
+import { 
+  GestureControls, 
+  SpeechPresets, 
+  DirectSpeechInput, 
+  StatusList, 
+  RobotConnected 
+} from '../../../src/pages/MonitoringPage/MonitoringPageComponents';
+
+import * as MonitoringAPI from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
+
+// Mock the API Call function with the correct path
+jest.mock('../../../src/pages/MonitoringPage/MonitoringPageAPI', () => ({
+  sendAPICall: jest.fn(),
+}));
+
+describe('MonitoringPageComponents', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('GestureControls', () => {
+    test('renders and sends gesture command', () => {
+      render(<GestureControls />);
+      
+      fireEvent.change(screen.getByRole('combobox'), { 
+        target: { value: 'animations/Stand/Gestures/Hey_1' } 
+      });
+      
+      // Click button
+      fireEvent.click(screen.getByText('Actuate'));
+      
+      // Expect the API to be called with that new value
+      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('gesture', 'animations/Stand/Gestures/Hey_1');
+    });
+  });
+
+  describe('SpeechPresets', () => {
+    test('renders buttons and sends speech command', () => {
+      render(<SpeechPresets />);
+      
+      const btn = screen.getByText('"Hello, I\'m Pepper"');
+      fireEvent.click(btn);
+      
+      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', "Hello, I'm Pepper");
+    });
+  });
+
+  describe('DirectSpeechInput', () => {
+    test('inputs text and sends on button click', () => {
+      render(<DirectSpeechInput />);
+      const input = screen.getByPlaceholderText('Type message...');
+      
+      fireEvent.change(input, { target: { value: 'Custom text' } });
+      fireEvent.click(screen.getByText('Send'));
+      
+      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', 'Custom text');
+      expect(input).toHaveValue(''); // Should clear
+    });
+
+    test('sends on Enter key', () => {
+        render(<DirectSpeechInput />);
+        const input = screen.getByPlaceholderText('Type message...');
+        
+        fireEvent.change(input, { target: { value: 'Enter text' } });
+        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+        
+        expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', 'Enter text');
+      });
+  
+      test('does not send empty text', () => {
+        render(<DirectSpeechInput />);
+        fireEvent.click(screen.getByText('Send'));
+        expect(MonitoringAPI.sendAPICall).not.toHaveBeenCalled();
+      });
+  });
+
+  describe('StatusList', () => {
+    const mockSet = jest.fn();
+    const items = [
+      { id: '1', name: 'Item 1' },
+      { id: '2', name: 'Item 2' }
+    ];
+
+    test('renders list items', () => {
+      render(<StatusList title="Test List" items={items} type="goal" activeIds={{}} />);
+      expect(screen.getByText('Test List')).toBeInTheDocument();
+      expect(screen.getByText('Item 1')).toBeInTheDocument();
+    });
+
+    test('Goals: click override on inactive item calls API', () => {
+      render(
+        <StatusList 
+          title="Goals" 
+          items={items} 
+          type="goal" 
+          activeIds={{}} 
+          setActiveIds={mockSet} 
+        />
+      );
+      
+      // Click the X (inactive)
+      const indicator = screen.getAllByText('❌')[0];
+      fireEvent.click(indicator);
+      
+      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('override', '1');
+      expect(mockSet).toHaveBeenCalled();
+    });
+
+    test('Conditional Norms: click override on ACTIVE item unachieves', () => {
+        render(
+          <StatusList 
+            title="CN" 
+            items={items} 
+            type="cond_norm" 
+            activeIds={{ '1': true }} 
+          />
+        );
+        
+        const indicator = screen.getByText('✔️'); // It is active
+        fireEvent.click(indicator);
+        
+        expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('override_unachieve', '1');
+      });
+  
+      test('Current Goal highlighting', () => {
+          render(
+              <StatusList 
+                title="Goals" 
+                items={items} 
+                type="goal" 
+                activeIds={{}} 
+                currentGoalIndex={0}
+              />
+            );
+          // Using regex to handle the "(Current)" text
+          expect(screen.getByText(/Item 1/)).toBeInTheDocument();
+          expect(screen.getByText(/(Current)/)).toBeInTheDocument();
+      });
+  });
+
+  describe('RobotConnected', () => {
+    let mockEventSource: any;
+
+    beforeAll(() => {
+        Object.defineProperty(window, 'EventSource', {
+            writable: true,
+            value: jest.fn().mockImplementation(() => ({
+                close: jest.fn(),
+                onmessage: null,
+            })),
+        });
+    });
+
+    beforeEach(() => {
+        mockEventSource = new window.EventSource('url');
+        (window.EventSource as unknown as jest.Mock).mockClear();
+        (window.EventSource as unknown as jest.Mock).mockImplementation(() => mockEventSource);
+    });
+
+    test('displays disconnected initially', () => {
+        render(<RobotConnected />);
+        expect(screen.getByText('● Robot is disconnected')).toBeInTheDocument();
+    });
+
+    test('updates to connected when SSE receives true', async () => {
+        render(<RobotConnected />);
+        
+        act(() => {
+            if(mockEventSource.onmessage) {
+                mockEventSource.onmessage({ data: 'true' } as MessageEvent);
+            }
+        });
+
+        expect(await screen.findByText('● Robot is connected')).toBeInTheDocument();
+    });
+    
+    test('handles invalid JSON gracefully', async () => {
+        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+        render(<RobotConnected />);
+        
+        act(() => {
+            if(mockEventSource.onmessage) {
+                mockEventSource.onmessage({ data: 'invalid-json' } as MessageEvent);
+            }
+        });
+        
+        // Should catch error and log it, state remains disconnected
+        expect(consoleSpy).toHaveBeenCalledWith('Ping message not in correct format:', 'invalid-json');
+        consoleSpy.mockRestore();
+    });
+
+    test('logs error if state update fails (inner catch block)', async () => {
+        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+        
+        // 1. Force useState to return a setter that throws an error
+        const mockThrowingSetter = jest.fn(() => { throw new Error('Forced State Error'); });
+        
+        // We use mockImplementation to return [currentState, throwingSetter]
+        const useStateSpy = jest.spyOn(React, 'useState')
+            .mockImplementation(() => [null, mockThrowingSetter]);
+
+        render(<RobotConnected />);
+        
+        // 2. Trigger the event with VALID JSON ("true")
+        // This passes the first JSON.parse try/catch, 
+        // but fails when calling setConnected(true) because of our mock.
+        await act(async () => {
+            if (mockEventSource.onmessage) {
+                mockEventSource.onmessage({ data: 'true' } as MessageEvent);
+            }
+        });
+
+        // 3. Verify the specific error log from line 205
+        expect(consoleSpy).toHaveBeenCalledWith("couldnt extract connected from incoming ping data");
+        
+        // Cleanup spies
+        useStateSpy.mockRestore();
+        consoleSpy.mockRestore();
+    });
+  });
+});