@cnamts/synapse 1.0.22 → 1.0.23

package/src/components/Accordion/tests/accordion.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect, vi } from 'vitest'
 import { mount, shallowMount } from '@vue/test-utils'
-
 import Accordion from '../Accordion.vue'
 import { config } from '../config'
 
@@ -23,7 +22,7 @@ describe('Accordion', () => {
 
 	it('renders correctly', () => {
 		const wrapper = shallowMount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -34,7 +33,7 @@ describe('Accordion', () => {
 
 	it('renders the correct number of accordion items', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -47,7 +46,7 @@ describe('Accordion', () => {
 	it('uses the correct heading level', () => {
 		const headingLevel = 3
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel,
 			},
@@ -59,7 +58,7 @@ describe('Accordion', () => {
 
 	it('toggles content visibility when button is clicked', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -82,7 +81,7 @@ describe('Accordion', () => {
 
 	it('renders string content correctly', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: [defaultItems[0]!],
 				headingLevel: 2,
 			},
@@ -97,7 +96,7 @@ describe('Accordion', () => {
 
 	it('renders object content correctly', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: [defaultItems[2]!],
 				headingLevel: 2,
 			},
@@ -114,7 +113,7 @@ describe('Accordion', () => {
 
 	it('has correct accessibility attributes', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -137,7 +136,7 @@ describe('Accordion', () => {
 
 	it('updates aria-expanded attribute when toggled', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -155,7 +154,7 @@ describe('Accordion', () => {
 
 	it('applies focus style when accordion is opened', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -185,7 +184,7 @@ describe('Accordion', () => {
 		})
 
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 				groupId: 'test-group',
@@ -209,7 +208,7 @@ describe('Accordion', () => {
 
 	it('applies primary color to the title', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -224,7 +223,7 @@ describe('Accordion', () => {
 
 	it('updates tabindex when accordion is opened', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -246,7 +245,7 @@ describe('Accordion', () => {
 
 	it('renders semantic content structure for accessibility', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: [
 					{ id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
 					{
@@ -300,7 +299,7 @@ describe('Accordion', () => {
 		}
 
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 				...customOptions,
@@ -336,7 +335,7 @@ describe('Accordion', () => {
 
 	it('uses default colors from config when no custom options are provided', () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -363,7 +362,7 @@ describe('Accordion', () => {
 
 	it('can open multiple accordions simultaneously', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -387,7 +386,7 @@ describe('Accordion', () => {
 
 	it('transfers focus correctly when clicking on different accordion items', async () => {
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -417,7 +416,7 @@ describe('Accordion', () => {
 
 		// Monter le composant
 		const wrapper = mount(Accordion, {
-			propsData: {
+			props: {
 				items: defaultItems,
 				headingLevel: 2,
 			},
@@ -435,4 +434,117 @@ describe('Accordion', () => {
 		// Restaurer le spy
 		removeEventListenerSpy.mockRestore()
 	})
+
+	describe('v-model support', () => {
+		it('opens items specified in modelValue prop', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item2'],
+				},
+			})
+
+			const contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[1]!.classes()).toContain('sy-accordion-content--open')
+			expect(contents[0]!.classes()).not.toContain('sy-accordion-content--open')
+		})
+
+		it('opens multiple items specified in modelValue', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1', 'item3'],
+				},
+			})
+
+			const contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).toContain('sy-accordion-content--open')
+			expect(contents[1]!.classes()).not.toContain('sy-accordion-content--open')
+			expect(contents[2]!.classes()).toContain('sy-accordion-content--open')
+		})
+
+		it('sets correct aria-expanded for pre-opened items', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			const buttons = wrapper.findAll('.sy-accordion-button')
+			expect(buttons[0]!.attributes('aria-expanded')).toBe('true')
+			expect(buttons[1]!.attributes('aria-expanded')).toBe('false')
+		})
+
+		it('toggles an item and updates the DOM when clicked', async () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			// item1 is initially open
+			let contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).toContain('sy-accordion-content--open')
+
+			// Close item1
+			const firstButton = wrapper.find('.sy-accordion-button')
+			await firstButton.trigger('click')
+
+			contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).not.toContain('sy-accordion-content--open')
+		})
+
+		it('opens additional items while keeping existing ones open', async () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			// Open item2 as well
+			const buttons = wrapper.findAll('.sy-accordion-button')
+			await buttons[1]!.trigger('click')
+
+			const contents = wrapper.findAll('.sy-accordion-content')
+			expect(contents[0]!.classes()).toContain('sy-accordion-content--open')
+			expect(contents[1]!.classes()).toContain('sy-accordion-content--open')
+		})
+
+		it('defaults to no open items when no modelValue is provided', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: [],
+				},
+			})
+
+			const buttons = wrapper.findAll('.sy-accordion-button')
+			buttons.forEach((button) => {
+				expect(button.attributes('aria-expanded')).toBe('false')
+			})
+		})
+
+		it('sets correct tabindex on content region for pre-opened items', () => {
+			const wrapper = mount(Accordion, {
+				props: {
+					items: defaultItems,
+					headingLevel: 2,
+					modelValue: ['item1'],
+				},
+			})
+
+			const regions = wrapper.findAll('[role="region"]')
+			expect(regions[0]!.attributes('tabindex')).toBe('0')
+			expect(regions[1]!.attributes('tabindex')).toBe('-1')
+		})
+	})
 })

package/src/components/Amelipro/AmeliproPagination/AmeliproPagination.mdx

@@ -1,9 +1,11 @@
-import { Controls, Canvas, Meta } from '@storybook/blocks';
+import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
 
 import * as AmeliproPaginationStories from './AmeliproPagination.stories';
 
 <Meta of={AmeliproPaginationStories} />
 
+<Story of={AmeliproPaginationStories.DeprecationNotice}/>
+
 # AmeliproPagination
 
 L’élément `Amelipropagination` est utilisé pour afficher des paginations

package/src/components/Amelipro/AmeliproPagination/AmeliproPagination.stories.ts

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import AmeliproPagination from './AmeliproPagination.vue'
+import { createDeprecationNotice } from '@/stories/DeprecationNotice/DeprecationNotice'
 
 const meta = {
 	argTypes: {
@@ -174,3 +175,10 @@ function onPageClick(page: number) {
         `,
 	}),
 }
+
+export const DeprecationNotice = {
+	...createDeprecationNotice([
+		{ label: 'SyPagination', url: '/?path=/docs/composants-navigation-sypagination--docs&globals=theme:ap' },
+	]),
+	tags: ['!dev'],
+}

package/src/components/BackBtn/accessibilite/Accessibility.mdx

@@ -1,15 +1,67 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as Stories from '../BackBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={Stories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="BackBtn"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/button/"
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/BackBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4006" target="_blank" style={{color:'#0C41BD'}}>issue #4006</a>)</p>
+	</div>
 
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Rôle natif</strong> : Utilisation de l'élément <code>&lt;button&gt;</code> natif (via <code>VBtn</code>) pour un comportement sémantique correct par défaut.</li>
+				<li><strong>Icône décorative</strong> : L'icône de retour (si présente) est masquée aux lecteurs d'écran (<code>decorative=true</code>) pour éviter la redondance d'information avec le texte du bouton.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/BackBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4006" target="_blank" style={{color:'#0C41BD'}}>issue #4006</a>)</p>
-</div>
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Le bouton est focusable via la touche <kbd>Tab</kbd> de manière naturelle.</li>
+				<li><strong>Activation</strong> : Le bouton peut être activé avec les touches <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.</li>
+				<li><strong>Indicateur de focus</strong> : Un style de focus clair et visible (<code>:focus-visible</code>) est implémenté pour garantir que les utilisateurs naviguant au clavier savent quel élément est actif.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et contrastes">
+			<ul>
+				<li><strong>Contrastes garantis</strong> : Couleurs de texte adaptées ("primary" ou "white") selon le thème clair ou sombre (<code>dark</code>) pour répondre aux critères WCAG de contraste.</li>
+				<li><strong>États distincts</strong> : Apparence distincte entre le mode clair (bouton texte) et sombre (bouton contour) tout en maintenant l'accessibilité visuelle.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="BackBtn">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Texte descriptif</strong> : Assurez-vous que le texte du bouton explique clairement l'action (par ex. "Retour à la page précédente" plutôt que juste "Retour") si le contexte n'est pas explicite.</li>
+			<li><strong>Cohérence de placement</strong> : Placez le bouton de retour à un endroit prévisible et constant sur vos différentes pages (généralement en haut à gauche).</li>
+			<li>Ne surchargez pas le bouton avec des attributs <code>aria-label</code> si le texte affiché à l'écran est déjà suffisamment clair.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Boutons</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1" target="_blank" rel="noopener noreferrer">RGAA : Formulaires et boutons</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/BackToTopBtn/BackToTopBtn.stories.ts

@@ -92,7 +92,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -104,6 +104,7 @@ export const Default: Story = {
 		max-height="200px"
 		class="overflow-y-auto"
 		style="scroll-behavior: smooth"
+		tabindex="0"
 	>
 		<VSheet
 			height="600px"
@@ -166,6 +167,7 @@ export const Default: Story = {
 				max-height="200px"
 				class="overflow-y-auto"
 				style="scroll-behavior: smooth"
+				tabindex="0"
 			>
 					<VSheet
 						height="600px"
@@ -192,7 +194,7 @@ export const Default: Story = {
 export const Customization: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -204,6 +206,7 @@ export const Customization: Story = {
 		max-height="200px"
 		class="overflow-y-auto"
 		style="scroll-behavior: smooth"
+		tabindex="0"
 	>
 		<VSheet
 			height="600px"
@@ -276,6 +279,7 @@ export const Customization: Story = {
 					max-height="200px"
 					class="overflow-y-auto"
 					style="scroll-behavior: smooth"
+					tabindex="0"
 				>
 					<VSheet
 						height="600px"
@@ -302,7 +306,7 @@ export const Customization: Story = {
 export const CustomPosition: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -314,6 +318,7 @@ export const CustomPosition: Story = {
 		max-height="200px"
 		class="overflow-y-auto"
 		style="scroll-behavior: smooth"
+		tabindex="0"
 	>
 		<VSheet
 			height="600px"
@@ -386,6 +391,7 @@ export const CustomPosition: Story = {
 					max-height="200px"
 					class="overflow-y-auto"
 					style="scroll-behavior: smooth"
+					tabindex="0"
 				>
 					<VSheet
 						height="600px"

package/src/components/BackToTopBtn/accessibilite/Accessibility.mdx

@@ -1,15 +1,95 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../BackToTopBtn.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
+<AccessibilityGuideLayout
+    componentName="BackToTopBtn"
+    iconSrc={AccessibilityIcon}
+    apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/button/"
+    apgLabel="WAI-ARIA Authoring Practices pour les boutons"
+>
 
 <div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/BackToTopBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4022" target="_blank" style={{color:'#0C41BD'}}>issue #4022</a>)</p>
+    <p>Rapport d'audit manuel : <a href="/audits/BackToTopBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+    <p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4022" target="_blank" style={{color:'#0C41BD'}}>issue #4022</a>)</p>
 </div>
+
+    <CriteriaSection>
+        <CriteriaCard icon="⌨️" title="Navigation au clavier">
+            <ul>
+                <li><strong>Accessibilité native</strong> : Le bouton est un élément focusable via la touche Tab</li>
+                <li><strong>Activation clavier</strong> : Peut être activé avec les touches Entrée et Espace</li>
+                <li><strong>Focus visible</strong> : Indicateur de focus clair pour les utilisateurs du clavier</li>
+                <li><strong>Positionnement cohérent</strong> : Le bouton reste toujours accessible et n'interfère pas avec la navigation</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🔊" title="Lecteurs d'écran">
+            <ul>
+                <li><strong>Texte descriptif</strong> : Le bouton contient un texte clair indiquant sa fonction ("Retour en haut")</li>
+                <li><strong>Icône décorative</strong> : L'icône flèche est marquée comme décorative pour éviter la redondance</li>
+                <li><strong>Annonce sémantique</strong> : La fonction du bouton est clairement annoncée par les technologies d'assistance</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📱" title="Adaptation responsive">
+            <ul>
+                <li><strong>Mode mobile</strong> : Le texte est masqué visuellement sur mobile (screen reader only)</li>
+                <li><strong>Taille minimale</strong> : Le bouton maintient une taille de 36px minimum sur mobile pour le toucher</li>
+                <li><strong>Positionnement optimisé</strong> : Le positionnement s'adapte aux différentes tailles d'écran</li>
+                <li><strong>Comportement cohérent</strong> : La fonctionnalité reste identique quel que soit l'appareil utilisé</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎯" title="Critères RGAA respectés">
+            <ul>
+                <li><strong>Critère 7.1</strong> : Chaque script est compatible avec les technologies d'assistance</li>
+                <li><strong>Critère 7.3</strong> : Chaque script est contrôlable par le clavier et par tout dispositif de pointage</li>
+                <li><strong>Critère 11.2</strong> : Chaque conteneur d'informations possède une balise permettant de le rendre accessible</li>
+                <li><strong>Critère 12.4</strong> : Chaque texte est lisible lorsque la taille des caractères est modifiée</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection>
+        <p>
+            Explorez ci-dessous un exemple de BackToTopBtn entièrement accessible.
+            Essayez de modifier les propriétés pour voir comment le composant s'adapte.
+        </p>
+        <Story of={Stories.Default} />
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li><strong>Rendre les conteneurs accessibles</strong> : Ajouter <code>tabindex="0"</code> sur les conteneurs scrollables pour permettre l'accès au clavier</li>
+            <li><strong>Choisir le bon seuil</strong> : Utiliser un threshold raisonnable (100-200px) pour éviter que le bouton n'apparaisse trop tôt</li>
+            <li><strong>Positionnement cohérent</strong> : Maintenir une position cohérente du bouton pour ne pas dérouter les utilisateurs</li>
+            <li><strong>Texte clair et concis</strong> : Utiliser un texte descriptif mais court pour le bouton (ex: "Retour en haut", "Haut de page")</li>
+            <li><strong>Contraste suffisant</strong> : S'assurer que le bouton a un contraste suffisant avec l'arrière-plan dans tous les thèmes</li>
+            <li><strong>Ne pas surcharger</strong> : Éviter d'utiliser plusieurs boutons de retour en haut sur la même page</li>
+            <li><strong>Test mobile</strong> : Vérifier que le bouton reste facilement accessible sur les écrans tactiles</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html" target="_blank" rel="noopener noreferrer">WCAG 2.1 - Keyboard Accessibility</a> - Guide complet sur l'accessibilité au clavier</li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" rel="noopener noreferrer">ARIA Authoring Practices - Button Pattern</a> - Bonnes pratiques pour les boutons accessibles</li>
+            <li><a href="https://rgaa_numerique.gitbook.io/rgaa-accessibilite/criteres-techniques/" target="_blank" rel="noopener noreferrer">Référentiel Général d'Amélioration de l'Accessibilité (RGAA)</a> - Critères techniques français</li>
+            <li><a href="https://web.dev/focus-visible/" target="_blank" rel="noopener noreferrer">Focus Visible Best Practices</a> - Guide sur les indicateurs de focus visibles</li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html" target="_blank" rel="noopener noreferrer">WCAG Understanding Focus Visible</a> - Comprendre l'exigence de focus visible</li>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/Captcha/tests/Captcha.spec.ts

@@ -1,8 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-
 import Captcha from '../Captcha.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('Captcha', () => {
 	afterEach(() => {
@@ -18,9 +16,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -60,9 +55,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -101,9 +93,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -124,9 +113,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -163,9 +149,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -193,9 +176,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -221,9 +201,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -251,9 +228,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -278,9 +252,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',