test(web): App

web/config/setupTests.js

@@ -20,3 +20,5 @@ beforeEach(() => {
     throw new Error(`Unexpected fetch to ${url}, ${JSON.stringify(opts)}`);
   });
 });
+
+jest.mock('../src/env');

web/src/App.jsx

@@ -14,7 +14,7 @@ export default function App() {
   return (
     <DarkModeProvider>
       <DrawerProvider>
-        <div className="w-full">
+        <div data-testid="app" className="w-full">
           <AppBar />
           {status !== FetchStatus.LOADED ? (
             <div className="flex flex-grow-1 min-h-screen justify-center items-center">

web/src/Sidebar.jsx

@@ -2,6 +2,7 @@ import { h, Fragment } from 'preact';
 import LinkedLogo from './components/LinkedLogo';
 import { Match } from 'preact-router/match';
 import { memo } from 'preact/compat';
+import { ENV } from './env';
 import { useConfig } from './api';
 import { useMemo } from 'preact/hooks';
 import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer';
@@ -30,7 +31,7 @@ export default function Sidebar() {
       <Destination href="/debug" text="Debug" />
       <Separator />
       <div className="flex flex-grow" />
-      {import.meta.env.MODE !== 'production' ? (
+      {ENV !== 'production' ? (
         <Fragment>
           <Destination href="/styleguide" text="Style Guide" />
           <Separator />

web/src/__mocks__/env.js

@@ -0,0 +1,2 @@
+export const ENV = 'test';
+export const API_HOST = 'http://base-url.local:5000';

web/src/__tests__/App.test.jsx

@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import * as Api from '../api';
+import * as IDB from 'idb-keyval';
+import * as PreactRouter from 'preact-router';
+import App from '../App';
+import { render, screen } from '@testing-library/preact';
+
+describe('App', () => {
+  let mockUseConfig;
+
+  beforeEach(() => {
+    jest.spyOn(IDB, 'get').mockImplementation(() => Promise.resolve(undefined));
+    jest.spyOn(IDB, 'set').mockImplementation(() => Promise.resolve(true));
+    mockUseConfig = jest.spyOn(Api, 'useConfig').mockImplementation(() => ({
+      data: { cameras: { front: { name: 'front', objects: { track: ['taco', 'cat', 'dog'] } } } },
+    }));
+    jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http://base-url.local:5000');
+    jest.spyOn(PreactRouter, 'Router').mockImplementation(() => <div data-testid="router" />);
+  });
+
+  test('shows a loading indicator while loading', async () => {
+    mockUseConfig.mockReturnValue({ status: 'loading' });
+    render(<App />);
+    await screen.findByTestId('app');
+    expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
+  });
+});

web/src/api/__mocks__/baseUrl.js

@@ -1 +0,0 @@
-export const baseUrl = 'http://base-url.local:5000';

web/src/api/__tests__/index.test.jsx

@@ -2,8 +2,6 @@ import { h } from 'preact';
 import { ApiProvider, useFetch, useApiHost } from '..';
 import { render, screen } from '@testing-library/preact';
 
-jest.mock('../baseUrl');
-
 describe('useApiHost', () => {
   test('is set from the baseUrl', async () => {
     function Test() {

web/src/api/baseUrl.js

@@ -1 +1,2 @@
-export const baseUrl = import.meta.env.SNOWPACK_PUBLIC_API_HOST || window.baseUrl || '';
+import { API_HOST } from '../env';
+export const baseUrl = API_HOST || window.baseUrl || '';

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

@@ -4,8 +4,6 @@ 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(() => {

web/src/env.js

@@ -0,0 +1,2 @@
+export const ENV = import.meta.env.MODE;
+export const API_HOST = import.meta.env.SNOWPACK_PUBLIC_API_HOST;

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

@@ -5,8 +5,6 @@ import * as Context from '../../context';
 import Camera from '../Camera';
 import { fireEvent, render, screen } from '@testing-library/preact';
 
-jest.mock('../../api/baseUrl');
-
 describe('Camera Route', () => {
   let mockUsePersistence, mockSetOptions;
 

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

@@ -4,8 +4,6 @@ import Cameras from '../Cameras';
 import * as CameraImage from '../../components/CameraImage';
 import { render, screen } from '@testing-library/preact';
 
-jest.mock('../../api/baseUrl');
-
 describe('Cameras Route', () => {
   let useConfigMock;
 

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

@@ -3,8 +3,6 @@ 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;
 

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

@@ -3,8 +3,6 @@ import * as Api from '../../api';
 import Event from '../Event';
 import { render, screen } from '@testing-library/preact';
 
-jest.mock('../../api/baseUrl');
-
 describe('Event Route', () => {
   let useEventMock;