Merge branch 'tech/update-packages' into 'develop'

update packages and fix tests

See merge request panoramax/server/website!143

package.json

@@ -20,61 +20,61 @@
     "format": "prettier .  --write"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.6",
-    "@vueuse/core": "^10.2.1",
-    "axios": "^1.2.3",
-    "bootstrap": "^5.2.3",
-    "bootstrap-icons": "^1.10.3",
+    "@popperjs/core": "^2.11.8",
+    "@vueuse/core": "^10.9.0",
+    "axios": "^1.6.8",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "express": "4.19.2",
     "geovisio": "3.0.1",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
     "pako": "^2.1.0",
-    "pinia": "^2.1.4",
+    "pinia": "^2.1.7",
     "v-calendar": "^3.1.2",
     "vue": "^3.4.21",
     "vue-axios": "^3.5.2",
     "vue-draggable-resizable-vue3": "^2.3.1-beta.13",
-    "vue-eslint-parser": "^9.1.0",
-    "vue-i18n": "9.11.1",
+    "vue-i18n": "9.13.1",
     "vue-matomo": "^4.2.0",
-    "vue-router": "^4.3.0",
+    "vue-router": "^4.3.2",
     "vue3-cookies": "^1.0.6",
     "vue3-smooth-scroll": "^0.8.1"
   },
   "devDependencies": {
-    "@pinia/testing": "^0.1.2",
+    "@pinia/testing": "^0.1.3",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/jest": "^29.5.4",
     "@types/jsdom": "^20.0.1",
     "@types/node": "^18.11.18",
     "@typescript-eslint/eslint-plugin": "^5.46.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
-    "@vue/test-utils": "^2.2.4",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.1.3",
-    "cypress": "^13.8.1",
+    "cypress": "^13.9.0",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.8.0",
-    "jest": "^29.6.4",
-    "jsdom": "^20.0.3",
+    "jest": "^29.7.0",
+    "jsdom": "^24.0.0",
     "less": "^4.2.0",
-    "less-loader": "^11.1.3",
+    "less-loader": "^12.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.8.1",
-    "sass": "^1.62.0",
+    "sass": "^1.77.1",
     "terser": "^5.30.4",
     "typescript": "~4.7.4",
     "vite": "^5.2.11",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.2",
-    "vitest": "^0.25.3",
-    "vue-tsc": "^1.0.9"
+    "vitest": "^1.6.0",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-tsc": "^2.0.17"
   },
   "eslintConfig": {
     "extends": [

src/tests/unit/components/Header.spec.js

@@ -5,7 +5,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 import { useCookies } from 'vue3-cookies'
 import fr from '../../../locales/fr.json'
 import Header from '../../../components/Header.vue'
-vi.mock('vue-router')
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    path: '/mock-path'
+  })
+}))
 vi.mock('vue3-cookies', () => {
   const mockCookies = {
     get: vi.fn()
@@ -26,11 +30,6 @@ const i18n = createI18n({
   }
 })
 
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div></div>' } }]
-})
-
 describe('Template', () => {
   describe('When the user is not logged', () => {
     describe('When the user is in desktop', () => {
@@ -38,7 +37,7 @@ describe('Template', () => {
         import.meta.env.VITE_API_URL = 'api-url/'
         const wrapper = mount(Header, {
           global: {
-            plugins: [i18n, router],
+            plugins: [i18n],
             mocks: {
               $t: (msg) => msg
             }
@@ -61,7 +60,7 @@ describe('Template', () => {
         import.meta.env.VITE_API_URL = 'api-url/'
         const wrapper = mount(Header, {
           global: {
-            plugins: [i18n, router],
+            plugins: [i18n],
             mocks: {
               $t: (msg) => msg
             }
@@ -84,7 +83,7 @@ describe('Template', () => {
         import.meta.env.VITE_API_URL = 'api-url/'
         const wrapper = mount(Header, {
           global: {
-            plugins: [i18n, router],
+            plugins: [i18n],
             mocks: {
               $t: (msg) => msg
             }
@@ -107,7 +106,7 @@ describe('Template', () => {
           userProfileUrl: 'profil'
         },
         global: {
-          plugins: [i18n, router],
+          plugins: [i18n],
           mocks: {
             $t: (msg) => msg
           }
@@ -125,17 +124,10 @@ describe('Template', () => {
 
 describe('Methods', () => {
   describe('toggleMenu', () => {
-    let wrapper
-    beforeEach(async () => {
-      const VueRouter = await import('vue-router')
-      VueRouter.useRoute.mockReturnValueOnce({
-        path: 'my-path'
-      })
-    })
     it('Menu should be closed by default', () => {
-      wrapper = shallowMount(Header, {
+      const wrapper = shallowMount(Header, {
         global: {
-          plugins: [i18n, router],
+          plugins: [i18n],
           mocks: {
             $t: (msg) => msg
           }

src/tests/unit/components/Link.spec.js

@@ -1,24 +1,13 @@
 import { test, describe, vi, expect } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import Link from '../../../components/Link.vue'
-import { createI18n } from 'vue-i18n'
-import { createRouter, createWebHistory } from 'vue-router'
-import fr from '../../../locales/fr.json'
-vi.mock('vue-i18n')
+import * as img from '../../../utils/image'
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key) => key
+  })
+}))
 
-const i18n = createI18n({
-  locale: 'fr',
-  fallbackLocale: 'fr',
-  globalInjection: true,
-  legacy: false,
-  messages: {
-    fr
-  }
-})
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div></div>' } }]
-})
 const stubs = {
   'router-link': {
     template: '<router-link></router-link>'
@@ -28,9 +17,7 @@ describe('Template', () => {
   describe('Props', () => {
     test('should have default props', () => {
       const wrapper = shallowMount(Link, {
-        global: {
-          plugins: [i18n, router]
-        }
+        global: {}
       })
 
       expect(wrapper.vm.text).toBe(null)
@@ -49,8 +36,7 @@ describe('Template', () => {
     test('should render the component as a <a>', () => {
       const wrapper = shallowMount(Link, {
         global: {
-          stubs,
-          plugins: [i18n]
+          stubs
         },
         props: {
           type: 'external'
@@ -61,8 +47,7 @@ describe('Template', () => {
     test('should render an icon inside the link', () => {
       const wrapper = shallowMount(Link, {
         global: {
-          stubs,
-          plugins: [i18n]
+          stubs
         },
         props: {
           type: 'external',
@@ -74,8 +59,7 @@ describe('Template', () => {
     test('should render the text inside the link', () => {
       const wrapper = shallowMount(Link, {
         global: {
-          stubs,
-          plugins: [i18n]
+          stubs
         },
         props: {
           type: 'external',
@@ -85,28 +69,29 @@ describe('Template', () => {
       expect(wrapper.html()).contains('my-text')
     })
     test('should render an image inside the link', () => {
+      const imgSrc = 'my-url.png'
+      const imgPath = vi.spyOn(img, 'img')
+      imgPath.mockReturnValue(imgSrc)
       const wrapper = shallowMount(Link, {
         global: {
-          stubs,
-          plugins: [i18n]
+          stubs
         },
         props: {
           type: 'external',
           image: {
-            url: 'my-url.png',
+            url: imgSrc,
             alt: 'my-alt'
           }
         }
       })
       expect(wrapper.html()).contains('<img')
-      expect(wrapper.html()).contains('my-url.png')
+      expect(wrapper.html()).contains(imgSrc)
       expect(wrapper.html()).contains('my-alt')
     })
     test('should render the text inside the link', () => {
       const wrapper = shallowMount(Link, {
         global: {
-          stubs,
-          plugins: [i18n]
+          stubs
         },
         props: {
           type: 'external',
@@ -120,17 +105,13 @@ describe('Template', () => {
   describe('When the component is an internal link', () => {
     test('should render the component as an internal link', () => {
       const wrapper = shallowMount(Link, {
-        global: {
-          plugins: [i18n, router]
-        }
+        global: {}
       })
       expect(wrapper.html()).contains('<router-link')
     })
     test('should render an icon inside the link', () => {
       const wrapper = shallowMount(Link, {
-        global: {
-          plugins: [i18n]
-        },
+        global: {},
         props: {
           type: 'internal',
           icon: 'my-icon'
@@ -140,9 +121,7 @@ describe('Template', () => {
     })
     test('should render the text inside the link', () => {
       const wrapper = shallowMount(Link, {
-        global: {
-          plugins: [i18n, router]
-        },
+        global: {},
         props: {
           text: 'my-text'
         }
@@ -151,9 +130,7 @@ describe('Template', () => {
     })
     test('should render the disabled attribute', () => {
       const wrapper = shallowMount(Link, {
-        global: {
-          plugins: [i18n, router]
-        },
+        global: {},
         props: {
           disabled: true
         }

src/tests/unit/components/header/HeaderOpen.spec.js

@@ -3,19 +3,19 @@ import { shallowMount } from '@vue/test-utils'
 import HeaderOpen from '../../../../components/header/HeaderOpen.vue'
 import i18n from '../../config'
 import { createRouter, createWebHistory } from 'vue-router/dist/vue-router'
-vi.mock('vue-router')
+vi.mock('vue-router', () => ({
+  useRoute: () => ({
+    path: '/mock-path'
+  })
+}))
 import.meta.env.VITE_API_URL = 'api-url/'
 
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [{ path: '/', component: { template: '<div></div>' } }]
-})
 describe('Template', () => {
   describe('Props', () => {
     it('should have default props', () => {
       const wrapper = shallowMount(HeaderOpen, {
         global: {
-          plugins: [i18n, router]
+          plugins: [i18n]
         }
       })
       expect(wrapper.vm.menuIsClosed).toBe(true)
@@ -26,7 +26,7 @@ describe('Template', () => {
         it('should render the desktop entries', () => {
           const wrapper = shallowMount(HeaderOpen, {
             global: {
-              plugins: [i18n, router]
+              plugins: [i18n]
             },
             props: {
               menuIsClosed: false,
@@ -41,7 +41,7 @@ describe('Template', () => {
         it('should render the responsive entries', () => {
           const wrapper = shallowMount(HeaderOpen, {
             global: {
-              plugins: [i18n, router]
+              plugins: [i18n]
             },
             props: {
               menuIsClosed: false,
@@ -56,7 +56,7 @@ describe('Template', () => {
       it('should render all the commons entries', () => {
         const wrapper = shallowMount(HeaderOpen, {
           global: {
-            plugins: [i18n, router]
+            plugins: [i18n]
           },
           props: {
             menuIsClosed: false,

src/tests/unit/components/share-pictures/Card.spec.js

@@ -1,7 +1,9 @@
-import { test, describe, expect } from 'vitest'
+import { vi, test, describe, expect } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
 import Card from '../../../../components/share-pictures/Card.vue'
 import i18n from '../../config'
+import * as img from '../../../../utils/image'
+
 describe('Template', () => {
   describe('Props', () => {
     test('should have default props', () => {
@@ -16,6 +18,10 @@ describe('Template', () => {
       expect(wrapper.vm.imgAlt).toBe(null)
     })
     test('should have all the props filled', () => {
+      const imgSrc = 'my-imgSrc.jpg'
+      const imgPath = vi.spyOn(img, 'img')
+      imgPath.mockReturnValue(imgSrc)
+
       const wrapper = shallowMount(Card, {
         global: {
           plugins: [i18n]
@@ -23,13 +29,14 @@ describe('Template', () => {
         props: {
           title: 'my title',
           description: 'my description',
-          imgSrc: 'my-imgSrc.jpg',
+          imgSrc: imgSrc,
           imgAlt: 'my imgAlt'
         }
       })
+
       expect(wrapper.html()).contains('my title</h2>')
       expect(wrapper.html()).contains('my description</p>')
-      expect(wrapper.html()).contains('/my-imgSrc.jpg')
+      expect(wrapper.html()).contains(imgSrc)
       expect(wrapper.html()).contains('alt="my imgAlt"')
     })
   })