fix: 🐛 ajoute de l'attribut id au composant DsfrNavigationItem depuis le composant DsfrNavigation

Author: yvalentin

demo-app/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { useRoute } from 'vue-router'
 
 import DsfrBreadcrumb from '../src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue'
@@ -64,6 +64,7 @@ const quickLinks: DsfrHeaderProps['quickLinks'] = [
 const route = useRoute()
 const navItems: DsfrNavigationProps['navItems'] = [
   {
+    id: useId(),
     to: { name: 'Home' },
     text: 'Accueil',
   },

src/components/DsfrNavigation/DsfrNavigation.vue

@@ -78,6 +78,7 @@ onUnmounted(() => {
       <slot />
       <DsfrNavigationItem
         v-for="(navItem, idx) of navItems"
+        :id="navItem.id"
         :key="idx"
       >
         <DsfrNavigationMenuLink

src/components/DsfrNavigation/DsfrNavigationItem.spec.ts

@@ -1,13 +1,17 @@
 import { render } from '@testing-library/vue'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
+import { useId } from 'vue-demi'
 
 import DsfrNavigationItem from './DsfrNavigationItem.vue'
 
 describe('DsfrNavigationItem', () => {
   it('should render a navigation item', () => {
     const content = 'Contenu d’un item de menu de navigation'
-
+    const id = useId()
     const { getByText } = render(DsfrNavigationItem, {
+      props: {
+        id,
+      },
       slots: {
         default: content,
       },
@@ -18,5 +22,6 @@ describe('DsfrNavigationItem', () => {
     expect(liEl).toHaveClass('fr-nav__item')
     expect(liEl).not.toHaveClass('fr-nav__item--active')
     expect(liEl).toHaveAttribute('id')
+    expect(liEl.id).toBe(id)
   })
 })