From 11c26cd68ef40b496242028532a43643de1691c0 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Thu, 21 Oct 2021 18:05:11 +0200
Subject: [PATCH] Add test for MediaSidebar

---
 ui/src/Pages/SharePage/AlbumSharePage.tsx     |  5 ++
 ...Route.test.js => AuthorizedRoute.test.tsx} |  8 +-
 ui/src/components/sidebar/AlbumCovers.tsx     |  6 ++
 .../MediaSidebar/MediaSidebar.test.tsx        | 87 +++++++++++++++++++
 ...Exif.test.js => MediaSidebarExif.test.tsx} | 20 ++++-
 5 files changed, 120 insertions(+), 6 deletions(-)
 rename ui/src/components/routes/{AuthorizedRoute.test.js => AuthorizedRoute.test.tsx} (84%)
 create mode 100644 ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx
 rename ui/src/components/sidebar/MediaSidebar/{MediaSidebarExif.test.js => MediaSidebarExif.test.tsx} (83%)

diff --git a/ui/src/Pages/SharePage/AlbumSharePage.tsx b/ui/src/Pages/SharePage/AlbumSharePage.tsx
index 1549376..6635d12 100644
--- a/ui/src/Pages/SharePage/AlbumSharePage.tsx
+++ b/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
+          }
         }
       }
     }
diff --git a/ui/src/components/routes/AuthorizedRoute.test.js b/ui/src/components/routes/AuthorizedRoute.test.tsx
similarity index 84%
rename from ui/src/components/routes/AuthorizedRoute.test.js
rename to ui/src/components/routes/AuthorizedRoute.test.tsx
index 7bd8371..7e87756 100644
--- a/ui/src/components/routes/AuthorizedRoute.test.js
+++ b/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={['/']}>
diff --git a/ui/src/components/sidebar/AlbumCovers.tsx b/ui/src/components/sidebar/AlbumCovers.tsx
index d00cca7..4b0d7ab 100644
--- a/ui/src/components/sidebar/AlbumCovers.tsx
+++ b/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>
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx b/ui/src/components/sidebar/MediaSidebar/MediaSidebar.test.tsx
new file mode 100644
index 0000000..6c0cf62
--- /dev/null
+++ b/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()
+  })
+})
diff --git a/ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.js b/ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.tsx
similarity index 83%
rename from ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.js
rename to ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.tsx
index 5af8df9..0e3b002 100644
--- a/ui/src/components/sidebar/MediaSidebar/MediaSidebarExif.test.js
+++ b/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()
   })
 })
