mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Write tests for timeline gallery reducer

This commit is contained in:
viktorstrate 2021-05-04 16:52:43 +02:00
parent 64dd907846
commit a12a155976
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
7 changed files with 496 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/.eslintrc.js
View File

@ -30,8 +30,8 @@ module.exports = {
plugins: ['react', 'react-hooks', '@typescript-eslint'],
rules: {
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'warn',
'react/display-name': 'off',
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
@ -52,6 +52,7 @@ module.exports = {
{
'no-import-assign': 'off',
'react/prop-types': 'off',
'jest/valid-title': 'off',
}
),
}),

1
ui/src/Pages/PlacesPage/PlacesPage.tsx
View File

@ -138,7 +138,6 @@ const MapPage = () => {
urlPresentModeSetupHook({
dispatchMedia: dispatchMarkerMedia,
openPresentMode: event => {
console.log('OPEN PRESENT MODE MAPS')
dispatchMarkerMedia({
type: 'openPresentMode',
activeIndex: event.state.activeIndex,

1
ui/src/components/facesOverlay/FacesOverlay.tsx
View File

@ -59,7 +59,6 @@ type SidebarFaceOverlayProps = {
}
export const SidebarFacesOverlay = ({ media }: SidebarFaceOverlayProps) => {
console.log('Faces overlay', media)
if (media.type != MediaType.Photo) return null
if (media.thumbnail == null) return null

19
ui/src/components/photoGallery/photoGalleryReducer.test.ts
View File

@ -88,4 +88,23 @@ describe('photo gallery reducer', () => {
activeIndex: 0,
})
})
test('present mode', () => {
const openState = photoGalleryReducer(defaultState, {
type: 'openPresentMode',
activeIndex: 10,
})
expect(openState).toEqual({
...defaultState,
presenting: true,
activeIndex: 10,
})
expect(
photoGalleryReducer(openState, { type: 'closePresentMode' })
).toEqual({
...openState,
presenting: false,
})
})
})

1
ui/src/components/photoGallery/photoGalleryReducer.tsx
View File

@ -22,7 +22,6 @@ export function photoGalleryReducer(
state: PhotoGalleryState,
action: PhotoGalleryAction
): PhotoGalleryState {
console.log('photo gallery reducer:', state, action)
switch (action.type) {
case 'nextImage':
return {

458
ui/src/components/timelineGallery/timelineGalleryReducer.test.ts Normal file
View File

@ -0,0 +1,458 @@
import { myTimeline_myTimeline } from './__generated__/myTimeline'
import { MediaType } from '../../../__generated__/globalTypes'
import {
timelineGalleryReducer,
TimelineGalleryState,
TimelineMediaIndex,
} from './timelineGalleryReducer'
describe('timeline gallery reducer', () => {
const defaultEmptyState: TimelineGalleryState = {
presenting: false,
activeIndex: {
album: -1,
date: -1,
media: -1,
},
timelineGroups: [],
}
const timelineData: myTimeline_myTimeline[] = [
{
album: {
id: '5',
title: 'first album',
__typename: 'Album',
},
media: [
{
id: '165',
title: '3666760020.jpg',
type: MediaType.Photo,
thumbnail: {
url:
'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
width: 768,
height: 1024,
__typename: 'MediaURL',
},
highRes: {
url: 'http://localhost:4001/photo/3666760020_wijGDNZ2.jpg',
width: 3024,
height: 4032,
__typename: 'MediaURL',
},
videoWeb: null,
favorite: false,
__typename: 'Media',
},
{
id: '184',
title: '7414455077.jpg',
type: MediaType.Photo,
thumbnail: {
url:
'http://localhost:4001/photo/thumbnail_7414455077_jpg_9JYHHYh6.jpg',
width: 768,
height: 1024,
__typename: 'MediaURL',
},
highRes: {
url: 'http://localhost:4001/photo/7414455077_0ejDBiKr.jpg',
width: 3024,
height: 4032,
__typename: 'MediaURL',
},
videoWeb: null,
favorite: false,
__typename: 'Media',
},
],
mediaTotal: 5,
date: '2019-09-21T00:00:00Z',
__typename: 'TimelineGroup',
},
{
album: {
id: '5',
title: 'another album',
__typename: 'Album',
},
media: [
{
id: '165',
title: '3666760020.jpg',
type: MediaType.Photo,
thumbnail: {
url:
'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
width: 768,
height: 1024,
__typename: 'MediaURL',
},
highRes: {
url: 'http://localhost:4001/photo/3666760020_wijGDNZ2.jpg',
width: 3024,
height: 4032,
__typename: 'MediaURL',
},
videoWeb: null,
favorite: false,
__typename: 'Media',
},
],
mediaTotal: 7,
date: '2019-09-21T00:00:00Z',
__typename: 'TimelineGroup',
},
{
__typename: 'TimelineGroup',
album: {
__typename: 'Album',
id: '5',
title: 'album on another day',
},
date: '2019-09-13T00:00:00Z',
mediaTotal: 1,
media: [
{
__typename: 'Media',
favorite: false,
videoWeb: null,
thumbnail: {
url:
'http://localhost:4001/photo/thumbnail_3666760020_jpg_x76GG5pS.jpg',
width: 768,
height: 1024,
__typename: 'MediaURL',
},
highRes: {
url: 'http://localhost:4001/photo/3666760020_wijGDNZ2.jpg',
width: 3024,
height: 4032,
__typename: 'MediaURL',
},
id: '321',
title: 'asdfimg.jpg',
type: MediaType.Photo,
},
],
},
]
const defaultState = timelineGalleryReducer(defaultEmptyState, {
type: 'replaceTimelineGroups',
timeline: timelineData,
})
test('replace timeline groups', () => {
expect(defaultState).toMatchObject({
presenting: false,
activeIndex: {
album: -1,
date: -1,
media: -1,
},
timelineGroups: [
{
date: '2019-09-21T00:00:00Z',
groups: [
{
album: {
id: '5',
title: 'first album',
},
date: '2019-09-21T00:00:00Z',
media: [
{
favorite: false,
highRes: {},
id: '165',
thumbnail: {},
title: '3666760020.jpg',
type: 'Photo',
},
{
highRes: {},
id: '184',
thumbnail: {},
title: '7414455077.jpg',
type: 'Photo',
},
],
mediaTotal: 5,
},
{
album: {
id: '5',
title: 'another album',
},
date: '2019-09-21T00:00:00Z',
media: [
{
id: '165',
},
],
mediaTotal: 7,
},
],
},
{
date: '2019-09-13T00:00:00Z',
groups: [
{
album: {
id: '5',
title: 'album on another day',
},
date: '2019-09-13T00:00:00Z',
media: [
{
favorite: false,
highRes: {},
id: '321',
thumbnail: {},
title: 'asdfimg.jpg',
type: 'Photo',
},
],
mediaTotal: 1,
},
],
},
],
})
})
test('select image', () => {
expect(
timelineGalleryReducer(defaultState, {
type: 'selectImage',
index: {
album: 0,
date: 0,
media: 0,
},
})
).toEqual({
...defaultState,
activeIndex: {
album: 0,
date: 0,
media: 0,
},
})
})
describe('next image', () => {
const testIndexes: {
name: string
in: TimelineMediaIndex
out: TimelineMediaIndex
}[] = [
{
name: 'no selection',
in: {
date: -1,
album: -1,
media: -1,
},
out: {
date: -1,
album: -1,
media: -1,
},
},
{
name: 'first selected',
in: {
date: 0,
album: 0,
media: 0,
},
out: {
date: 0,
album: 0,
media: 1,
},
},
{
name: 'next album',
in: {
date: 0,
album: 0,
media: 1,
},
out: {
date: 0,
album: 1,
media: 0,
},
},
{
name: 'next date',
in: {
date: 0,
album: 1,
media: 1,
},
out: {
date: 1,
album: 0,
media: 0,
},
},
{
name: 'reached end',
in: {
date: 1,
album: 0,
media: 0,
},
out: {
date: 1,
album: 0,
media: 0,
},
},
]
testIndexes.forEach(t => {
test(t.name, () => {
expect(
timelineGalleryReducer(
{
...defaultState,
activeIndex: t.in,
},
{ type: 'nextImage' }
)
).toEqual({
...defaultState,
activeIndex: t.out,
})
})
})
})
describe('previous image', () => {
const testIndexes: {
name: string
in: TimelineMediaIndex
out: TimelineMediaIndex
}[] = [
{
name: 'no selection',
in: {
album: -1,
date: -1,
media: -1,
},
out: {
album: -1,
date: -1,
media: -1,
},
},
{
name: 'first selected',
in: {
album: 0,
date: 0,
media: 0,
},
out: {
album: 0,
date: 0,
media: 0,
},
},
{
name: 'previous album',
in: {
date: 0,
album: 1,
media: 0,
},
out: {
date: 0,
album: 0,
media: 1,
},
},
{
name: 'previous date',
in: {
date: 1,
album: 0,
media: 0,
},
out: {
date: 0,
album: 1,
media: 0,
},
},
{
name: 'previous media',
in: {
date: 0,
album: 0,
media: 1,
},
out: {
date: 0,
album: 0,
media: 0,
},
},
]
testIndexes.forEach(t => {
test(t.name, () => {
expect(
timelineGalleryReducer(
{
...defaultState,
activeIndex: t.in,
},
{ type: 'previousImage' }
)
).toEqual({
...defaultState,
activeIndex: t.out,
})
})
})
})
test('present mode', () => {
expect(
timelineGalleryReducer(defaultState, {
type: 'openPresentMode',
activeIndex: {
date: 1,
album: 0,
media: 0,
},
})
).toEqual({
...defaultState,
presenting: true,
activeIndex: {
date: 1,
album: 0,
media: 0,
},
})
expect(
timelineGalleryReducer(defaultState, {
type: 'closePresentMode',
})
).toEqual({
...defaultState,
presenting: false,
})
})
})

38
ui/src/components/timelineGallery/timelineGalleryReducer.tsx
View File

@ -56,6 +56,14 @@ export function timelineGalleryReducer(
case 'nextImage': {
const { activeIndex, timelineGroups } = state
if (
activeIndex.album == -1 &&
activeIndex.date == -1 &&
activeIndex.media == -1
) {
return state
}
const albumGroups = timelineGroups[activeIndex.date].groups
const albumMedia = albumGroups[activeIndex.album].media
@ -97,6 +105,14 @@ export function timelineGalleryReducer(
case 'previousImage': {
const { activeIndex } = state
if (
activeIndex.album == -1 &&
activeIndex.date == -1 &&
activeIndex.media == -1
) {
return state
}
if (activeIndex.media > 0) {
return {
...state,
@ -123,7 +139,7 @@ export function timelineGalleryReducer(
if (activeIndex.date > 0) {
const albumGroups = state.timelineGroups[activeIndex.date - 1].groups
const albumMedia = albumGroups[activeIndex.album - 1].media
const albumMedia = albumGroups[albumGroups.length - 1].media
return {
...state,
@ -187,26 +203,6 @@ export const getActiveTimelineImage = ({
return getTimelineImage({ mediaState, index: mediaState.activeIndex })
}
// export const selectTimelineImageAction = ({
// index,
// mediaState,
// dispatchMedia,
// updateSidebar,
// }: {
// index: TimelineMediaIndex
// mediaState: TimelineGalleryState
// dispatchMedia: React.Dispatch<TimelineGalleryAction>
// updateSidebar: UpdateSidebarFn
// }) => {
// updateSidebar(
// <MediaSidebar media={getTimelineImage({ mediaState, index })} />
// )
// dispatchMedia({
// type: 'selectImage',
// index,
// })
// }
export const openTimelinePresentMode = ({
dispatchMedia,
activeIndex,