test(web): routes/Event

web/src/routes/Event.jsx

@@ -54,7 +54,13 @@ export default function Event({ eventId }) {
  {data.has_clip ? (
  <Fragment>
  <Heading size="sm">Clip</Heading>
- <video autoPlay className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
+ <video
+ aria-label={`Clip for event ${data.id}`}
+ autoPlay
+ className="w-100"
+ src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`}
+ controls
+ />
  </Fragment>
  ) : (
  <p>No clip available</p>

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

@@ -0,0 +1,76 @@
+import { h } from 'preact';
+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;
+
+ beforeEach(() => {
+ useEventMock = jest.spyOn(Api, 'useEvent').mockImplementation(() => ({
+ data: mockEvent,
+ status: 'loaded',
+ }));
+ jest.spyOn(Api, 'useApiHost').mockImplementation(() => 'http:https://localhost:5000');
+ });
+
+ test('shows an ActivityIndicator if not yet loaded', async () => {
+ useEventMock.mockReturnValueOnce(() => ({ status: 'loading' }));
+ render(<Event eventId={mockEvent.id} />);
+ expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
+ });
+
+ test('shows cameras', async () => {
+ render(<Event eventId={mockEvent.id} />);
+
+ expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
+
+ expect(screen.queryByText('Clip')).toBeInTheDocument();
+ expect(screen.queryByLabelText('Clip for event 1613257326.237365-83cgl2')).toHaveAttribute(
+ 'src',
+ 'http:https://localhost:5000/clips/front-1613257326.237365-83cgl2.mp4'
+ );
+ expect(screen.queryByText('Best image')).toBeInTheDocument();
+ expect(screen.queryByText('Thumbnail')).not.toBeInTheDocument();
+ expect(screen.queryByAltText('person at 82.0% confidence')).toHaveAttribute(
+ 'src',
+ 'http:https://localhost:5000/clips/front-1613257326.237365-83cgl2.jpg'
+ );
+ });
+
+ test('shows the thumbnail if no snapshot available', async () => {
+ useEventMock.mockReturnValue({ data: { ...mockEvent, has_snapshot: false }, status: 'loaded' });
+ render(<Event eventId={mockEvent.id} />);
+
+ expect(screen.queryByText('Best image')).not.toBeInTheDocument();
+ expect(screen.queryByText('Thumbnail')).toBeInTheDocument();
+ expect(screen.queryByAltText('person at 82.0% confidence')).toHaveAttribute(
+ 'src',
+ 'data:image/jpeg;base64,/9j/4aa...'
+ );
+ });
+
+ test('does not render a video if there is no clip', async () => {
+ useEventMock.mockReturnValue({ data: { ...mockEvent, has_clip: false }, status: 'loaded' });
+ render(<Event eventId={mockEvent.id} />);
+
+ expect(screen.queryByText('Clip')).not.toBeInTheDocument();
+ expect(screen.queryByLabelText('Clip for event 1613257326.237365-83cgl2')).not.toBeInTheDocument();
+ });
+});
+
+const mockEvent = {
+ camera: 'front',
+ end_time: 1613257337.841237,
+ false_positive: false,
+ has_clip: true,
+ has_snapshot: true,
+ id: '1613257326.237365-83cgl2',
+ label: 'person',
+ start_time: 1613257326.237365,
+ top_score: 0.8203125,
+ zones: ['front_patio'],
+ thumbnail: '/9j/4aa...',
+};