@cnamts/synapse 1.0.27 → 1.1.0

package/dist/vuetifyConfig.js

@@ -1,4 +1,4 @@
-import { e, d as b, c as S, f as h, h as u, a as w, b as k, g as z } from "./apLightTheme2026-ug4Y23ns.js";
+import { g as e, h as b, f as S, a as h, c as u, i as w, e as k, d as z } from "./apLightTheme2026-DbS7BPUf.js";
 import * as W from "vuetify/components";
 import * as H from "vuetify/directives";
 import { mdi as F, aliases as V } from "vuetify/iconsets/mdi-svg";
@@ -376,6 +376,7 @@ const f = {
   // Feedback
   info: e.color.blue.base,
   infoVariant: e.color.blue.lighten80,
+  infoVariant90: e.color.blue.lighten90,
   onInfo: e.color.white.base,
   onInfoVariant: e.color.blue.darken20,
   error: e.color.orange.darken20,
@@ -403,7 +404,7 @@ const f = {
   interactionDarkenPressed: e.color.transparentBlack.alpha40
 }, D = {
   backgroundSurface: e.color.parma.darken60
-}, d = {
+}, p = {
   ...b,
   colors: {
     background: "#ffffff",
@@ -510,6 +511,7 @@ const f = {
   // Feedback
   info: e.color.parma.darken40,
   infoVariant: e.color.parma.lighten80,
+  infoVariant90: e.color.parma.lighten90,
   onInfo: e.color.white.base,
   onInfoVariant: e.color.parma.darken60,
   error: e.color.red.darken20,
@@ -535,51 +537,51 @@ const f = {
   interactionDarkenEnabled: e.color.transparentBlack.alpha00,
   interactionDarkenHover: e.color.transparentBlack.alpha20,
   interactionDarkenPressed: e.color.transparentBlack.alpha40
-}, p = {
+}, d = {
   backgroundSurface: e.color.parma.darken60
 }, v = (n) => typeof n == "object" && n !== null, c = (n) => {
-  const t = {}, r = (i, a = "") => {
-    for (const [o, s] of Object.entries(i)) {
+  const i = {}, r = (t, a = "") => {
+    for (const [o, s] of Object.entries(t)) {
       const l = a ? `${a}-${o}` : o;
       if (s === void 0)
         throw new Error(`Missing theme value for key "${l}"`);
-      v(s) ? r(s, l) : t[l] = s;
+      v(s) ? r(s, l) : i[l] = s;
     }
   };
-  return r(n), t;
+  return r(n), i;
 };
 function y(n) {
-  const t = {};
-  if (n.family && n.family.primary && (t["font-family"] = n.family.primary), n.heading && Object.entries(n.heading).forEach(([r, i]) => {
+  const i = {};
+  if (n.family && n.family.primary && (i["font-family"] = n.family.primary), n.heading && Object.entries(n.heading).forEach(([r, t]) => {
     var a, o;
-    t[`typography-${r}-font-size`] = i.fontSize || "", t[`typography-${r}-font-weight`] = ((a = i.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-line-height`] = ((o = i.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-letter-spacing`] = i.letterSpacing || "normal";
-  }), n.body && Object.entries(n.body).forEach(([r, i]) => {
+    i[`typography-${r}-font-size`] = t.fontSize || "", i[`typography-${r}-font-weight`] = ((a = t.fontWeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-line-height`] = ((o = t.lineHeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-letter-spacing`] = t.letterSpacing || "normal";
+  }), n.body && Object.entries(n.body).forEach(([r, t]) => {
     var a, o;
-    t[`typography-${r}-font-size`] = i.fontSize || "", t[`typography-${r}-font-weight`] = ((a = i.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-line-height`] = ((o = i.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-letter-spacing`] = i.letterSpacing || "normal";
-  }), n.subtitle && Object.entries(n.subtitle).forEach(([r, i]) => {
+    i[`typography-${r}-font-size`] = t.fontSize || "", i[`typography-${r}-font-weight`] = ((a = t.fontWeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-line-height`] = ((o = t.lineHeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-letter-spacing`] = t.letterSpacing || "normal";
+  }), n.subtitle && Object.entries(n.subtitle).forEach(([r, t]) => {
     var a, o;
-    t[`typography-${r}-font-size`] = i.fontSize || "", t[`typography-${r}-font-weight`] = ((a = i.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-line-height`] = ((o = i.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-letter-spacing`] = i.letterSpacing || "normal";
+    i[`typography-${r}-font-size`] = t.fontSize || "", i[`typography-${r}-font-weight`] = ((a = t.fontWeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-line-height`] = ((o = t.lineHeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-letter-spacing`] = t.letterSpacing || "normal";
   }), ["caption", "overline"].forEach((r) => {
-    var i, a, o, s;
+    var t, a, o, s;
     if (n[r]) {
       const l = n[r];
       if (l && typeof l == "object" && !Array.isArray(l))
         if ("fontSize" in l)
-          t[`typography-${r}-font-size`] = l.fontSize || "", t[`typography-${r}-font-weight`] = ((i = l.fontWeight) == null ? void 0 : i.toString()) || "", t[`typography-${r}-line-height`] = ((a = l.lineHeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-letter-spacing`] = l.letterSpacing || "normal", l.textTransform && (t[`typography-${r}-text-transform`] = l.textTransform || "");
+          i[`typography-${r}-font-size`] = l.fontSize || "", i[`typography-${r}-font-weight`] = ((t = l.fontWeight) == null ? void 0 : t.toString()) || "", i[`typography-${r}-line-height`] = ((a = l.lineHeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-letter-spacing`] = l.letterSpacing || "normal", l.textTransform && (i[`typography-${r}-text-transform`] = l.textTransform || "");
         else {
           const g = l[r];
-          g && (t[`typography-${r}-font-size`] = g.fontSize || "", t[`typography-${r}-font-weight`] = ((o = g.fontWeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-line-height`] = ((s = g.lineHeight) == null ? void 0 : s.toString()) || "", t[`typography-${r}-letter-spacing`] = g.letterSpacing || "normal", g.textTransform && (t[`typography-${r}-text-transform`] = g.textTransform || ""));
+          g && (i[`typography-${r}-font-size`] = g.fontSize || "", i[`typography-${r}-font-weight`] = ((o = g.fontWeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-line-height`] = ((s = g.lineHeight) == null ? void 0 : s.toString()) || "", i[`typography-${r}-letter-spacing`] = g.letterSpacing || "normal", g.textTransform && (i[`typography-${r}-text-transform`] = g.textTransform || ""));
         }
     }
   }), n.display) {
     const r = n.display;
-    ["display1", "display2"].forEach((i) => {
+    ["display1", "display2"].forEach((t) => {
       var o, s;
-      const a = r[i];
-      a && (t[`typography-${i}-font-size`] = a.fontSize || "", t[`typography-${i}-font-weight`] = ((o = a.fontWeight) == null ? void 0 : o.toString()) || "", t[`typography-${i}-line-height`] = ((s = a.lineHeight) == null ? void 0 : s.toString()) || "", t[`typography-${i}-letter-spacing`] = a.letterSpacing || "normal", a.textTransform && (t[`typography-${i}-text-transform`] = a.textTransform || ""));
+      const a = r[t];
+      a && (i[`typography-${t}-font-size`] = a.fontSize || "", i[`typography-${t}-font-weight`] = ((o = a.fontWeight) == null ? void 0 : o.toString()) || "", i[`typography-${t}-line-height`] = ((s = a.lineHeight) == null ? void 0 : s.toString()) || "", i[`typography-${t}-letter-spacing`] = a.letterSpacing || "normal", a.textTransform && (i[`typography-${t}-text-transform`] = a.textTransform || ""));
     });
   }
-  return t;
+  return i;
 }
 const R = () => x({
   components: W,
@@ -623,24 +625,24 @@ const R = () => x({
         dark: !1,
         colors: {
           ...S,
-          ...p,
+          ...d,
           ...c(k)
         },
         variables: {
           "font-family": '"Arial", sans-serif',
-          ...c(d)
+          ...c(p)
         }
       },
       ap: {
         dark: !1,
         colors: {
           ...B,
-          ...p,
+          ...d,
           ...c(w)
         },
         variables: {
           "font-family": '"Arial", sans-serif',
-          ...c(d)
+          ...c(p)
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.27",
+  "version": "1.1.0",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -58,7 +58,7 @@
   },
   "license": "ISC",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.11.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
@@ -86,7 +86,7 @@
     "@types/node": "^20.17.1",
     "@typescript-eslint/parser": "^8.11.0",
     "@vitejs/plugin-vue": "5.2.1",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.1.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "~0.8.0",
     "auto-changelog": "^2.4.0",
@@ -119,7 +119,7 @@
     "vite": "^6.4.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-vuetify": "^2.1.1",
-    "vitest": "^3.2.4",
+    "vitest": "^4.1.0",
     "vitest-axe": "^0.1.0",
     "vue": "^3.5.18",
     "vue-component-type-helpers": "2.2.0",
@@ -170,7 +170,8 @@
       "postcss": ">=8.5.10",
       "fast-uri": ">=3.1.2",
       "js-cookie": ">=3.0.7",
-      "qs": ">=6.15.2"
+      "qs": ">=6.15.2",
+      "tmp": ">=0.2.6"
     },
     "patchedDependencies": {
       "vuetify@3.12.2": "patches/vuetify@3.12.2.patch"

package/src/components/Accordion/tests/Accordion.visual.cy.ts

@@ -0,0 +1,44 @@
+import Accordion from '../Accordion.vue'
+
+const defaultItems = [
+	{ id: '1', title: 'Premier élément', content: 'Contenu du premier élément' },
+	{ id: '2', title: 'Deuxième élément', content: 'Contenu du deuxième élément' },
+	{ id: '3', title: 'Troisième élément', content: 'Contenu du troisième élément' },
+]
+
+describe('Accordion - Visual regression tests', () => {
+	it('displays the accordion collapsed by default', () => {
+		cy.mountWithVuetify(Accordion, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.sy-accordion').should('be.visible')
+		cy.matchImageSnapshot('accordion-default', cy.get('.sy-accordion'))
+	})
+
+	it('displays the accordion with one item open', () => {
+		cy.mountWithVuetify(Accordion, {
+			props: {
+				items: defaultItems,
+				modelValue: ['1'],
+			},
+		})
+
+		cy.get('.sy-accordion').should('be.visible')
+		cy.matchImageSnapshot('accordion-open-first', cy.get('.sy-accordion'))
+	})
+
+	it('displays the accordion with a disabled item', () => {
+		cy.mountWithVuetify(Accordion, {
+			props: {
+				items: [
+					{ id: '1', title: 'Actif', content: 'Contenu actif' },
+					{ id: '2', title: 'Désactivé', content: 'Contenu désactivé', disabled: true },
+				],
+			},
+		})
+
+		cy.get('.sy-accordion').should('be.visible')
+		cy.matchImageSnapshot('accordion-disabled-item', cy.get('.sy-accordion'))
+	})
+})

package/src/components/BackToTopBtn/tests/BackToTopBtn.visual.cy.ts

@@ -0,0 +1,34 @@
+import BackToTopBtn from '../BackToTopBtn.vue'
+
+function triggerScroll(scrollY = 200) {
+	cy.window().then((win) => {
+		Object.defineProperty(win, 'scrollY', { value: scrollY, writable: true })
+		win.dispatchEvent(new Event('scroll'))
+	})
+}
+
+describe('BackToTopBtn - Visual regression tests', () => {
+	it('displays the button after scroll', () => {
+		cy.mountWithVuetify(BackToTopBtn, {
+			props: { threshold: 0 },
+		})
+
+		triggerScroll()
+		cy.get('.vd-back-to-top-btn').should('be.visible')
+		cy.matchImageSnapshot('back-to-top-btn-default', cy.get('.vd-back-to-top-btn'))
+	})
+
+	it('displays the button with custom nudge', () => {
+		cy.mountWithVuetify(BackToTopBtn, {
+			props: {
+				threshold: 0,
+				nudgeRight: '32px',
+				nudgeBottom: '32px',
+			},
+		})
+
+		triggerScroll()
+		cy.get('.vd-back-to-top-btn').should('be.visible')
+		cy.matchImageSnapshot('back-to-top-btn-custom-nudge', cy.get('.vd-back-to-top-btn'))
+	})
+})

package/src/components/Captcha/tests/Captcha.visual.cy.ts

@@ -0,0 +1,45 @@
+import Captcha from '../Captcha.vue'
+
+describe('Captcha - Visual regression tests', () => {
+	it('displays the captcha with image type', () => {
+		cy.mountWithVuetify(Captcha, {
+			props: {
+				urlCreate: '/api/captcha/create',
+				urlGetImage: '/api/captcha/image',
+				urlGetAudio: '/api/captcha/audio',
+				type: 'image',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('captcha-image-type', cy.get('.v-application'))
+	})
+
+	it('displays the captcha with audio type', () => {
+		cy.mountWithVuetify(Captcha, {
+			props: {
+				urlCreate: '/api/captcha/create',
+				urlGetImage: '/api/captcha/image',
+				urlGetAudio: '/api/captcha/audio',
+				type: 'audio',
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('captcha-audio-type', cy.get('.v-application'))
+	})
+
+	it('displays the captcha without helpdesk', () => {
+		cy.mountWithVuetify(Captcha, {
+			props: {
+				urlCreate: '/api/captcha/create',
+				urlGetImage: '/api/captcha/image',
+				urlGetAudio: '/api/captcha/audio',
+				helpDesk: false,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('captcha-no-helpdesk', cy.get('.v-application'))
+	})
+})

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

@@ -143,6 +143,8 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                 <!-- v-if -->
                 <!-- v-if -->
                 <!-- v-if -->
+                <!-- Boutons d'incrément custom (remplacent le spinner natif, perdu en type=text) -->
+                <!-- v-if -->
               </div>
               <div class="v-field__outline">
                 <div class="v-field__outline__start"></div>
@@ -485,6 +487,8 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                 <!-- v-if -->
                 <!-- v-if -->
                 <!-- v-if -->
+                <!-- Boutons d'incrément custom (remplacent le spinner natif, perdu en type=text) -->
+                <!-- v-if -->
               </div>
               <div class="v-field__outline">
                 <div class="v-field__outline__start"></div>

package/src/components/ChipList/tests/ChipList.visual.cy.ts

@@ -0,0 +1,46 @@
+import ChipList from '../ChipList.vue'
+
+const defaultItems = [
+	{ value: 'option1', text: 'Option 1' },
+	{ value: 'option2', text: 'Option 2' },
+	{ value: 'option3', text: 'Option 3' },
+]
+
+describe('ChipList - Visual regression tests', () => {
+	it('displays chips by default', () => {
+		cy.mountWithVuetify(ChipList, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.v-chip').should('be.visible')
+		cy.matchImageSnapshot('chip-list-default', cy.get('.sy-chip-list'))
+	})
+
+	it('displays chips in readonly mode', () => {
+		cy.mountWithVuetify(ChipList, {
+			props: {
+				items: defaultItems,
+				readonly: true,
+			},
+		})
+
+		cy.get('.v-chip').should('be.visible')
+		cy.matchImageSnapshot('chip-list-readonly', cy.get('.sy-chip-list'))
+	})
+
+	it('displays chips with state icons', () => {
+		cy.mountWithVuetify(ChipList, {
+			props: {
+				items: [
+					{ value: 'ok', text: 'Succès', state: 'success' },
+					{ value: 'warn', text: 'Attention', state: 'warning' },
+					{ value: 'err', text: 'Erreur', state: 'error' },
+				],
+				displayPrependStateIcon: true,
+			},
+		})
+
+		cy.get('.v-chip').should('be.visible')
+		cy.matchImageSnapshot('chip-list-state-icons', cy.get('.sy-chip-list'))
+	})
+})

package/src/components/CollapsibleList/tests/CollapsibleList.visual.cy.ts

@@ -0,0 +1,33 @@
+import CollapsibleList from '../CollapsibleList.vue'
+
+const defaultItems = [
+	{ text: 'Lien 1', href: '#lien1' },
+	{ text: 'Lien 2', href: '#lien2' },
+	{ text: 'Lien 3', href: '#lien3' },
+]
+
+describe('CollapsibleList - Visual regression tests', () => {
+	it('displays the list with title', () => {
+		cy.mountWithVuetify(CollapsibleList, {
+			props: {
+				listTitle: 'Mon titre',
+				items: defaultItems,
+			},
+		})
+
+		cy.get('.vd-collapse-list').should('be.visible')
+		cy.matchImageSnapshot('collapsible-list-default', cy.get('.vd-collapse-list'))
+	})
+
+	it('displays the list without title', () => {
+		cy.mountWithVuetify(CollapsibleList, {
+			props: {
+				listTitle: null,
+				items: defaultItems,
+			},
+		})
+
+		cy.get('.vd-collapse-list').should('be.visible')
+		cy.matchImageSnapshot('collapsible-list-no-title', cy.get('.vd-collapse-list'))
+	})
+})

package/src/components/ContextualMenu/tests/ContextualMenu.visual.cy.ts

@@ -0,0 +1,35 @@
+import ContextualMenu from '../ContextualMenu.vue'
+
+const defaultItems = [
+	{ text: 'Accueil', hash: '#accueil', level: 1 },
+	{ text: 'Mon compte', hash: '#mon-compte', level: 1 },
+	{ text: 'Paramètres', hash: '#parametres', level: 2 },
+	{ text: 'Déconnexion', hash: '#deconnexion', level: 1 },
+]
+
+describe('ContextualMenu - Visual regression tests', () => {
+	it('displays the contextual menu', () => {
+		cy.mountWithVuetify(ContextualMenu, {
+			props: {
+				ariaLabel: 'Menu de navigation',
+				items: defaultItems,
+			},
+		})
+
+		cy.get('.vd-contextual-menu').should('be.visible')
+		cy.matchImageSnapshot('contextual-menu-default', cy.get('.vd-contextual-menu-container'))
+	})
+
+	it('displays the contextual menu with a selected item', () => {
+		cy.mountWithVuetify(ContextualMenu, {
+			props: {
+				ariaLabel: 'Menu de navigation',
+				items: defaultItems,
+				modelValue: '#accueil',
+			},
+		})
+
+		cy.get('.vd-contextual-menu').should('be.visible')
+		cy.matchImageSnapshot('contextual-menu-selected', cy.get('.vd-contextual-menu-container'))
+	})
+})

package/src/components/CookieBanner/tests/CookieBanner.visual.cy.ts

@@ -0,0 +1,29 @@
+import CookieBanner from '../CookieBanner.vue'
+
+describe('CookieBanner - Visual regression tests', () => {
+	it('displays the cookie banner', () => {
+		cy.mountWithVuetify(CookieBanner, {
+			props: { modelValue: true },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('cookie-banner-default', cy.get('.v-application'))
+	})
+
+	it('displays the cookie banner with custom items', () => {
+		cy.mountWithVuetify(CookieBanner, {
+			props: {
+				modelValue: true,
+				items: {
+					analytics: {
+						title: 'Mesure d\'audience',
+						description: 'Ces cookies permettent de mesurer la fréquentation du site.',
+					},
+				},
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('cookie-banner-with-items', cy.get('.v-application'))
+	})
+})

package/src/components/CookiesSelection/tests/CookiesSelection.visual.cy.ts

@@ -0,0 +1,21 @@
+import CookiesSelection from '../CookiesSelection.vue'
+
+describe('CookiesSelection - Visual regression tests', () => {
+	it('displays cookies selection with items', () => {
+		cy.mountWithVuetify(CookiesSelection, {
+			props: {
+				items: {
+					analytics: [
+						{ name: 'Matomo', description: 'Mesure d\'audience', conservation: '13 mois' },
+					],
+					functional: [
+						{ name: 'Préférences', description: 'Sauvegarde les préférences utilisateur', conservation: '12 mois' },
+					],
+				},
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('cookies-selection-default', cy.get('.v-application'))
+	})
+})

package/src/components/CopyBtn/tests/CopyBtn.visual.cy.ts

@@ -0,0 +1,24 @@
+import CopyBtn from '../CopyBtn.vue'
+
+describe('CopyBtn - Visual regression tests', () => {
+	it('displays the copy button by default', () => {
+		cy.mountWithVuetify(CopyBtn, {
+			props: { textToCopy: 'Texte à copier' },
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('copy-btn-default', cy.get('.v-btn'))
+	})
+
+	it('displays the copy button without tooltip', () => {
+		cy.mountWithVuetify(CopyBtn, {
+			props: {
+				textToCopy: 'Texte à copier',
+				hideTooltip: true,
+			},
+		})
+
+		cy.get('.v-btn').should('be.visible')
+		cy.matchImageSnapshot('copy-btn-no-tooltip', cy.get('.v-btn'))
+	})
+})

package/src/components/Customs/Selects/SelectBtnField/tests/SelectBtnField.visual.cy.ts

@@ -0,0 +1,60 @@
+import SelectBtnField from '../SelectBtnField.vue'
+
+const defaultItems = [
+	{ text: 'Oui', value: 'oui' },
+	{ text: 'Non', value: 'non' },
+]
+
+describe('SelectBtnField - Visual regression tests', () => {
+	it('displays the button select field by default', () => {
+		cy.mountWithVuetify(SelectBtnField, {
+			props: {
+				items: defaultItems,
+				label: 'Votre réponse',
+			},
+		})
+
+		cy.get('.select-btn-field').should('be.visible')
+		cy.matchImageSnapshot('select-btn-field-default', cy.get('.select-btn-field'))
+	})
+
+	it('displays the button select field with a selected value', () => {
+		cy.mountWithVuetify(SelectBtnField, {
+			props: {
+				items: defaultItems,
+				label: 'Votre réponse',
+				modelValue: 'oui',
+			},
+		})
+
+		cy.get('.select-btn-field').should('be.visible')
+		cy.matchImageSnapshot('select-btn-field-selected', cy.get('.select-btn-field'))
+	})
+
+	it('displays the button select field in inline mode', () => {
+		cy.mountWithVuetify(SelectBtnField, {
+			props: {
+				items: defaultItems,
+				label: 'Votre réponse',
+				inline: true,
+			},
+		})
+
+		cy.get('.select-btn-field').should('be.visible')
+		cy.matchImageSnapshot('select-btn-field-inline', cy.get('.select-btn-field'))
+	})
+
+	it('displays the button select field in readonly mode', () => {
+		cy.mountWithVuetify(SelectBtnField, {
+			props: {
+				items: defaultItems,
+				label: 'Votre réponse',
+				modelValue: 'non',
+				readonly: true,
+			},
+		})
+
+		cy.get('.select-btn-field').should('be.visible')
+		cy.matchImageSnapshot('select-btn-field-readonly', cy.get('.select-btn-field'))
+	})
+})