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:https://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:https://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/__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;