Add test for MediaSidebar

ui/src/Pages/SharePage/AlbumSharePage.tsx

@@ -66,6 +66,7 @@ export const SHARE_ALBUM_QUERY = gql`
           url
         }
         exif {
+          id
           camera
           maker
           lens
@@ -76,6 +77,10 @@ export const SHARE_ALBUM_QUERY = gql`
           focalLength
           flash
           exposureProgram
+          coordinates {
+            latitude
+            longitude
+          }
         }
       }
     }

ui/src/components/routes/AuthorizedRoute.test.tsx

@@ -7,11 +7,15 @@ import * as authentication from '../../helpers/authentication'
 
 jest.mock('../../helpers/authentication.ts')
 
+const authToken = authentication.authToken as jest.Mock<
+  ReturnType<typeof authentication.authToken>
+>
+
 describe('AuthorizedRoute component', () => {
   const AuthorizedComponent = () => <div>authorized content</div>
 
   test('not logged in', async () => {
-    authentication.authToken.mockImplementation(() => null)
+    authToken.mockImplementation(() => null)
 
     render(
       <MemoryRouter initialEntries={['/']}>
@@ -24,7 +28,7 @@ describe('AuthorizedRoute component', () => {
   })
 
   test('logged in', async () => {
-    authentication.authToken.mockImplementation(() => 'token-here')
+    authToken.mockImplementation(() => 'token-here')
 
     render(
       <MemoryRouter initialEntries={['/']}>

ui/src/components/sidebar/AlbumCovers.tsx

@@ -12,6 +12,7 @@ import {
   resetAlbumCover,
   resetAlbumCoverVariables,
 } from './__generated__/resetAlbumCover'
+import { authToken } from '../../helpers/authentication'
 
 const RESET_ALBUM_COVER_MUTATION = gql`
   mutation resetAlbumCover($albumID: ID!) {
@@ -62,6 +63,11 @@ export const SidebarPhotoCover = ({ cover_id }: SidebarPhotoCoverProps) => {
     setButtonDisabled(false)
   }, [cover_id])
 
+  // hide when not authenticated
+  if (!authToken()) {
+    return null
+  }
+
   return (
     <SidebarSection>
       <SidebarSectionTitle>

ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
+import MediaSidebar, { MediaSidebarMedia } from './MediaSidebar'
+import { MediaType } from '../../../__generated__/globalTypes'
+import { MemoryRouter } from 'react-router'
+
+import * as authentication from '../../../helpers/authentication'
+
+jest.mock('../../../helpers/authentication.ts')
+
+const authToken = authentication.authToken as jest.Mock<
+  ReturnType<typeof authentication.authToken>
+>
+
+describe('MediaSidebar', () => {
+  const media: MediaSidebarMedia = {
+    __typename: 'Media',
+    id: '6867',
+    title: '122A6069.jpg',
+    type: MediaType.Photo,
+    thumbnail: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/thumbnail.jpg',
+      width: 1024,
+      height: 839,
+    },
+    highRes: {
+      __typename: 'MediaURL',
+      url: 'http://localhost:4001/photo/highres.jpg',
+      width: 5322,
+      height: 4362,
+    },
+    videoWeb: null,
+    album: {
+      __typename: 'Album',
+      id: '2294',
+      title: 'album_name',
+    },
+  }
+
+  test('render sample image, unauthorized', () => {
+    authToken.mockImplementation(() => null)
+
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <MemoryRouter>
+          <MediaSidebar media={media} />
+        </MemoryRouter>
+      </MockedProvider>
+    )
+
+    expect(screen.getByText('122A6069.jpg')).toBeInTheDocument()
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
+      'http://localhost:4001/photo/highres.jpg'
+    )
+
+    expect(
+      screen.queryByText('Set as album cover photo')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText('Sharing options')).not.toBeInTheDocument()
+  })
+
+  test('render sample image, authorized', () => {
+    authToken.mockImplementation(() => 'token-here')
+
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <MemoryRouter>
+          <MediaSidebar media={media} />
+        </MemoryRouter>
+      </MockedProvider>
+    )
+
+    expect(screen.getByText('122A6069.jpg')).toBeInTheDocument()
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'src',
+      'http://localhost:4001/photo/highres.jpg'
+    )
+
+    expect(screen.getByText('Set as album cover photo')).toBeInTheDocument()
+    expect(screen.getByText('Album path')).toBeInTheDocument()
+
+    screen.debug()
+  })
+})

ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import ExifDetails from './MediaSidebarExif'
+import { MediaSidebarMedia } from './MediaSidebar'
+import { MediaType } from '../../../__generated__/globalTypes'
 
 describe('ExifDetails', () => {
   test('without EXIF information', async () => {
-    const media = {
+    const media: MediaSidebarMedia = {
       id: '1730',
       title: 'media_name.jpg',
-      type: 'Photo',
+      type: MediaType.Photo,
       exif: {
         id: '0',
         camera: null,
@@ -20,6 +22,7 @@ describe('ExifDetails', () => {
         focalLength: null,
         flash: null,
         exposureProgram: null,
+        coordinates: null,
         __typename: 'MediaEXIF',
       },
       __typename: 'Media',
@@ -37,13 +40,14 @@ describe('ExifDetails', () => {
     expect(screen.queryByText('ISO')).not.toBeInTheDocument()
     expect(screen.queryByText('Focal length')).not.toBeInTheDocument()
     expect(screen.queryByText('Flash')).not.toBeInTheDocument()
+    expect(screen.queryByText('Coordinates')).not.toBeInTheDocument()
   })
 
   test('with EXIF information', async () => {
-    const media = {
+    const media: MediaSidebarMedia = {
       id: '1730',
       title: 'media_name.jpg',
-      type: 'Photo',
+      type: MediaType.Photo,
       exif: {
         id: '1666',
         camera: 'Canon EOS R',
@@ -56,6 +60,11 @@ describe('ExifDetails', () => {
         focalLength: 24,
         flash: 9,
         exposureProgram: 3,
+        coordinates: {
+          __typename: 'Coordinates',
+          latitude: 41.40338,
+          longitude: 2.17403,
+        },
         __typename: 'MediaEXIF',
       },
       __typename: 'Media',
@@ -94,5 +103,8 @@ describe('ExifDetails', () => {
 
     expect(screen.getByText('Flash')).toBeInTheDocument()
     expect(screen.getByText('On, Fired')).toBeInTheDocument()
+
+    expect(screen.getByText('Coordinates')).toBeInTheDocument()
+    expect(screen.getByText('41.40338, 2.17403')).toBeInTheDocument()
   })
 })