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/__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"
+      />
+    `);
+  });
+});