feat(web): detect, clips, snapshots toggles

web/src/routes/__tests__/Cameras.test.jsx

@@ -1,8 +1,9 @@
 import { h } from 'preact';
 import * as Api from '../../api';
-import Cameras from '../Cameras';
 import * as CameraImage from '../../components/CameraImage';
-import { render, screen } from '@testing-library/preact';
+import * as Mqtt from '../../api/mqtt';
+import Cameras from '../Cameras';
+import { fireEvent, render, screen } from '@testing-library/preact';
 
 describe('Cameras Route', () => {
   let useConfigMock;
@@ -19,6 +20,7 @@ describe('Cameras Route', () => {
     }));
     jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
     jest.spyOn(CameraImage, 'default').mockImplementation(() => <div data-testid="camera-image" />);
+    jest.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: 'OFF' }, send: jest.fn() }));
   });
 
   test('shows an ActivityIndicator if not yet loaded', async () => {
@@ -38,4 +40,35 @@ describe('Cameras Route', () => {
     expect(screen.queryByText('side')).toBeInTheDocument();
     expect(screen.queryByText('side').closest('a')).toHaveAttribute('href', '/cameras/side');
   });
+
+  test('buttons toggle detect, clips, and snapshots', async () => {
+    const sendDetect = jest.fn();
+    const sendClips = jest.fn();
+    const sendSnapshots = jest.fn();
+    jest.spyOn(Mqtt, 'useDetectState').mockImplementation(() => {
+      return { payload: 'ON', send: sendDetect };
+    });
+    jest.spyOn(Mqtt, 'useClipsState').mockImplementation(() => {
+      return { payload: 'OFF', send: sendClips };
+    });
+    jest.spyOn(Mqtt, 'useSnapshotsState').mockImplementation(() => {
+      return { payload: 'ON', send: sendSnapshots };
+    });
+
+    render(<Cameras />);
+
+    fireEvent.click(screen.getAllByLabelText('Toggle detect off')[0]);
+    expect(sendDetect).toHaveBeenCalledWith('OFF');
+    expect(sendDetect).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getAllByLabelText('Toggle snapshots off')[0]);
+    expect(sendSnapshots).toHaveBeenCalledWith('OFF');
+
+    fireEvent.click(screen.getAllByLabelText('Toggle clips on')[0]);
+    expect(sendClips).toHaveBeenCalledWith('ON');
+
+    expect(sendDetect).toHaveBeenCalledTimes(1);
+    expect(sendSnapshots).toHaveBeenCalledTimes(1);
+    expect(sendClips).toHaveBeenCalledTimes(1);
+  });
 });

web/src/routes/__tests__/Debug.test.jsx

@@ -1,10 +1,11 @@
 import { h } from 'preact';
 import * as Api from '../../api';
+import * as Mqtt from '../../api/mqtt';
 import Debug from '../Debug';
 import { render, screen } from '@testing-library/preact';
 
 describe('Debug Route', () => {
-  let useStatsMock;
+  let useStatsMock, useMqttMock;
 
   beforeEach(() => {
     jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
@@ -16,10 +17,14 @@ describe('Debug Route', () => {
           front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] } },
           side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] } },
         },
+        mqtt: {
+          stats_interva: 60,
+        },
       },
       status: 'loaded',
     }));
-    useStatsMock = jest.spyOn(Api, 'useStats').mockImplementation(() => statsMock);
+    useStatsMock = jest.spyOn(Api, 'useStats').mockImplementation(() => ({ data: statsMock }));
+    useMqttMock = jest.spyOn(Mqtt, 'useMqtt').mockImplementation(() => ({ value: { payload: null } }));
   });
 
   test('shows an ActivityIndicator if stats are null', async () => {
@@ -43,29 +48,31 @@ describe('Debug Route', () => {
     expect(screen.queryByRole('button', { name: 'Copy to Clipboard' })).toBeInTheDocument();
   });
 
-  test('updates the stats on a timeout', async () => {
-    jest.spyOn(window, 'setTimeout').mockReturnValue(123);
-    render(<Debug />);
-    expect(useStatsMock).toHaveBeenCalledWith(null, null);
-    jest.advanceTimersByTime(1001);
-    expect(useStatsMock).toHaveBeenCalledWith(null, 123);
-    expect(useStatsMock).toHaveBeenCalledTimes(2);
+  test('updates the stats from  mqtt', async () => {
+    const { rerender } = render(<Debug />);
+    expect(useMqttMock).toHaveBeenCalledWith('stats');
+    useMqttMock.mockReturnValue({
+      value: {
+        payload: { ...statsMock, detectors: { coral: { ...statsMock.detectors.coral, inference_speed: 42.4242 } } },
+      },
+    });
+    rerender(<Debug />);
+
+    expect(screen.queryByText('42.4242')).toBeInTheDocument();
   });
 });
 
 const statsMock = {
-  data: {
+  detection_fps: 0.0,
+  detectors: { coral: { detection_start: 0.0, inference_speed: 8.94, pid: 52 } },
+  front: { camera_fps: 5.0, capture_pid: 64, detection_fps: 0.0, pid: 54, process_fps: 0.0, skipped_fps: 0.0 },
+  side: {
+    camera_fps: 6.9,
+    capture_pid: 71,
     detection_fps: 0.0,
-    detectors: { coral: { detection_start: 0.0, inference_speed: 8.94, pid: 52 } },
-    front: { camera_fps: 5.0, capture_pid: 64, detection_fps: 0.0, pid: 54, process_fps: 0.0, skipped_fps: 0.0 },
-    side: {
-      camera_fps: 6.9,
-      capture_pid: 71,
-      detection_fps: 0.0,
-      pid: 60,
-      process_fps: 0.0,
-      skipped_fps: 0.0,
-    },
-    service: { uptime: 34812, version: '0.8.1-d376f6b' },
+    pid: 60,
+    process_fps: 0.0,
+    skipped_fps: 0.0,
   },
+  service: { uptime: 34812, version: '0.8.1-d376f6b' },
 };