update geovisio + add tests to utils

src/components/ImageItem.vue

@@ -47,7 +47,7 @@
           >
           <div class="button-info">
             <Link
-              look="button button--blue no-text"
+              look="button button--white-blue no-text"
               icon="bi bi-cloud-download-fill"
               type="external"
               target="_blank"

src/components/Link.vue

@@ -108,13 +108,22 @@ const titleImg = computed<string>(() =>
     }
   }
 }
-.button--blue {
-  background-color: var(--blue);
+.button--white-blue {
+  background-color: var(--white);
+  border: 0.1rem solid var(--blue);
   .icon {
     font-size: 1.4rem;
     color: var(--blue);
   }
 }
+.button--blue {
+  background-color: var(--blue);
+  border: 0.1rem solid var(--blue);
+  .icon {
+    font-size: 1.4rem;
+    color: var(--white);
+  }
+}
 .disabled {
   color: grey;
   cursor: not-allowed;

src/tests/cypress/e2e/home.cy.ts

@@ -1,5 +1,5 @@
 describe('In the home page', () => {
-  it('click on the link in the header to go to the upload page', () => {
+  it('click on the link in the header to go to the utils page', () => {
     cy.visit('/')
     cy.fixture('home').then((homeData) => {
       cy.contains(homeData.textLinkUpload).click()

src/tests/cypress/e2e/upload.cy.ts

@@ -1,4 +1,4 @@
-describe('In the upload page', () => {
+describe('In the utils page', () => {
   it('go to the login page', () => {
     cy.visit('partager-des-photos')
     cy.fixture('upload').then((uploadData) => {

src/tests/unit/utils.spec.js

@@ -0,0 +1,180 @@
+import { it, describe, expect } from 'vitest'
+import {
+  imageStatus,
+  photoToDeleteOrPatchSelected,
+  spliceIntoChunks,
+  formatPaginationItems
+} from '../../views/utils/sequence/index'
+import {
+  formatPictureSize,
+  formatTextSize
+} from '../../views/utils/upload/index'
+import { getAuthRoute } from '../../utils/auth'
+import { img, getPicId } from '../../utils/image'
+import title from '../../utils/index'
+
+describe('imageStatus', () => {
+  it('should render the "status" value', () => {
+    const sequenceStatus = 'hidden'
+    const imgStatus = 'not hidden'
+    expect(imageStatus(imgStatus, sequenceStatus)).toEqual('hidden')
+  })
+  it('should render the "sequenceStatus" value', () => {
+    const sequenceStatus = 'not hidden'
+    const status = 'hidden'
+    expect(imageStatus(status, sequenceStatus)).toEqual('hidden')
+  })
+})
+
+describe('photoToDeleteOrPatchSelected', () => {
+  it('should render true', () => {
+    const imagesToDelete = ['1', '2']
+    const item = {
+      assets: { thumb: { href: '' }, hd: { href: '' } },
+      properties: { created: new Date(), 'geovisio:status': '' },
+      id: '1',
+      bbox: [1, 3]
+    }
+    expect(photoToDeleteOrPatchSelected(item, imagesToDelete)).toEqual(true)
+  })
+  it('should render false', () => {
+    const imagesToDelete = ['1', '2']
+    const item = {
+      assets: { thumb: { href: '' }, hd: { href: '' } },
+      properties: { created: new Date(), 'geovisio:status': '' },
+      id: '3',
+      bbox: [1, 3]
+    }
+    expect(photoToDeleteOrPatchSelected(item, imagesToDelete)).toEqual(false)
+  })
+})
+
+describe('spliceIntoChunks', () => {
+  it('should render an chunked array of array with 4 elements max', () => {
+    const array = ['123', '345', '6777', '0000', '66666', '222222', '9393888']
+    const chunkSize = 4
+    expect(spliceIntoChunks(array, chunkSize)).toEqual([
+      ['123', '345', '6777', '0000'],
+      ['66666', '222222', '9393888']
+    ])
+  })
+})
+
+describe('formatPaginationItems', () => {
+  it('should render the "rel" links formated and without the "left" element', () => {
+    const links = [
+      {
+        href: 'http://localhost:5000/api/',
+        rel: 'root',
+        title: 'Instance catalog',
+        type: 'application/json'
+      },
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff5-4d70-88fa-6b2be3357709',
+        rel: 'parent',
+        type: 'application/json'
+      },
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff5-4d70-88fa-6b2be3357709/items?limit=100',
+        rel: 'self',
+        type: 'application/geo+json'
+      },
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff5-4d70-88fa-6b2be3357709/items?limit=100',
+        rel: 'first',
+        type: 'application/geo+json'
+      },
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff…a-6b2be3357709/items?limit=100&startAfterRank=100',
+        rel: 'next',
+        type: 'application/geo+json'
+      },
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff…-6b2be3357709/items?limit=100&startAfterRank=1023',
+        rel: 'last',
+        type: 'application/geo+json'
+      }
+    ]
+    expect(formatPaginationItems(links)).toEqual([
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff5-4d70-88fa-6b2be3357709/items?limit=100',
+        rel: 'double-left',
+        type: 'application/geo+json'
+      },
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff…a-6b2be3357709/items?limit=100&startAfterRank=100',
+        rel: 'right',
+        type: 'application/geo+json'
+      },
+      {
+        href: 'http://localhost:5000/api/collections/076e04c2-5ff…-6b2be3357709/items?limit=100&startAfterRank=1023',
+        rel: 'double-right',
+        type: 'application/geo+json'
+      }
+    ])
+  })
+})
+
+describe('formatPictureSize', () => {
+  it('should render the size number', () => {
+    const size = 560673
+    expect(formatPictureSize(size)).toEqual(1)
+  })
+})
+
+describe('formatTextSize', () => {
+  const size = 2260121
+  it('should render the size text formated in ko', () => {
+    expect(formatTextSize(size, 1)).toEqual('2207.15 Ko')
+  })
+  it('should render the size text formated in mo', () => {
+    expect(formatTextSize(size, 2)).toEqual('2.16 Mo')
+  })
+  it('should render the size text formated in go', () => {
+    expect(formatTextSize(size, 3)).toEqual('0 Go')
+  })
+})
+
+describe('getAuthRoute', () => {
+  it('should render auth route', () => {
+    const authRoute = 'auth'
+    const nextRoute = 'mes-sequences'
+    const returnedRoute = `/api/${authRoute}?next_url=${encodeURIComponent(
+      `${location.protocol}//${location.host}${nextRoute}`
+    )}`
+    expect(getAuthRoute(authRoute, nextRoute)).toEqual(returnedRoute)
+  })
+})
+
+describe('img', () => {
+  it('should render the formated img path', () => {
+    const name = 'my-img'
+    expect(img(name)).contains('src/assets/images')
+  })
+})
+
+describe('getPicId', () => {
+  it('should return the Id of the picture in the url', () => {
+    const url = 'http://dummy.com?pic=3205340583&test'
+    Object.defineProperty(window, 'location', {
+      value: {
+        href: url
+      },
+      writable: true // possibility to override
+    })
+    expect(getPicId()).toEqual('3205340583')
+  })
+})
+
+describe('title', () => {
+  it('should return the formated title with instance name', () => {
+    import.meta.env.VITE_INSTANCE_NAME = 'my instance'
+    const myTitle = 'my title'
+    expect(title(myTitle)).toEqual('my title my instance')
+  })
+  it('should return the formated title without instance name', () => {
+    import.meta.env.VITE_INSTANCE_NAME = ''
+    const myTitle = 'my title'
+    expect(title(myTitle)).toEqual('my title')
+  })
+})

src/views/MySequenceView.vue

@@ -156,7 +156,7 @@
               :selected="photoToDeleteOrPatchSelected(item, picturesToDelete)"
               :selected-on-map="itemSelected === item.id"
               :status="
-                imageStatus(item.properties['geovisio:status'], sequence)
+                imageStatus(item.properties['geovisio:status'], sequence.status)
               "
               @trigger="selectImageAndMove(item)"
             />

src/views/UploadPicturesView.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import InputUpload from '@/components/InputUpload.vue'
 import Button from '@/components/Button.vue'
@@ -60,7 +60,7 @@ import {
   createAPictureToASequence,
   createASequence
 } from '@/views/utils/upload/request'
-
+import { formatPictureSize, formatTextSize } from '@/views/utils/upload/index'
 let pictures = ref<FileList | []>([])
 let picturesCount = ref<number>(0)
 let isLoading = ref<boolean>(false)
@@ -83,7 +83,9 @@ watch(isLoading, () => {
     window.onbeforeunload = null
   }
 })
-
+onUnmounted(() => {
+  window.onbeforeunload = null
+})
 const fileUploaded = computed<string>(() => {
   return t('pages.upload.uploaded_files', { count: picturesCount.value })
 })
@@ -109,13 +111,6 @@ function triggerNewUpload(): void {
   isLoading.value = false
   picturesCount.value = 0
 }
-function formatPictureSize(size: number): number {
-  return Math.floor(Math.log(size) / Math.log(1024))
-}
-function formatTextSize(size: number, i: number): string {
-  const sizes = ['0', 'Ko', 'Mo', 'Go', 'To', 'Po', 'Eo', 'Zo', 'o']
-  return `${parseFloat((size / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`
-}
 function addPictures(value: FileList): void {
   pictures.value = value
   picturesCount.value = pictures.value.length

src/views/utils/sequence/index.ts

@@ -1,14 +1,10 @@
 import type {
-  UserSequenceInterface,
   ResponseUserPhotoInterface,
   ResponseUserPhotoLinksInterface
 } from '@/views/interfaces/MySequenceView'
 
-function imageStatus(
-  imageStatus: string,
-  userSequence: UserSequenceInterface
-): string {
-  if (userSequence.status === 'hidden') return userSequence.status
+function imageStatus(imageStatus: string, sequenceStatus: string): string {
+  if (sequenceStatus === 'hidden') return sequenceStatus
   return imageStatus
 }
 

src/views/utils/upload/index.ts

@@ -0,0 +1,8 @@
+function formatPictureSize(size: number): number {
+  return Math.floor(Math.log(size) / Math.log(1024))
+}
+function formatTextSize(size: number, i: number): string {
+  const sizes = ['0', 'Ko', 'Mo', 'Go', 'To', 'Po', 'Eo', 'Zo', 'o']
+  return `${parseFloat((size / Math.pow(1024, i)).toFixed(2))} ${sizes[i]}`
+}
+export { formatPictureSize, formatTextSize }