Skip to content

Commit 508d1aa

Browse files
laruisslaruiss
committed
test(DsfrAlert): ✅ use storybook play function
and remove cypress tests
1 parent cd0aea5 commit 508d1aa

File tree

5 files changed

+114
-150
lines changed

5 files changed

+114
-150
lines changed

‎src/components/DsfrAlert/DsfrAlert.e2e.ts‎

Lines changed: 0 additions & 94 deletions
This file was deleted.

‎src/components/DsfrAlert/DsfrAlert.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ describe('DsfrAlert', () => {
2929
// Then
3030
expect(titleEl.tagName).toBe('H3')
3131
expect(titleEl).toHaveClass('fr-alert__title')
32-
expect(descritptionEl.tagName).toBe('P')
33-
expect(descritptionEl).toHaveClass('fr-alert__description')
32+
expect(descritptionEl.tagName).toBe('DIV')
33+
expect(descritptionEl).toHaveClass('fr-alert')
3434
})
3535

3636
it('should mount DsfrAlert with right content with description in slot', () => {
@@ -60,8 +60,8 @@ describe('DsfrAlert', () => {
6060
// Then
6161
expect(titleEl.tagName).toBe('H3')
6262
expect(titleEl).toHaveClass('fr-alert__title')
63-
expect(descritptionEl.tagName).toBe('P')
64-
expect(descritptionEl).toHaveClass('fr-alert__description')
63+
expect(descritptionEl.tagName).toBe('DIV')
64+
expect(descritptionEl).toHaveClass('fr-alert')
6565
})
6666

6767
it('should mount DsfrAlert with a working close button', async () => {

‎src/components/DsfrAlert/DsfrAlert.stories.ts‎

Lines changed: 85 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
import { expect, within } from '@storybook/test'
2+
13
import DsfrAlert from './DsfrAlert.vue'
24

5+
const delay = (timeout = 100) =>
6+
new Promise((resolve) => setTimeout(resolve, timeout))
7+
38
/**
49
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte)
510
*/
@@ -93,6 +98,17 @@ Alerte.args = {
9398
closeable: true,
9499
titleTag: undefined,
95100
}
101+
Alerte.play = async ({ canvasElement }) => {
102+
const canvas = within(canvasElement)
103+
const alert = canvas.getByText(Alerte.args.title)
104+
expect(alert).toBeVisible()
105+
expect(alert).toContainHTML(Alerte.args.title)
106+
expect(alert.parentElement).toContainHTML(Alerte.args.description)
107+
const closeButton = alert.parentElement?.querySelector('button') as HTMLButtonElement
108+
closeButton?.click()
109+
await delay(500)
110+
expect(alert).not.toBeVisible()
111+
}
96112

97113
export const Alertes = (args) => ({
98114
components: { DsfrAlert },
@@ -103,17 +119,17 @@ export const Alertes = (args) => ({
103119
},
104120
template: `
105121
<div style="margin: 1rem 0;">
106-
<DsfrAlert
107-
type="info"
108-
title="Titre de l'info"
109-
description="Description de l'info"
110-
/>
122+
<DsfrAlert
123+
type="info"
124+
title="Titre de l’info"
125+
description="Description de l’info"
126+
/>
111127
</div>
112128
<div style="margin: 1rem 0;">
113129
<DsfrAlert
114130
type="warning"
115-
title="Titre de l'avertissement"
116-
description="Description de l'avertissement"
131+
title="Titre de l’avertissement"
132+
description="Description de l’avertissement"
117133
/>
118134
</div>
119135
<div style="margin: 1rem 0;">
@@ -126,8 +142,8 @@ export const Alertes = (args) => ({
126142
<div style="margin: 1rem 0;">
127143
<DsfrAlert
128144
type="error"
129-
title="Titre de l'erreur"
130-
description="Description de l'erreur"
145+
title="Titre de l’erreur"
146+
description="Description de l’erreur"
131147
/>
132148
</div>
133149
`,
@@ -145,14 +161,14 @@ export const PetitesAlertes = (args) => ({
145161
<div style="margin: 1rem 0;">
146162
<DsfrAlert
147163
type="info"
148-
description="Description de l'info"
164+
description="Description de l’info"
149165
small="small"
150166
/>
151167
</div>
152168
<div style="margin: 1rem 0;">
153169
<DsfrAlert
154170
type="warning"
155-
description="Description de l'avertissement"
171+
description="Description de l’avertissement"
156172
small="small"
157173
/>
158174
</div>
@@ -166,7 +182,7 @@ export const PetitesAlertes = (args) => ({
166182
<div style="margin: 1rem 0;">
167183
<DsfrAlert
168184
type="error"
169-
description="Description de l'erreur"
185+
description="Description de l’erreur"
170186
small="small"
171187
/>
172188
</div>
@@ -186,8 +202,8 @@ export const AlertesFermables = (args) => ({
186202
<div style="margin: 1rem 0;">
187203
<DsfrAlert
188204
type="info"
189-
title="Titre de l'info"
190-
description="Description de l'info"
205+
title="Titre de l’info"
206+
description="Description de l’info"
191207
:closed="closed[0]"
192208
:closeable="closeable"
193209
@close="close(0)"
@@ -196,7 +212,7 @@ export const AlertesFermables = (args) => ({
196212
<div style="margin: 1rem 0;">
197213
<DsfrAlert
198214
type="info"
199-
description="Description de l'info"
215+
description="Description de l’info"
200216
:closed="closed[1]"
201217
:closeable="closeable"
202218
:small="small"
@@ -207,8 +223,8 @@ export const AlertesFermables = (args) => ({
207223
<div style="margin: 1rem 0;">
208224
<DsfrAlert
209225
type="warning"
210-
title="Titre de l'avertissement"
211-
description="Description de l'avertissement"
226+
title="Titre de l’avertissement"
227+
description="Description de l’avertissement"
212228
:closed="closed[4]"
213229
:closeable="closeable"
214230
@close="close(4)"
@@ -217,7 +233,7 @@ export const AlertesFermables = (args) => ({
217233
<div style="margin: 1rem 0;">
218234
<DsfrAlert
219235
type="warning"
220-
description="Description de l'avertissement"
236+
description="Description de l’avertissement"
221237
:closed="closed[5]"
222238
:closeable="closeable"
223239
:small="small"
@@ -248,8 +264,8 @@ export const AlertesFermables = (args) => ({
248264
<div style="margin: 1rem 0;">
249265
<DsfrAlert
250266
type="error"
251-
title="Titre de l'erreur"
252-
description="Description de l'erreur"
267+
title="Titre de l’erreur"
268+
description="Description de l’erreur"
253269
:closed="closed[4]"
254270
:closeable="closeable"
255271
@close="close(4)"
@@ -258,7 +274,7 @@ export const AlertesFermables = (args) => ({
258274
<div style="margin: 1rem 0;">
259275
<DsfrAlert
260276
type="error"
261-
description="Description de l'erreur"
277+
description="Description de l’erreur"
262278
:closed="closed[5]"
263279
:closeable="closeable"
264280
:small="small"
@@ -283,6 +299,15 @@ AlertesFermables.args = {
283299
closeable: true,
284300
small: true,
285301
}
302+
AlertesFermables.play = async ({ canvasElement }) => {
303+
const canvas = within(canvasElement)
304+
const alert = canvas.getByText('Titre de l’info')
305+
expect(alert).toBeVisible()
306+
const closeButton = alert.parentElement?.querySelector('button') as HTMLButtonElement
307+
closeButton.click()
308+
await delay(500)
309+
expect(alert).not.toBeVisible()
310+
}
286311

287312
export const AlertesSlot = (args) => ({
288313
components: { DsfrAlert },
@@ -295,13 +320,50 @@ export const AlertesSlot = (args) => ({
295320
<div style="margin: 1rem 0;">
296321
<DsfrAlert
297322
type="info"
298-
title="Titre de l'info"
323+
title="Titre de l’info"
299324
>
300-
Description de l'info
325+
Description de l’info
301326
<br/>
302327
Saut de ligne
303328
</DsfrAlert>
304329
</div>
305330
`,
306331
})
307332
AlertesSlot.args = {}
333+
AlertesSlot.play = async ({ canvasElement }) => {
334+
const canvas = within(canvasElement)
335+
const alert = canvas.getByText('Titre de l’info')
336+
expect(alert.parentElement).toContainHTML('Description de l’info')
337+
expect(alert.parentElement).toContainHTML('<br />')
338+
expect(alert.parentElement).toContainHTML('Saut de ligne')
339+
}
340+
341+
export const AlertesAvecRoleAlert = (args) => ({
342+
components: { DsfrAlert },
343+
data () {
344+
return {
345+
...args,
346+
}
347+
},
348+
template: `
349+
<div style="margin: 1rem 0;">
350+
<DsfrAlert
351+
alert
352+
type="info"
353+
title="Titre de l’avertissement"
354+
>
355+
Description de l’avertissement
356+
<br/>
357+
Saut de ligne
358+
</DsfrAlert>
359+
</div>
360+
`,
361+
})
362+
AlertesAvecRoleAlert.args = {}
363+
AlertesAvecRoleAlert.play = async ({ canvasElement }) => {
364+
const canvas = within(canvasElement)
365+
const alert = canvas.getByRole('alert')
366+
expect(alert).toBeVisible()
367+
expect(alert.firstChild).toContainHTML('Titre de l’avertissement')
368+
expect(alert).toContainHTML('Description de l’avertissement')
369+
}

‎src/components/DsfrAlert/DsfrAlert.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { TitleTag } from '@/common-types'
33
export type DsfrAlertType = 'error' | 'success' | 'warning' | 'info'
44

55
export type DsfrAlertProps = {
6+
alert?: boolean
67
closed?: boolean
78
closeable?: boolean
89
id?: string

0 commit comments

Comments
 (0)