test(web): routes/Debug

web/src/routes/Debug.jsx

@@ -52,7 +52,7 @@ export default function Debug() {
  Debug <span className="text-sm">{service.version}</span>
  </Heading>
 
- <div className="min-w-0 overflow-auto">
+ <div data-testid="detectors" className="min-w-0 overflow-auto">
  <Table className="w-full">
  <Thead>
  <Tr>
@@ -75,7 +75,7 @@ export default function Debug() {
  </Table>
  </div>
 
- <div className="min-w-0 overflow-auto">
+ <div data-testid="cameras" className="min-w-0 overflow-auto">
  <Table className="w-full">
  <Thead>
  <Tr>

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

@@ -0,0 +1,73 @@
+import { h } from 'preact';
+import * as Api from '../../api';
+import Debug from '../Debug';
+import { render, screen } from '@testing-library/preact';
+
+jest.mock('../../api/baseUrl');
+
+describe('Debug Route', () => {
+ let useStatsMock;
+
+ beforeEach(() => {
+ jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
+ data: {
+ service: {
+ version: '0.8.3',
+ },
+ cameras: {
+ front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] } },
+ side: { name: 'side', objects: { track: ['taco', 'cat', 'dog'] } },
+ },
+ },
+ status: 'loaded',
+ }));
+ useStatsMock = jest.spyOn(Api, 'useStats').mockImplementation(() => statsMock);
+ });
+
+ test('shows an ActivityIndicator if stats are null', async () => {
+ useStatsMock.mockReturnValue({ data: null });
+ render(<Debug />);
+ expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
+ });
+
+ test('shows stats and config', async () => {
+ render(<Debug />);
+ expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
+
+ expect(screen.queryByTestId('detectors')).toBeInTheDocument();
+ expect(screen.queryByText('coral')).toBeInTheDocument();
+
+ expect(screen.queryByTestId('cameras')).toBeInTheDocument();
+ expect(screen.queryByText('front')).toBeInTheDocument();
+ expect(screen.queryByText('side')).toBeInTheDocument();
+
+ expect(screen.queryByText('Config')).toBeInTheDocument();
+ 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);
+ });
+});
+
+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,
+ pid: 60,
+ process_fps: 0.0,
+ skipped_fps: 0.0,
+ },
+ service: { uptime: 34812, version: '0.8.1-d376f6b' },
+ },
+};