chore: 🏷️ improve types

frontend/cypress.config.js

@@ -1,7 +1,7 @@
 const { defineConfig } = require('cypress')
 
-const frontendHost = process.env.FRONTEND_HOST
-const frontendPort = process.env.FRONTEND_PORT
+const frontendHost = process.env.FRONTEND_HOST || 'localhost'
+const frontendPort = process.env.FRONTEND_PORT || '5173'
 
 module.exports = defineConfig({
   e2e: {

frontend/index.html

@@ -19,4 +19,4 @@
     <div id="app"></div>
   </body>
 </html>
-<script type="module" src="./src/main.js"></script>
+<script type="module" src="./src/main.ts"></script>

frontend/package.json

@@ -7,7 +7,8 @@
     "build": "vite build",
     "compose:up": "docker compose -f ../docker-compose.yml --profile backend-only up -d",
     "dev": "vite",
-    "start": "API_HOST=localhost vite",
+    "dev:e2e": "FRONTEND_HOST=localhost FRONTEND_PORT=5173 cypress open --e2e --browser firefox",
+    "start": "API_HOST=http://localhost:5000 vite",
     "lint": "eslint . --ignore-path ../.gitignore",
     "format": "eslint . --fix --ignore-path ../.gitignore",
     "format:css": "stylelint --fix src/**/*.{css,vue}",
@@ -32,6 +33,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.5.1",
     "@testing-library/cypress": "^10.0.1",
+    "@types/jsdom": "^21.1.4",
     "@types/node": "^20.8.4",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "@unocss/transformer-directives": "^0.55.7",
@@ -65,6 +67,6 @@
     "not dead"
   ],
   "volta": {
-    "node": "18.16.1"
+    "node": "20.8.1"
   }
 }

frontend/src/components/AskingExpert.vue

@@ -27,23 +27,22 @@ function onClose () {
 }
 
 async function sendTutorialFeedback () {
-  const json = {
+  const feedback = {
     image_url: imgUrl.value,
     tutorial_feedback: stepsStore.tutorialFeedback,
     label: typology.value,
-    tutorial_option: stepsStore.selectedOptionStep || null,
+    tutorial_option: stepsStore.currentOptionStep[stepsStore.currentStep] || null,
     route_name: route.name,
     confidence: confidence.value,
     confidence_level: confidenceLevel.value,
   }
-  await axios.post('/tutorial-feedback', json)
+  await axios.post('/tutorial-feedback', feedback)
     .then(async res => {
-      console.log(res)
-      stepsStore.tutorialFeedback = json.tutorial_feedback
+      stepsStore.tutorialFeedback = feedback.tutorial_feedback
       setMessage({ type: 'success', message: 'Votre message a été pris en compte' })
     })
     .catch(async (err) => {
-      console.log(err)
+      import.meta.env.DEV && console.log(err)
       setMessage({ type: 'error', message: 'Une erreur a eu lieu en enregistrant de votre message.' })
     })
     .finally(() => setTimeout(() => {

frontend/src/components/HeaderMain.vue

@@ -2,19 +2,21 @@
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
+import type { DsfrHeader } from '@gouvminint/vue-dsfr'
+
 const route = useRoute()
 
-const wholeLogo = computed<boolean>(() => route.meta.wholeLogo as boolean)
+const wholeLogo = computed(() => route.meta.wholeLogo as boolean)
 
 const isMobile = window.innerWidth <= 640
 
-const logoText = computed(() => (!isMobile || wholeLogo.value)
+const logoText = computed<InstanceType<typeof DsfrHeader>['$props']['logoText']>(() => (!isMobile || wholeLogo.value)
   ? ['Ministère',
       'de l’intérieur',
       'et des Outre-Mer']
   : [])
 
-const quickLinks = [
+const quickLinks: InstanceType<typeof DsfrHeader>['$props']['quickLinks'] = [
   {
     label: 'Important',
     to: '/',

frontend/src/components/OnboardingSwiper.vue

@@ -1,6 +1,3 @@
-<script setup>
-</script>
-
 <template>
   <swiper-container
     :navigation="true"
@@ -60,6 +57,7 @@
     </swiper-slide>
   </swiper-container>
 </template>
+
 <style scoped>
 .swiper-container {
   width: 100%;
@@ -130,5 +128,4 @@ swiper-container::part(bullet-active) {
   font-weight: bold;
   color: #00c7c8;
 }
-
 </style>

frontend/src/components/ResultPage.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 import { ref, computed, watchEffect } from 'vue'
 import axios from 'axios'
 import SnackbarAlert from '@/components/SnackbarAlert.vue'
@@ -28,34 +28,41 @@ const typology = computed(() => resultStore.typology)
 const isDummy = computed(() => stepsStore.isDummy)
 const isDummyTypology = computed(() => resultTree[typology.value]?.isDummyTypology === true)
 
-const isUp = ref(undefined)
-const isDown = ref(undefined)
-const isFeedbackDone = ref(undefined)
+const isUp = ref(false)
+const isDown = ref(false)
+const isFeedbackDone = ref(false)
 
 const securingTutorial = computed(() => resultStore.securingTutorial)
 
 const label = computed(() => resultTree[typology.value]?.displayLabel)
 
 const category = computed(() => resultTree[typology.value]?.category)
-const categoryWithoutSecuring = computed(() => resultTree[typology.value]?.categoryWithoutSecuring)
+const categoryWithoutSecuring = computed(
+  () => typology.value === 'revolver'
+    ? resultTree[typology.value]?.categoryWithoutSecuring
+    : undefined,
+)
 
 const mention = computed(() => isDummy.value === true
   ? mentionIfisDummy.value
-  : (securingTutorial.value === true
-      ? resultTree[typology.value]?.mention
-      : resultTree[typology.value]?.mentionWithoutSecuring))
+  : securingTutorial.value === true
+    ? resultTree[typology.value]?.mention
+    : typology.value === 'revolver'
+      ? resultTree[typology.value]?.mentionWithoutSecuring
+      : undefined,
+
+)
 
 const mentionIfisDummy = ref("Libre d'acquisition et de détention")
 
-function sendFeedback (isCorrect) {
+function sendFeedback (isCorrect: boolean) {
   const json = {
     image_url: imgUrl.value,
     feedback: isCorrect,
     confidence: confidence.value,
     label: typology.value,
     confidence_level: confidenceLevel.value,
   }
-  isFeedbackDone.value = true
   if (isCorrect) {
     isUp.value = true
   } else {
@@ -70,8 +77,12 @@ function sendFeedback (isCorrect) {
       console.log(err)
       setMessage({ type: 'error', message: 'Une erreur a eu lieu en enregistrant votre vote.' })
     })
+    .finally(() => {
+      isFeedbackDone.value = true
+    })
 }
 </script>
+
 <template>
   <div class="result-frame -mx-8 py-5 px-8">
     <div class="result">
@@ -132,7 +143,10 @@ function sendFeedback (isCorrect) {
                 </p>
               </div>
               <div v-if="isDummy === false && (route.name !== 'IdentificationTypologyResult'|| isDummyTypology !== true)">
-                <p data-testid="arm-category" class="category fr-callout__title mt-3">
+                <p
+                  data-testid="arm-category"
+                  class="category fr-callout__title mt-3"
+                >
                   <img
                     class="px-2"
                     src="@/assets/guide-identification/icones/gun.jpg"
@@ -148,7 +162,10 @@ function sendFeedback (isCorrect) {
                 </div>
               </div>
               <div v-if="isDummy === true">
-                <p data-testid="arm-category" class="category fr-callout__title mt-3">
+                <p
+                  data-testid="arm-category"
+                  class="category fr-callout__title mt-3"
+                >
                   <img
                     class="px-2"
                     src="@/assets/guide-identification/icones/gun.jpg"

frontend/src/components/StepsGuide.vue

@@ -1,15 +1,12 @@
 <script lang="ts" setup>
 import { DsfrStepper } from '@gouvminint/vue-dsfr'
 
-defineProps({
-  currentStep: {
-    type: Number,
-    default: 1,
-  },
-  steps: {
-    type: Array,
-    default: () => [],
-  },
+withDefaults(defineProps<{
+  currentStep: number,
+  steps: string[],
+}>(), {
+  currentStep: 1,
+  steps: () => [],
 })
 </script>