Skip to content

Commit 02003b3

Browse files
laruisslaruiss
committed
test(DsfrRadioButton|DsfrRadioButtonSet): ✅ use storybook play
and remove cypress tests
1 parent 0c93083 commit 02003b3

File tree

8 files changed

+104
-60
lines changed

8 files changed

+104
-60
lines changed

‎src/components/DsfrCallout/DsfrCallout.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ Ce composant ne déclenche pas d'événements personnalisés.
3030

3131
- `default` : Contenu additionnel à afficher à l'intérieur de l'encadré. Ce slot est intégré dans la structure principale du composant et s'affiche sous le texte principal.
3232

33-
3433
::: code-group
3534

3635
<Story data-title="Démo" min-h="200px">

‎src/components/DsfrRadioButton/DsfrRadioButton.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Le composant `DsfrRadioButton` est composé des éléments suivants :
4242
| `small` | *`boolean`* | Affiche le bouton radio en taille réduite | `false` | |
4343
| `disabled` | *`boolean`* | Indique si le bouton radio est désactivé. | `false` | |
4444
| `img` | *`string`* | Source de l'image à afficher. | `undefined` | |
45+
| `imgTitle` | *`string`* | Titre de l'image à ajouter en attribut `title` a `img` ou à ajouter en élément `title` dans la balise `svg`. | `undefined` | |
4546
| `svgPath` | *`string`* | Chemin vers le SVG à afficher. | `undefined` | |
4647
| `svgAttrs` | *`Record<string, unknown>`* | Chemin vers le SVG à afficher. | `{ viewBox: '0 0 80 80', width: '80px', height: '80px' }` | Attributs pour le SVG. |
4748

‎src/components/DsfrRadioButton/DsfrRadioButton.stories.ts‎

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fn } from '@storybook/test'
1+
import { fn, within, expect } from '@storybook/test'
22

33
import DsfrRadioButton from './DsfrRadioButton.vue'
44
import DsfrRadioButtonSet from './DsfrRadioButtonSet.vue'
@@ -39,6 +39,10 @@ export default {
3939
control: 'text',
4040
description: 'Permet d\'ajouter une image au composant',
4141
},
42+
imgTitle: {
43+
control: 'text',
44+
description: 'Permet d\'ajouter un titre à l’image (attribut `title` de `<img>`) ou en balise `<title>` à l’intérieur de la balise `<svg>` du SVG',
45+
},
4246
svgPath: {
4347
control: 'text',
4448
description:
@@ -55,7 +59,7 @@ export default {
5559
},
5660
}
5761

58-
export const RadioButton = (args) => ({
62+
export const BoutonRadio = (args) => ({
5963
components: { DsfrRadioButton },
6064
data () {
6165
return args
@@ -90,7 +94,7 @@ export const RadioButton = (args) => ({
9094
},
9195
},
9296
})
93-
RadioButton.args = {
97+
BoutonRadio.args = {
9498
modelValue: '3',
9599
small: false,
96100
options: [
@@ -114,8 +118,23 @@ RadioButton.args = {
114118
},
115119
],
116120
}
121+
BoutonRadio.play = async ({ canvasElement }) => {
122+
const canvas = within(canvasElement)
123+
const firstInputLabel = canvas.getByText(BoutonRadio.args.options.at(0)!.label)
124+
const initialCheckedInputLabel = canvas.getByText(BoutonRadio.args.options.at(2)!.label)
125+
expect(initialCheckedInputLabel).toHaveClass('fr-label')
126+
expect(firstInputLabel).toHaveClass('fr-label')
127+
const firstInput = canvas.getAllByRole('radio').at(0) as HTMLInputElement
128+
const initialCheckedInput = canvas.getAllByRole('radio').at(2) as HTMLInputElement
129+
expect(initialCheckedInput.parentElement).toHaveClass('fr-radio-group')
130+
expect(firstInput).not.toBeChecked()
131+
expect(initialCheckedInput).toBeChecked()
132+
firstInputLabel.click()
133+
expect(firstInput).toBeChecked()
134+
expect(initialCheckedInput).not.toBeChecked()
135+
}
117136

118-
export const RichRadioButton = (args) => ({
137+
export const BoutonRadioRiche = (args) => ({
119138
components: { DsfrRadioButton, DsfrRadioButtonSet },
120139
data () {
121140
return args
@@ -141,7 +160,7 @@ export const RichRadioButton = (args) => ({
141160
},
142161
},
143162
})
144-
RichRadioButton.args = {
163+
BoutonRadioRiche.args = {
145164
modelValue: '3',
146165
small: false,
147166
options: [
@@ -151,6 +170,7 @@ RichRadioButton.args = {
151170
hint: 'Description 1',
152171
name: 'Choix',
153172
img: 'https://loremflickr.com/150/200/cat',
173+
imgTitle: 'Un 1er chaton',
154174
},
155175
{
156176
label: 'Valeur 2',
@@ -159,12 +179,34 @@ RichRadioButton.args = {
159179
hint: 'Description 2',
160180
name: 'Choix',
161181
img: 'https://loremflickr.com/200/250/cat',
182+
imgTitle: 'Un 2è chaton',
162183
},
163184
{
164185
label: 'Valeur 3',
165186
value: '3',
166187
name: 'Choix',
167188
img: 'https://loremflickr.com/250/350/cat',
189+
imgTitle: 'Un 3è chaton',
168190
},
169191
],
170192
}
193+
BoutonRadioRiche.play = async ({ canvasElement }) => {
194+
const canvas = within(canvasElement)
195+
const firstInputLabel = canvas.getByText(BoutonRadio.args.options.at(0)!.label)
196+
const initialCheckedInputLabel = canvas.getByText(BoutonRadio.args.options.at(2)!.label)
197+
const firstInput = canvas.getAllByRole('radio').at(0) as HTMLInputElement
198+
const initialCheckedInput = canvas.getAllByRole('radio').at(2) as HTMLInputElement
199+
const firstInputImg = canvas.getByTitle(BoutonRadioRiche.args.options.at(0)!.imgTitle)
200+
const initialCheckedInputImg = canvas.getByTitle(BoutonRadioRiche.args.options.at(2)!.imgTitle)
201+
202+
expect(firstInputImg).toHaveAttribute('src', BoutonRadioRiche.args.options.at(0)!.img)
203+
expect(initialCheckedInputImg).toHaveAttribute('src', BoutonRadioRiche.args.options.at(2)!.img)
204+
expect(initialCheckedInputLabel).toHaveClass('fr-label')
205+
expect(firstInputLabel).toHaveClass('fr-label')
206+
expect(initialCheckedInput.parentElement).toHaveClass('fr-radio-group')
207+
expect(firstInput).not.toBeChecked()
208+
expect(initialCheckedInput).toBeChecked()
209+
firstInputLabel.click()
210+
expect(firstInput).toBeChecked()
211+
expect(initialCheckedInput).not.toBeChecked()
212+
}

‎src/components/DsfrRadioButton/DsfrRadioButton.types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export type DsfrRadioButtonProps = {
99
label?: string
1010
hint?: string
1111
img?: string
12+
imgTitle?: string
1213
svgPath?: string
1314
svgAttrs?: Record<string, unknown>
1415
}

‎src/components/DsfrRadioButton/DsfrRadioButton.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,15 @@ const rich = computed(() => !!props.img || !!props.svgPath)
7777
:src="img"
7878
class="fr-artwork"
7979
alt=""
80+
:title="imgTitle"
8081
>
8182
<svg
8283
v-else
8384
aria-hidden="true"
8485
class="fr-artwork"
8586
v-bind="{ ...defaultSvgAttrs, ...svgAttrs }"
8687
>
88+
<title v-if="imgTitle">{{ imgTitle }}</title>
8789
<use
8890
class="fr-artwork-decorative"
8991
:href="`${svgPath}#artwork-decorative`"

‎src/components/DsfrRadioButton/DsfrRadioButtonSet.e2e.ts‎

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

‎src/components/DsfrRadioButton/DsfrRadioButtonSet.stories.ts‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { fn } from '@storybook/test'
1+
import { fn, within, expect } from '@storybook/test'
22

33
import DsfrRadioButtonSet from './DsfrRadioButtonSet.vue'
44

@@ -97,6 +97,21 @@ GroupeDeBoutonsRadio.args = {
9797
},
9898
],
9999
}
100+
GroupeDeBoutonsRadio.play = async ({ canvasElement }) => {
101+
const canvas = within(canvasElement)
102+
const firstInputLabel = canvas.getByText(GroupeDeBoutonsRadio.args.options.at(0)!.label)
103+
const initialCheckedInputLabel = canvas.getByText(GroupeDeBoutonsRadio.args.options.at(2)!.label)
104+
expect(initialCheckedInputLabel).toHaveClass('fr-label')
105+
expect(firstInputLabel).toHaveClass('fr-label')
106+
const firstInput = canvas.getAllByRole('radio').at(0) as HTMLInputElement
107+
const initialCheckedInput = canvas.getAllByRole('radio').at(2) as HTMLInputElement
108+
expect(initialCheckedInput.parentElement).toHaveClass('fr-radio-group')
109+
expect(firstInput).not.toBeChecked()
110+
expect(initialCheckedInput).toBeChecked()
111+
firstInputLabel.click()
112+
expect(firstInput).toBeChecked()
113+
expect(initialCheckedInput).not.toBeChecked()
114+
}
100115

101116
export const GroupeDeBoutonsRadioRequis = (args) => ({
102117
components: { DsfrRadioButtonSet },
@@ -140,6 +155,11 @@ GroupeDeBoutonsRadioRequis.args = {
140155
},
141156
],
142157
}
158+
GroupeDeBoutonsRadioRequis.play = async ({ canvasElement }) => {
159+
const canvas = within(canvasElement)
160+
const legend = canvas.getByText(GroupeDeBoutonsRadioRequis.args.legend)
161+
expect(legend).toContainHTML('*')
162+
}
143163

144164
export const GroupeDeBoutonsRadioRequisPersonnalise = (args) => ({
145165
components: { DsfrRadioButtonSet },
@@ -187,6 +207,11 @@ GroupeDeBoutonsRadioRequisPersonnalise.args = {
187207
},
188208
],
189209
}
210+
GroupeDeBoutonsRadioRequisPersonnalise.play = async ({ canvasElement }) => {
211+
const canvas = within(canvasElement)
212+
const legend = canvas.getByText(GroupeDeBoutonsRadioRequisPersonnalise.args.legend)
213+
expect(legend).toContainHTML('(obligatoire)')
214+
}
190215

191216
export const GroupeDeBoutonsRadioEnErreur = (args) => ({
192217
components: { DsfrRadioButtonSet },
@@ -231,6 +256,16 @@ GroupeDeBoutonsRadioEnErreur.args = {
231256
},
232257
],
233258
}
259+
GroupeDeBoutonsRadioEnErreur.play = async ({ canvasElement }) => {
260+
const canvas = within(canvasElement)
261+
const radioWrapper = canvas.getByText(GroupeDeBoutonsRadioEnErreur.args.options.at(0)!.label).parentElement
262+
const messageEl = canvas.getByText(GroupeDeBoutonsRadioEnErreur.args.error)
263+
264+
expect(radioWrapper).toHaveClass('fr-radio-group')
265+
expect(radioWrapper?.parentElement?.parentElement).toHaveClass('fr-fieldset--error')
266+
expect(messageEl).toHaveClass('fr-message--info')
267+
expect(messageEl).toHaveClass('fr-error-text')
268+
}
234269

235270
export const GroupeDeBoutonsRadioEnSucces = (args) => ({
236271
components: { DsfrRadioButtonSet },
@@ -275,6 +310,16 @@ GroupeDeBoutonsRadioEnSucces.args = {
275310
},
276311
],
277312
}
313+
GroupeDeBoutonsRadioEnSucces.play = async ({ canvasElement }) => {
314+
const canvas = within(canvasElement)
315+
const radioWrapper = canvas.getByText(GroupeDeBoutonsRadioEnSucces.args.options.at(0)!.label).parentElement
316+
const messageEl = canvas.getByText(GroupeDeBoutonsRadioEnSucces.args.validMessage)
317+
318+
expect(radioWrapper).toHaveClass('fr-radio-group')
319+
expect(radioWrapper?.parentElement?.parentElement).toHaveClass('fr-fieldset--valid')
320+
expect(messageEl).toHaveClass('fr-message--info')
321+
expect(messageEl).toHaveClass('fr-valid-text')
322+
}
278323

279324
export const GroupeDeBoutonsRadioDisabled = (args) => ({
280325
components: { DsfrRadioButtonSet },
@@ -317,6 +362,11 @@ GroupeDeBoutonsRadioDisabled.args = {
317362
},
318363
],
319364
}
365+
GroupeDeBoutonsRadioDisabled.play = async ({ canvasElement }) => {
366+
const canvas = within(canvasElement)
367+
const legend = canvas.getByText(GroupeDeBoutonsRadioRequis.args.legend).parentElement
368+
expect(legend).toHaveAttribute('disabled')
369+
}
320370

321371
export const GroupeDeBoutonsRadioInline = (args) => ({
322372
components: { DsfrRadioButtonSet },
@@ -338,7 +388,7 @@ export const GroupeDeBoutonsRadioInline = (args) => ({
338388
GroupeDeBoutonsRadioInline.args = {
339389
legend: 'Légende des champs en ligne',
340390
selectedValue: 1,
341-
disabled: true,
391+
disabled: false,
342392
inline: true,
343393
options: [
344394
{

‎src/components/DsfrRadioButton/DsfrRadioButtonSet.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const ariaLabelledby = computed(() => message.value ? `${props.titleId} messages
9696
class="fr-message--info flex items-center"
9797
:class="additionalMessageClass"
9898
>
99-
<span class="line-1">{{ message }}</span>
99+
{{ message }}
100100
</p>
101101
</div>
102102
</fieldset>

0 commit comments

Comments
 (0)