From c5f38ef6a2d62f2afd72b453548bcc299dec6a31 Mon Sep 17 00:00:00 2001 From: viktorstrate Date: Tue, 4 May 2021 21:16:41 +0200 Subject: [PATCH] Write more tests --- .../photoGallery/PhotoGallery.test.tsx | 125 ++++++++++++++++++ .../components/photoGallery/PhotoGallery.tsx | 2 +- .../presentView/PresentMedia.test.tsx | 57 ++++++++ .../photoGallery/presentView/PresentMedia.tsx | 8 +- .../presentView/PresentNavigationOverlay.tsx | 1 + 5 files changed, 190 insertions(+), 3 deletions(-) create mode 100644 ui/src/components/photoGallery/PhotoGallery.test.tsx create mode 100644 ui/src/components/photoGallery/presentView/PresentMedia.test.tsx diff --git a/ui/src/components/photoGallery/PhotoGallery.test.tsx b/ui/src/components/photoGallery/PhotoGallery.test.tsx new file mode 100644 index 00000000..8913178d --- /dev/null +++ b/ui/src/components/photoGallery/PhotoGallery.test.tsx @@ -0,0 +1,125 @@ +import '@testing-library/jest-dom' +import { render, screen } from '@testing-library/react' + +import React from 'react' +import { MediaType } from '../../../__generated__/globalTypes' +import PhotoGallery from './PhotoGallery' +import { PhotoGalleryState } from './photoGalleryReducer' + +require('../../localization').setupLocalization() + +jest.mock('./photoGalleryMutations', () => ({ + useMarkFavoriteMutation: () => [jest.fn()], +})) + +test('photo gallery with media', () => { + const dispatchMedia = jest.fn() + + const mediaState: PhotoGalleryState = { + activeIndex: 0, + media: [ + { + id: '165', + type: MediaType.Photo, + thumbnail: { + url: + 'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg', + width: 768, + height: 1024, + __typename: 'MediaURL', + }, + highRes: null, + videoWeb: null, + favorite: false, + __typename: 'Media', + }, + { + id: '122', + type: MediaType.Photo, + thumbnail: null, + highRes: null, + videoWeb: null, + favorite: false, + __typename: 'Media', + }, + { + id: '98', + type: MediaType.Video, + thumbnail: null, + highRes: null, + videoWeb: null, + favorite: false, + __typename: 'Media', + }, + ], + presenting: false, + } + + render( + + ) + + expect( + screen.getByTestId('photo-gallery-wrapper').querySelectorAll('img') + ).toHaveLength(3) +}) + +describe('photo gallery presenting', () => { + const dispatchMedia = jest.fn() + + test('not presenting', () => { + const mediaStateNoPresent: PhotoGalleryState = { + activeIndex: -1, + media: [], + presenting: false, + } + + render( + + ) + + expect(screen.queryByTestId('present-overlay')).not.toBeInTheDocument() + }) + + test('presenting', () => { + const mediaStatePresent: PhotoGalleryState = { + activeIndex: 0, + media: [ + { + id: '165', + type: MediaType.Photo, + thumbnail: { + url: + 'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg', + width: 768, + height: 1024, + __typename: 'MediaURL', + }, + highRes: null, + videoWeb: null, + favorite: false, + __typename: 'Media', + }, + ], + presenting: true, + } + + render( + + ) + + expect(screen.getByTestId('present-overlay')).toBeInTheDocument() + }) +}) diff --git a/ui/src/components/photoGallery/PhotoGallery.tsx b/ui/src/components/photoGallery/PhotoGallery.tsx index a0dbdbe5..8dec7185 100644 --- a/ui/src/components/photoGallery/PhotoGallery.tsx +++ b/ui/src/components/photoGallery/PhotoGallery.tsx @@ -97,7 +97,7 @@ const PhotoGallery = ({ return ( - + {t('general.loading.media', 'Loading media')} diff --git a/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx b/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx new file mode 100644 index 00000000..13aa5132 --- /dev/null +++ b/ui/src/components/photoGallery/presentView/PresentMedia.test.tsx @@ -0,0 +1,57 @@ +import '@testing-library/jest-dom' +import { render, screen } from '@testing-library/react' + +import React from 'react' +import { MediaType } from '../../../../__generated__/globalTypes' +import PresentMedia, { PresentMediaProps_Media } from './PresentMedia' + +test('render present image', () => { + const media: PresentMediaProps_Media = { + __typename: 'Media', + id: '123', + type: MediaType.Photo, + highRes: null, + thumbnail: { + __typename: 'MediaURL', + url: '/sample_image.jpg', + }, + } + + render() + + expect(screen.getByTestId('present-img-thumbnail')).toHaveAttribute( + 'src', + 'http://localhost/sample_image.jpg' + ) + expect(screen.getByTestId('present-img-highres')).toHaveStyle({ + display: 'none', + }) +}) + +test('render present video', () => { + const media: PresentMediaProps_Media = { + __typename: 'Media', + id: '123', + type: MediaType.Video, + highRes: null, + videoWeb: { + __typename: 'MediaURL', + url: '/sample_video.mp4', + }, + thumbnail: { + __typename: 'MediaURL', + url: '/sample_video_thumb.jpg', + }, + } + + render() + + expect(screen.getByTestId('present-video')).toHaveAttribute( + 'poster', + 'http://localhost/sample_video_thumb.jpg' + ) + + expect( + screen.getByTestId('present-video').querySelector('source') + ).toHaveAttribute('src', 'http://localhost/sample_video.mp4') +}) diff --git a/ui/src/components/photoGallery/presentView/PresentMedia.tsx b/ui/src/components/photoGallery/presentView/PresentMedia.tsx index daa1f660..0076a097 100644 --- a/ui/src/components/photoGallery/presentView/PresentMedia.tsx +++ b/ui/src/components/photoGallery/presentView/PresentMedia.tsx @@ -48,10 +48,14 @@ const PresentMedia = ({ case MediaType.Photo: return (
- + { const elem = e.target as HTMLImageElement elem.style.display = 'initial' @@ -61,7 +65,7 @@ const PresentMedia = ({
) case MediaType.Video: - return + return } exhaustiveCheck(media.type) diff --git a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx b/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx index e570a176..256e9109 100644 --- a/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx +++ b/ui/src/components/photoGallery/presentView/PresentNavigationOverlay.tsx @@ -94,6 +94,7 @@ const PresentNavigationOverlay = ({ return ( { onMouseMove.current && onMouseMove.current() }}