wip

package.json

@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@vueuse/components": "^10.2.1",
     "@vueuse/core": "^10.2.1",
     "axios": "^1.2.3",
     "bootstrap": "^5.2.3",

src/components/Header.vue

@@ -23,7 +23,7 @@
           path="/"
         />
       </div>
-      <div class="wrapper-entries">
+      <div ref="list" class="wrapper-entries">
         <ul :class="['nav-list', { 'menu-open': !menuIsClosed }]">
           <li v-if="isLogged" class="logged-link">
             <Link
@@ -72,7 +72,6 @@
             v-if="isLogged"
             class="menu-burger"
             :aria-label="ariaLabel"
-            v-on-click-outside="closeModal"
             @click="toggleMenu"
           >
             <div v-if="isLogged" class="item-with-sub">
@@ -98,7 +97,7 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import type { vOnClickOutside } from '@vueuse/components'
+import { onClickOutside } from '@vueuse/core'
 import { useCookies } from 'vue3-cookies'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
@@ -113,9 +112,11 @@ defineProps({
   authEnabled: { type: Boolean, default: true },
   userProfileUrl: { type: String, default: null }
 })
-
+const list = ref(null)
 let menuIsClosed = ref<boolean>(true)
 
+onClickOutside(list, () => closeModal())
+
 function closeModal() {
   menuIsClosed.value = true
 }

src/components/Link.vue

@@ -65,11 +65,14 @@ const titleImg = computed<string>(() =>
   align-items: center;
   color: var(--black);
   text-decoration: none;
-  width: 100%;
   .icon {
     margin-right: 1rem;
   }
 }
+.text {
+  width: 100%;
+  text-align: center;
+}
 .link:hover {
   background-color: transparent;
   text-decoration: underline;

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useCookies } from 'vue3-cookies'
 import type { RouteRecordRaw } from 'vue-router'
+import axios from 'axios'
 import { getAuthRoute } from '@/utils/auth'
 import HomeView from '../views/HomeView.vue'
 import MyInformationView from '../views/MyInformationView.vue'
@@ -41,18 +42,25 @@ const router = createRouter({
   history: createWebHistory(),
   routes
 })
-router.beforeEach(async (to, from, next) => {
+
+router.beforeResolve(async (to, from, next) => {
   const loggedRoutes =
     to.name === 'my-information' ||
     to.name === 'my-settings' ||
     to.name === 'my-sequences' ||
     to.name === 'sequence'
   if (loggedRoutes) {
-    const isSiteLogin = !!cookies.get('user_id')
-    if (!isSiteLogin) {
-      next((window.location.href = getAuthRoute('auth/login', to.path)))
-    } else {
-      next()
+    try {
+      const loginUrl = `/api/users/me`
+      const isKeycloakLogout = await axios.get(loginUrl)
+      const isSiteLogin = !!cookies.get('user_id')
+      if (isKeycloakLogout.status >= 300 || !isSiteLogin) {
+        window.location.replace(getAuthRoute('auth/login', to.path))
+      } else {
+        next()
+      }
+    } catch (e) {
+      window.location.replace(getAuthRoute('auth/login', to.path))
     }
   } else next()
 })

src/tests/unit/views/HomeView.spec.js

@@ -0,0 +1,34 @@
+import { it, describe, expect, vi } from 'vitest'
+import { flushPromises, shallowMount } from '@vue/test-utils'
+import HomeView from '../../../views/HomeView.vue'
+import { createI18n } from 'vue-i18n'
+import fr from '../../../locales/fr.json'
+import { createRouter, createWebHistory } from 'vue-router'
+
+const i18n = createI18n({
+  locale: 'fr',
+  fallbackLocale: 'fr',
+  globalInjection: true,
+  legacy: false,
+  messages: {
+    fr
+  }
+})
+const router = createRouter({
+  history: createWebHistory(),
+  routes: []
+})
+
+describe('Template', () => {
+  it('should render the view without pictures', async () => {
+    const wrapper = shallowMount(HomeView, {
+      global: {
+        plugins: [i18n, router],
+        mocks: {
+          $t: (msg) => msg
+        }
+      }
+    })
+    console.log(wrapper.html())
+  })
+})

src/tests/unit/views/MySequence.spec.js

@@ -1,9 +1,40 @@
-import { it, describe, expect, vi, beforeEach } from 'vitest'
+import { it, describe, expect, vi } from 'vitest'
 import { flushPromises, shallowMount } from '@vue/test-utils'
 import MySequenceView from '../../../views/MySequenceView.vue'
 import axios from 'axios'
 import { createI18n } from 'vue-i18n'
 import fr from '../../../locales/fr.json'
+import { createRouter, createWebHistory } from 'vue-router'
+import { fetchMapAndViewer } from '../../../utils/mapAndViewer'
+
+vi.mock('../../../utils/mapAndViewer', () => ({
+  fetchMapAndViewer: vi
+    .fn()
+    .mockResolvedValue(/* mock the return value of fetchMapAndViewer */)
+}))
+vi.mock('../../../utils/dates', () => ({
+  formatDate: vi.fn()
+}))
+vi.mock('axios')
+vi.mock('geovisio', () => ({
+  __esModule: true,
+  default: vi.fn().mockImplementation((container, apiUrl, params) => {
+    return {
+      container: '#viewer',
+      _map: {
+        once: (event, callback) => callback(),
+        resize: vi.fn(),
+        start: vi.fn(),
+        stop: vi.fn()
+      },
+      psv: {
+        // Mock the methods or properties of the `psv` object
+        // ...
+      },
+      setWide: vi.fn()
+    }
+  })
+}))
 const i18n = createI18n({
   locale: 'fr',
   fallbackLocale: 'fr',
@@ -13,20 +44,25 @@ const i18n = createI18n({
     fr
   }
 })
+const router = createRouter({
+  history: createWebHistory(),
+  routes: []
+})
 
 describe('Template', () => {
-  it('should render the view without sequences', async () => {
-    await axios.get.mockReturnValue({ data: { links: [] } })
+  it('should render the view without pictures', async () => {
     const wrapper = shallowMount(MySequenceView, {
       global: {
-        plugins: [i18n],
+        plugins: [i18n, router],
         mocks: {
           $t: (msg) => msg
         }
       }
     })
     await flushPromises()
+    await wrapper.vm.$nextTick()
 
-    expect(axios.get).toHaveBeenCalledWith('api/collections/1234567')
+    console.log(wrapper)
+    expect(fetchMapAndViewer).toHaveBeenCalled()
   })
 })

src/views/MySequenceView.vue

@@ -240,6 +240,7 @@ onMounted(async () => {
     userPhotos.value = collectionItems
     if (collectionItemsReady[0]) {
       viewer.value = await fetchMapAndViewer(collectionItemsReady[0].id)
+      console.log(viewer.value.container)
       return scrollIntoSelected(collectionItemsReady[0].id)
     }
     viewer.value = await fetchMapAndViewer()
@@ -247,6 +248,7 @@ onMounted(async () => {
     console.log(err)
   }
 })
+
 function fullImagesToDelete(): ResponseUserPhotoInterface[] {
   return userPhotos.value.filter((el) => imagesToDelete.value.includes(el.id))
 }