test(web): CameraImage (basic)

Testing Image and Canvas calls requires a lot of heavy dependencies, so this skips that part of the tests

web/src/components/CameraImage.jsx

@@ -2,32 +2,19 @@ import { h } from 'preact';
 import ActivityIndicator from './ActivityIndicator';
 import { useApiHost, useConfig } from '../api';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useResizeObserver } from '../hooks';
 
 export default function CameraImage({ camera, onload, searchParams = '' }) {
   const { data: config } = useConfig();
   const apiHost = useApiHost();
-  const [availableWidth, setAvailableWidth] = useState(0);
   const [hasLoaded, setHasLoaded] = useState(false);
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
+  const [{ width: availableWidth }] = useResizeObserver(containerRef);
 
   const { name, width, height } = config.cameras[camera];
   const aspectRatio = width / height;
 
-  const resizeObserver = useMemo(() => {
-    return new ResizeObserver((entries) => {
-      window.requestAnimationFrame(() => {
-        if (Array.isArray(entries) && entries.length) {
-          setAvailableWidth(entries[0].contentRect.width);
-        }
-      });
-    });
-  }, []);
-
-  useEffect(() => {
-    resizeObserver.observe(containerRef.current);
-  }, [resizeObserver, containerRef]);
-
   const scaledHeight = useMemo(() => Math.min(Math.ceil(availableWidth / aspectRatio), height), [
     availableWidth,
     aspectRatio,
@@ -57,7 +44,7 @@ export default function CameraImage({ camera, onload, searchParams = '' }) {
 
   return (
     <div className="relative w-full" ref={containerRef}>
-      <canvas height={scaledHeight} ref={canvasRef} width={scaledWidth} />
+      <canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} />
       {!hasLoaded ? (
         <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
           <ActivityIndicator />

web/src/components/__tests__/CameraImage.test.jsx

@@ -0,0 +1,36 @@
+import { h } from 'preact';
+import * as Api from '../../api';
+import * as Hooks from '../../hooks';
+import CameraImage from '../CameraImage';
+import { render, screen } from '@testing-library/preact';
+
+jest.mock('../../api/baseUrl');
+
+describe('CameraImage', () => {
+  beforeEach(() => {
+    jest.spyOn(Api, 'useConfig').mockImplementation(() => {
+      return { data: { cameras: { front: { name: 'front', width: 1280, height: 720 } } } };
+    });
+    jest.spyOn(Api, 'useApiHost').mockReturnValue('http://base-url.local:5000');
+    jest.spyOn(Hooks, 'useResizeObserver').mockImplementation(() => [{ width: 0 }]);
+  });
+
+  test('renders an activity indicator while loading', async () => {
+    render(<CameraImage camera="front" />);
+    expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
+  });
+
+  test('creates a scaled canvas using the available width & height, preserving camera aspect ratio', async () => {
+    jest.spyOn(Hooks, 'useResizeObserver').mockReturnValueOnce([{ width: 720 }]);
+
+    render(<CameraImage camera="front" />);
+    expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
+    expect(screen.queryByTestId('cameraimage-canvas')).toMatchInlineSnapshot(`
+      <canvas
+        data-testid="cameraimage-canvas"
+        height="405"
+        width="720"
+      />
+    `);
+  });
+});