chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

feat(web): detect, clips, snapshots toggles

Browse Source
This commit is contained in:
Paul Armstrong
2021-02-17 20:53:57 -08:00
committed by Blake Blackshear
parent e399790442
commit b6ba6459fb
18 changed files with 500 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/api/__tests__/index.test.jsx
View File

@@ -1,8 +1,13 @@
import { h } from 'preact';
import * as Mqtt from '../mqtt';
import { ApiProvider, useFetch, useApiHost } from '..';
import { render, screen } from '@testing-library/preact';
describe('useApiHost', () => {
beforeEach(() => {
jest.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
});
test('is set from the baseUrl', async () => {
function Test() {
const apiHost = useApiHost();
@@ -17,26 +22,34 @@ describe('useApiHost', () => {
});
});
describe('useFetch', () => {
function Test() {
const { data, status } = useFetch('/api/tacos');
return (
<div>
<span>{data ? data.returnData : ''}</span>
<span>{status}</span>
</div>
);
}
test('loads data', async () => {
const fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(
(url) =>
new Promise((resolve) => {
setTimeout(() => {
resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
}, 1);
})
);
function Test() {
const { data, status } = useFetch('/api/tacos');
return (
<div>
<span>{data ? data.returnData : ''}</span>
<span>{status}</span>
</div>
);
}
describe('useFetch', () => {
let fetchSpy;
beforeEach(() => {
jest.spyOn(Mqtt, 'MqttProvider').mockImplementation(({ children }) => children);
fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(async (url, options) => {
if (url.endsWith('/api/config')) {
return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
}
return new Promise((resolve) => {
setTimeout(() => {
resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
}, 1);
});
});
});
test('loads data', async () => {
render(
<ApiProvider>
<Test />
@@ -55,14 +68,16 @@ describe('useFetch', () => {
});
test('sets error if response is not okay', async () => {
jest.spyOn(window, 'fetch').mockImplementation(
(url) =>
new Promise((resolve) => {
setTimeout(() => {
resolve({ ok: false });
}, 1);
})
);
jest.spyOn(window, 'fetch').mockImplementation((url) => {
if (url.includes('/config')) {
return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
}
return new Promise((resolve) => {
setTimeout(() => {
resolve({ ok: false });
}, 1);
});
});
render(
<ApiProvider>
@@ -76,15 +91,6 @@ describe('useFetch', () => {
});
test('does not re-fetch if the query has already been made', async () => {
const fetchSpy = jest.spyOn(window, 'fetch').mockImplementation(
(url) =>
new Promise((resolve) => {
setTimeout(() => {
resolve({ ok: true, json: () => Promise.resolve({ returnData: 'yep' }) });
}, 1);
})
);
const { rerender } = render(
<ApiProvider>
<Test key={0} />
@@ -109,6 +115,7 @@ describe('useFetch', () => {
jest.runAllTimers();
expect(fetchSpy).toHaveBeenCalledTimes(1);
// once for /api/config, once for /api/tacos
expect(fetchSpy).toHaveBeenCalledTimes(2);
});
});

34
web/src/api/__tests__/mqtt.test.jsx
View File

@@ -45,7 +45,7 @@ describe('MqttProvider', () => {
test('connects to the mqtt server', async () => {
render(
<MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<Test />
</MqttProvider>
);
@@ -69,7 +69,7 @@ describe('MqttProvider', () => {
}
const { rerender } = render(
<MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<Test />
</MqttProvider>
);
@@ -78,7 +78,7 @@ describe('MqttProvider', () => {
data: JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }), retain: false }),
});
rerender(
<MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<Test />
</MqttProvider>
);
@@ -96,7 +96,7 @@ describe('MqttProvider', () => {
}
render(
<MqttProvider createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<MqttProvider config={mockConfig} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<Test />
</MqttProvider>
);
@@ -106,4 +106,30 @@ describe('MqttProvider', () => {
JSON.stringify({ topic: 'tacos', payload: JSON.stringify({ yes: true }) })
);
});
test('prefills the clips/detect/snapshots state from config', async () => {
jest.spyOn(Date, 'now').mockReturnValue(123456);
const config = {
cameras: {
front: { name: 'front', detect: { enabled: true }, clips: { enabled: false }, snapshots: { enabled: true } },
side: { name: 'side', detect: { enabled: false }, clips: { enabled: false }, snapshots: { enabled: false } },
},
};
render(
<MqttProvider config={config} createWebsocket={createWebsocket} mqttUrl={TEST_URL}>
<Test />
</MqttProvider>
);
await screen.findByTestId('data');
expect(screen.getByTestId('front/detect/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"ON"}');
expect(screen.getByTestId('front/clips/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('front/snapshots/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"ON"}');
expect(screen.getByTestId('side/detect/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('side/clips/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
expect(screen.getByTestId('side/snapshots/state')).toHaveTextContent('{"lastUpdate":123456,"payload":"OFF"}');
});
});
const mockConfig = {
cameras: {},
};