test(DsfrButton): ✅ use storybook play function

and remove cypress tests

Author: laruiss

src/components/DsfrButton/DsfrButton.e2e.ts

@@ -1,6 +1,6 @@
-import VIcon from '../VIcon/VIcon.vue'
-import { fn } from '@storybook/test'
+import { expect, fn, within } from '@storybook/test'
 
+import VIcon from '../VIcon/VIcon.vue'
 import DsfrButton from './DsfrButton.vue'
 
 /**
@@ -54,6 +54,10 @@ export const BoutonPrimaire = (args) => ({
   data () {
     return {
       ...args,
+      onClickWrapper () {
+        this.theClick()
+        this.onClick()
+      },
     }
   },
   template: `
@@ -67,7 +71,7 @@ export const BoutonPrimaire = (args) => ({
       :no-outline="noOutline"
       :icon-only="iconOnly"
       :icon-right="iconRight"
-      @click="onClick"
+      @click="onClickWrapper()"
     />
   `,
 })
@@ -81,6 +85,15 @@ BoutonPrimaire.args = {
   iconRight: false,
   noOutline: false,
   size: undefined,
+  theClick: fn(),
+}
+
+BoutonPrimaire.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const button = canvas.getByRole('button')
+  expect(BoutonPrimaire.args.theClick).not.toHaveBeenCalled()
+  button.click()
+  expect(BoutonPrimaire.args.theClick).toHaveBeenCalledOnce()
 }
 
 export const BoutonPrimaireAvecIcone = (args) => ({
@@ -110,6 +123,11 @@ BoutonPrimaireAvecIcone.args = {
   noOutline: false,
   size: undefined,
 }
+BoutonPrimaireAvecIcone.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const button = canvas.getByRole('button')
+  expect(button.firstElementChild?.nextElementSibling).toContainHTML('<svg')
+}
 
 export const BoutonPrimaireAvecIconeAnimee = (args) => ({
   components: { DsfrButton },
@@ -164,6 +182,11 @@ BoutonSecondaire.args = {
   noOutline: false,
   size: undefined,
 }
+BoutonSecondaire.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const button = canvas.getByRole('button')
+  expect(button).toHaveClass('fr-btn--secondary')
+}
 
 export const BoutonTertiaire = (args) => ({
   components: { DsfrButton },
@@ -190,6 +213,11 @@ BoutonTertiaire.args = {
   noOutline: false,
   size: undefined,
 }
+BoutonTertiaire.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const button = canvas.getByRole('button')
+  expect(button).toHaveClass('fr-btn--tertiary')
+}
 
 export const BoutonTertiaireSansBordure = (args) => ({
   components: { DsfrButton },
@@ -216,6 +244,11 @@ BoutonTertiaireSansBordure.args = {
   noOutline: true,
   size: undefined,
 }
+BoutonTertiaireSansBordure.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const button = canvas.getByRole('button')
+  expect(button).toHaveClass('fr-btn--tertiary-no-outline')
+}
 
 export const SuiteDeBoutons = (args) => ({
   components: {
@@ -269,3 +302,12 @@ SuiteDeBoutons.args = {
     },
   ],
 }
+
+SuiteDeBoutons.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const buttons = canvas.getAllByRole('button')
+  expect(buttons).toHaveLength(4)
+  for (const button of buttons) {
+    expect(button).toBeVisible()
+  }
+}

src/components/DsfrButton/DsfrButton.stories.ts

@@ -1,4 +1,4 @@
-import { fn } from '@storybook/test'
+import { expect, fn, within } from '@storybook/test'
 
 import VIcon from '../VIcon/VIcon.vue'
 import DsfrButtonGroup from './DsfrButtonGroup.vue'
@@ -107,3 +107,11 @@ GroupeDeBoutons.args = {
     },
   ],
 }
+GroupeDeBoutons.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  const buttons = canvas.getAllByRole('button')
+  expect(buttons).toHaveLength(4)
+  for (const button of buttons) {
+    expect(button).toBeVisible()
+  }
+}