From 3348f048891dc67ed8b03b10b890123b8ac99890 Mon Sep 17 00:00:00 2001 From: Paul Armstrong Date: Sat, 13 Feb 2021 20:37:22 -0800 Subject: [PATCH] test(web): App --- web/config/setupTests.js | 2 ++ web/src/App.jsx | 2 +- web/src/Sidebar.jsx | 3 ++- web/src/__mocks__/env.js | 2 ++ web/src/__tests__/App.test.jsx | 27 +++++++++++++++++++ web/src/api/__mocks__/baseUrl.js | 1 - web/src/api/__tests__/index.test.jsx | 2 -- web/src/api/baseUrl.js | 3 ++- .../components/__tests__/CameraImage.test.jsx | 2 -- web/src/env.js | 2 ++ web/src/routes/__tests__/Camera.test.jsx | 2 -- web/src/routes/__tests__/Cameras.test.jsx | 2 -- web/src/routes/__tests__/Debug.test.jsx | 2 -- web/src/routes/__tests__/Event.test.jsx | 2 -- 14 files changed, 38 insertions(+), 16 deletions(-) create mode 100644 web/src/__mocks__/env.js create mode 100644 web/src/__tests__/App.test.jsx delete mode 100644 web/src/api/__mocks__/baseUrl.js create mode 100644 web/src/env.js diff --git a/web/config/setupTests.js b/web/config/setupTests.js index 22f663dab..af63ce51f 100644 --- a/web/config/setupTests.js +++ b/web/config/setupTests.js @@ -20,3 +20,5 @@ beforeEach(() => { throw new Error(`Unexpected fetch to ${url}, ${JSON.stringify(opts)}`); }); }); + +jest.mock('../src/env'); diff --git a/web/src/App.jsx b/web/src/App.jsx index 2482efa1a..2f4d1dff8 100644 --- a/web/src/App.jsx +++ b/web/src/App.jsx @@ -14,7 +14,7 @@ export default function App() { return ( -
+
{status !== FetchStatus.LOADED ? (
diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx index 02301cb76..50dd7d3cc 100644 --- a/web/src/Sidebar.jsx +++ b/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() {
- {import.meta.env.MODE !== 'production' ? ( + {ENV !== 'production' ? ( diff --git a/web/src/__mocks__/env.js b/web/src/__mocks__/env.js new file mode 100644 index 000000000..5d7b8a452 --- /dev/null +++ b/web/src/__mocks__/env.js @@ -0,0 +1,2 @@ +export const ENV = 'test'; +export const API_HOST = 'http://base-url.local:5000'; diff --git a/web/src/__tests__/App.test.jsx b/web/src/__tests__/App.test.jsx new file mode 100644 index 000000000..6ae513651 --- /dev/null +++ b/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(() =>
); + }); + + test('shows a loading indicator while loading', async () => { + mockUseConfig.mockReturnValue({ status: 'loading' }); + render(); + await screen.findByTestId('app'); + expect(screen.queryByLabelText('Loading…')).toBeInTheDocument(); + }); +}); diff --git a/web/src/api/__mocks__/baseUrl.js b/web/src/api/__mocks__/baseUrl.js deleted file mode 100644 index 8d3c67582..000000000 --- a/web/src/api/__mocks__/baseUrl.js +++ /dev/null @@ -1 +0,0 @@ -export const baseUrl = 'http://base-url.local:5000'; diff --git a/web/src/api/__tests__/index.test.jsx b/web/src/api/__tests__/index.test.jsx index 393bb382b..c8b347722 100644 --- a/web/src/api/__tests__/index.test.jsx +++ b/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() { diff --git a/web/src/api/baseUrl.js b/web/src/api/baseUrl.js index b6c7ea2e9..5746acd32 100644 --- a/web/src/api/baseUrl.js +++ b/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 || ''; diff --git a/web/src/components/__tests__/CameraImage.test.jsx b/web/src/components/__tests__/CameraImage.test.jsx index 3ee208438..7cdcd7ef3 100644 --- a/web/src/components/__tests__/CameraImage.test.jsx +++ b/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(() => { diff --git a/web/src/env.js b/web/src/env.js new file mode 100644 index 000000000..064a59a25 --- /dev/null +++ b/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; diff --git a/web/src/routes/__tests__/Camera.test.jsx b/web/src/routes/__tests__/Camera.test.jsx index 7e8e5fd5f..c95a9a1d5 100644 --- a/web/src/routes/__tests__/Camera.test.jsx +++ b/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; diff --git a/web/src/routes/__tests__/Cameras.test.jsx b/web/src/routes/__tests__/Cameras.test.jsx index 31f5a36aa..770ecd387 100644 --- a/web/src/routes/__tests__/Cameras.test.jsx +++ b/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; diff --git a/web/src/routes/__tests__/Debug.test.jsx b/web/src/routes/__tests__/Debug.test.jsx index f27581507..4a14835ef 100644 --- a/web/src/routes/__tests__/Debug.test.jsx +++ b/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; diff --git a/web/src/routes/__tests__/Event.test.jsx b/web/src/routes/__tests__/Event.test.jsx index 2ffd90be7..d94eee4c4 100644 --- a/web/src/routes/__tests__/Event.test.jsx +++ b/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;