diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 0d67a7ee7..c8b576cab 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -118,7 +118,7 @@ module.exports = { 'import/no-unresolved': 'error', - 'react-hooks/exhaustive-deps': 'error', + // 'react-hooks/exhaustive-deps': 'error', 'jest/consistent-test-it': ['error', { fn: 'test' }], 'jest/no-test-prefixes': 'error', diff --git a/web/jest.config.js b/web/jest.config.js index dd84c71b9..91433aa91 100644 --- a/web/jest.config.js +++ b/web/jest.config.js @@ -6,4 +6,7 @@ module.exports = { setupFilesAfterEnv: ['/config/setupTests.js'], testEnvironment: 'jsdom', timers: 'fake', + moduleNameMapper: { + "\\.(scss|sass|css)$": "/src/__mocks__/styleMock.js" + } }; diff --git a/web/src/__mocks__/styleMock.js b/web/src/__mocks__/styleMock.js new file mode 100644 index 000000000..a09954537 --- /dev/null +++ b/web/src/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; \ No newline at end of file diff --git a/web/src/components/VideoPlayer.jsx b/web/src/components/VideoPlayer.jsx index fa99fe063..3560d964a 100644 --- a/web/src/components/VideoPlayer.jsx +++ b/web/src/components/VideoPlayer.jsx @@ -1,4 +1,4 @@ -import { h, Component } from 'preact'; +import { h } from 'preact'; import { useRef, useEffect } from 'preact/hooks'; import videojs from 'video.js'; import 'videojs-playlist'; @@ -84,7 +84,7 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea player.dispose(); onDispose(); }; - }, []); + }, []); // eslint-disable-line react-hooks/exhaustive-deps return (
diff --git a/web/src/routes/__tests__/Event.test.jsx b/web/src/routes/__tests__/Event.test.jsx index d94eee4c4..deed924d7 100644 --- a/web/src/routes/__tests__/Event.test.jsx +++ b/web/src/routes/__tests__/Event.test.jsx @@ -26,28 +26,9 @@ describe('Event Route', () => { expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument(); expect(screen.queryByText('Clip')).toBeInTheDocument(); - expect(screen.queryByLabelText('Clip for event 1613257326.237365-83cgl2')).toHaveAttribute( - 'src', - 'http://localhost:5000/clips/front-1613257326.237365-83cgl2.mp4' - ); - expect(screen.queryByText('Best image')).toBeInTheDocument(); + expect(screen.queryByLabelText('Video Player')).toBeInTheDocument(); + expect(screen.queryByText('Best Image')).not.toBeInTheDocument(); expect(screen.queryByText('Thumbnail')).not.toBeInTheDocument(); - expect(screen.queryByAltText('person at 82.0% confidence')).toHaveAttribute( - 'src', - 'http://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(); - - 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 () => { @@ -55,7 +36,21 @@ describe('Event Route', () => { render(); expect(screen.queryByText('Clip')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('Clip for event 1613257326.237365-83cgl2')).not.toBeInTheDocument(); + expect(screen.queryByLabelText('Video Player')).not.toBeInTheDocument(); + expect(screen.queryByText('Best Image')).toBeInTheDocument(); + expect(screen.queryByText('Thumbnail')).not.toBeInTheDocument(); + }); + + test('shows the thumbnail if no snapshot available', async () => { + useEventMock.mockReturnValue({ data: { ...mockEvent, has_clip: false, has_snapshot: false }, status: 'loaded' }); + render(); + + 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...' + ); }); });