test(DsfrHeader): ✅ use storybook play

and remove cypress tests

Author: laruiss

src/components/DsfrHeader/DsfrHeader.e2e.ts

@@ -1,9 +1,12 @@
-import { fn } from '@storybook/test'
+import { fn, expect, within } from '@storybook/test'
 
 import DsfrHeader from './DsfrHeader.vue'
 import DsfrNavigation from '../DsfrNavigation/DsfrNavigation.vue'
 import type { DsfrLanguageSelectorElement } from '../DsfrLanguageSelector/DsfrLanguageSelector.types'
 
+const delay = (timeout = 100) =>
+  new Promise((resolve) => setTimeout(resolve, timeout))
+
 /**
  * [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en-tete)
  */
@@ -180,6 +183,23 @@ EnTeteSimple.args = {
     },
   ],
 }
+EnTeteSimple.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const links = canvas.getAllByRole('link')
+  expect(links).toHaveLength(4)
+
+  const knownLinks = [
+    { name: '', href: EnTeteSimple.args.homeTo },
+    ...EnTeteSimple.args.quickLinks.map(({ to }) => ({ href: to })),
+  ]
+
+  let i = 0
+
+  for (const link of links) {
+    expect(link).toHaveAttribute('href', knownLinks.at(i)?.href)
+    i++
+  }
+}
 
 export const EnTeteAvecLogoOperateur = (args) => ({
   components: {
@@ -371,23 +391,23 @@ EnTeteAvecNavigation.args = {
           title: 'Nom de catégorie',
           links: [
             {
-              text: 'Lien 1',
+              text: 'Lien megamenu 1.1',
               to: '#',
             },
             {
-              text: 'Lien 2',
+              text: 'Lien megamenu 1.2',
               to: '#',
             },
             {
-              text: 'Lien 3',
+              text: 'Lien megamenu 1.3',
               to: '#',
             },
             {
-              text: 'Lien 4',
+              text: 'Lien megamenu 1.4',
               to: '#',
             },
             {
-              text: 'Lien 5',
+              text: 'Lien megamenu 1.5',
               to: '#',
             },
           ],
@@ -396,23 +416,23 @@ EnTeteAvecNavigation.args = {
           title: 'Nom de catégorie',
           links: [
             {
-              text: 'Lien 1',
+              text: 'Lien megamenu 2.1',
               to: '#',
             },
             {
-              text: 'Lien 2',
+              text: 'Lien megamenu 2.2',
               to: '#',
             },
             {
-              text: 'Lien 3',
+              text: 'Lien megamenu 2.3',
               to: '#',
             },
             {
-              text: 'Lien 4',
+              text: 'Lien megamenu 2.4',
               to: '#',
             },
             {
-              text: 'Lien 5',
+              text: 'Lien megamenu 2.5',
               to: '#',
             },
           ],
@@ -421,23 +441,23 @@ EnTeteAvecNavigation.args = {
           title: 'Nom de catégorie',
           links: [
             {
-              text: 'Lien 1',
+              text: 'Lien megamenu 3.1',
               to: '#',
             },
             {
-              text: 'Lien 2',
+              text: 'Lien megamenu 3.2',
               to: '#',
             },
             {
-              text: 'Lien 3',
+              text: 'Lien megamenu 3.3',
               to: '#',
             },
             {
-              text: 'Lien 4',
+              text: 'Lien megamenu 3.4',
               to: '#',
             },
             {
-              text: 'Lien 5',
+              text: 'Lien megamenu 3.5',
               to: '#',
             },
           ],
@@ -446,6 +466,30 @@ EnTeteAvecNavigation.args = {
     },
   ],
 }
+EnTeteAvecNavigation.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const menuTitle = canvas.getByText(EnTeteAvecNavigation.args.navItems.at(1)?.title as string)
+  const lien1 = menuTitle?.parentElement?.nextElementSibling
+
+  const megaMenuTitle = canvas.getByText(EnTeteAvecNavigation.args.navItems.at(2)?.title as string, { selector: 'button' })
+  const megaMenuLien1 = canvas.getByText(EnTeteAvecNavigation.args.navItems.at(2)?.menus?.at(0)?.links?.at(0)?.text as string)
+
+  expect(lien1).not.toBeVisible()
+  menuTitle.click()
+  await delay(300)
+  expect(lien1).toBeVisible()
+  menuTitle.click()
+  await delay(500)
+  expect(lien1).not.toBeVisible()
+
+  expect(megaMenuLien1).not.toBeVisible()
+  megaMenuTitle.click()
+  await delay(500)
+  expect(megaMenuLien1).toBeVisible()
+  megaMenuTitle.click()
+  await delay(500)
+  expect(megaMenuLien1).not.toBeVisible()
+}
 
 export const EnTeteAvecBadgeBeta = (args) => ({
   components: {