test: ✅ Ajoute des tests unitaires pour DsfrNavigation

Author: laruiss

src/components/DsfrNavigation/DsfrNavigationMegaMenu.js

@@ -0,0 +1,129 @@
+import { render } from '@testing-library/vue'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
+
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
+const router = createRouter({
+  history: createWebHistory('/'),
+  routes: [{
+    path: '/',
+    name: 'Home',
+    component: { template: '<div />' },
+  }],
+})
+
+describe('DsfrNavigationMegaMenu', () => {
+  it('should render a navigation mega menu', async () => {
+    const title = 'Titre du mega menu'
+    const description = 'Description du mega menu'
+    const link = {
+      to: '/',
+      text: 'Voir toute la rubrique',
+    }
+    const menus = [
+      {
+        title: 'Nom de catégorie',
+        links: [
+          {
+            text: 'Lien 1',
+            to: '/',
+          },
+          {
+            text: 'Lien 2',
+            to: '/',
+          },
+          {
+            text: 'Lien 3',
+            to: '/',
+          },
+          {
+            text: 'Lien 4',
+            to: '/',
+          },
+          {
+            text: 'Lien 5',
+            to: '/',
+          },
+        ],
+      },
+      {
+        title: 'Nom de catégorie',
+        links: [
+          {
+            text: 'Lien 1',
+            to: '/',
+          },
+          {
+            text: 'Lien 2',
+            to: '/',
+          },
+          {
+            text: 'Lien 3',
+            to: '/',
+          },
+          {
+            text: 'Lien 4',
+            to: '/',
+          },
+          {
+            text: 'Lien 5',
+            to: '/',
+          },
+        ],
+      },
+      {
+        title: 'Nom de catégorie',
+        links: [
+          {
+            text: 'Lien 1',
+            to: '/',
+          },
+          {
+            text: 'Lien 2',
+            to: '/',
+          },
+          {
+            text: 'Lien 3',
+            to: '/',
+          },
+          {
+            text: 'Lien 4',
+            to: '/',
+          },
+          {
+            text: 'Lien 5',
+            to: '/',
+          },
+        ],
+      },
+    ]
+
+    const { getByTestId, getByText, getAllByText } = render(DsfrNavigationMegaMenu, {
+      global: {
+        plugins: [router],
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        title,
+        link,
+        description,
+        menus,
+      },
+    })
+
+    await router.isReady()
+
+    const [button, titleEl] = getAllByText(title)
+    const descEl = getByText(description)
+    const megaMenuWrapper = getByTestId('mega-menu-wrapper')
+
+    expect(button.tagName).toBe('BUTTON')
+    expect(titleEl.tagName).toBe('H4')
+    expect(megaMenuWrapper.id).toBe(button.getAttribute('aria-controls'))
+    expect(descEl).toHaveClass('fr-text--sm')
+  })
+})

src/components/DsfrNavigation/DsfrNavigationMegaMenu.spec.js

@@ -58,6 +58,7 @@ export default {
   </button>
   <div
     :id="id"
+    data-testid="mega-menu-wrapper"
     class="fr-collapse fr-mega-menu"
     tabindex="-1"
     :class="{ 'fr-collapse--expanded': expanded }"

src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/vue'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import DsfrNavigationMenu from './DsfrNavigationMenu.vue'
+
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
+const router = createRouter({
+  history: createWebHistory('/'),
+  routes: [{
+    path: '/',
+    name: 'Home',
+    component: { template: '<div />' },
+  }],
+})
+
+describe('DsfrNavigationMenu', () => {
+  it('should render a navigation mega menu', async () => {
+    const title = 'Titre du menu'
+    const links = [
+      {
+        text: 'Lien 1',
+        to: '/',
+      },
+      {
+        text: 'Lien 2',
+        to: '/',
+      },
+      {
+        text: 'Lien 3',
+        to: '/',
+      },
+      {
+        text: 'Lien 4',
+        to: '/',
+      },
+      {
+        text: 'Lien 5',
+        to: '/',
+      },
+    ]
+
+    const { getByText, getByTestId, getAllByTestId } = render(DsfrNavigationMenu, {
+      global: {
+        plugins: [router],
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        title,
+        links,
+      },
+    })
+
+    await router.isReady()
+
+    const button = getByText(title).parentElement
+    const menuWrapper = getByTestId('navigation-menu')
+    const linkEls = getAllByTestId('nav-router-link')
+
+    expect(menuWrapper.id).toBe(button.getAttribute('aria-controls'))
+    expect(linkEls).toHaveLength(links.length)
+  })
+})

src/components/DsfrNavigation/DsfrNavigationMenu.spec.js

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/vue'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
+
+const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+
+const router = createRouter({
+  history: createWebHistory('/'),
+  routes: [{
+    path: '/',
+    name: 'Home',
+    component: { template: '<div />' },
+  }],
+})
+
+describe('DsfrNavigationMenuLink', () => {
+  it('should render a navigation menu link (internal)', async () => {
+    const to = '/'
+    const text = 'Texte du lien'
+
+    const { getByTestId } = render(DsfrNavigationMenuLink, {
+      global: {
+        plugins: [router],
+        components: {
+          VIcon,
+        },
+      },
+      props: {
+        to,
+        text,
+      },
+    })
+
+    await router.isReady()
+
+    const link = getByTestId('nav-router-link')
+    expect(link.innerHTML).toBe(text)
+    expect(link).toHaveAttribute('href', to)
+  })
+})

src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.js

@@ -33,6 +33,7 @@ export default {
   <a
     v-if="isExternal"
     class="fr-nav__link"
+    data-testid="nav-external-link"
     :href="to"
     @click="$emit('toggle-id', id)"
   >
@@ -41,6 +42,7 @@ export default {
   <router-link
     v-else
     class="fr-nav__link"
+    data-testid="nav-router-link"
     :to="to"
     @click="$emit('toggle-id', id)"
   >