switch to vite

web/config/handlers.js

@@ -0,0 +1,73 @@
+import { rest } from 'msw';
+import { API_HOST } from '../src/env';
+
+export const handlers = [
+  rest.get(`${API_HOST}/api/config`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        mqtt: {
+          stats_interval: 60,
+        },
+        service: {
+          version: '0.8.3',
+        },
+        cameras: {
+          front: {
+            name: 'front',
+            objects: { track: ['taco', 'cat', 'dog'] },
+            record: { enabled: true },
+            detect: { width: 1280, height: 720 },
+            snapshots: {},
+            live: { height: 720 },
+          },
+          side: {
+            name: 'side',
+            objects: { track: ['taco', 'cat', 'dog'] },
+            record: { enabled: false },
+            detect: { width: 1280, height: 720 },
+            snapshots: {},
+            live: { height: 720 },
+          },
+        },
+      })
+    );
+  }),
+  rest.get(`${API_HOST}/api/stats`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({
+        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' },
+      })
+    );
+  }),
+  rest.get(`${API_HOST}/api/events`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json(
+        new Array(12).fill(null).map((v, i) => ({
+          end_time: 1613257337 + i,
+          has_clip: true,
+          has_snapshot: true,
+          id: i,
+          label: 'person',
+          start_time: 1613257326 + i,
+          top_score: Math.random(),
+          zones: ['front_patio'],
+          thumbnail: '/9j/4aa...',
+        }))
+      )
+    );
+  }),
+];

web/config/server.js

@@ -0,0 +1,6 @@
+// src/mocks/server.js
+import { setupServer } from 'msw/node';
+import { handlers } from './handlers';
+
+// This configures a request mocking server with the given request handlers.
+export const server = setupServer(...handlers);

web/config/setupTests.js

@@ -1,5 +1,6 @@
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom/extend-expect';
+import { server } from './server.js';
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -13,6 +14,16 @@ Object.defineProperty(window, 'matchMedia', {
   }),
 });
 
-window.fetch = () => Promise.resolve();
-
 jest.mock('../src/env');
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen());
+
+// Reset any request handlers that we may add during the tests,
+// so they don't affect other tests.
+afterEach(() => {
+  server.resetHandlers();
+});
+
+// Clean up after the tests are finished.
+afterAll(() => server.close());

web/config/testing-library.js

@@ -0,0 +1,24 @@
+import { h } from 'preact';
+import { render } from '@testing-library/preact';
+import { ApiProvider } from '../src/api';
+
+const Wrapper = ({ children }) => {
+  return (
+    <ApiProvider
+      options={{
+        dedupingInterval: 0,
+        provider: () => new Map(),
+      }}
+    >
+      {children}
+    </ApiProvider>
+  );
+};
+
+const customRender = (ui, options) => render(ui, { wrapper: Wrapper, ...options });
+
+// re-export everything
+export * from '@testing-library/preact';
+
+// override render method
+export { customRender as render };