@cnamts/synapse 1.0.24 → 1.0.25

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -334,7 +334,12 @@
 			const dateObjects = value
 				.map(dateStr => parseDate(dateStr, returnFormat.value))
 				.filter(Boolean) as Date[]
-			selectedDates.value = dateObjects
+			if (props.displayRange && dateObjects.length >= 2) {
+				selectedDates.value = dateSelectionResult.generateDateRange(dateObjects[0]!, dateObjects[dateObjects.length - 1]!)
+			}
+			else {
+				selectedDates.value = dateObjects
+			}
 		}
 		else {
 			const dateObject = parseDate(value, returnFormat.value)
@@ -390,6 +395,7 @@
 		initializeSelectedDates,
 		validateDates,
 		updateModel,
+		generateDateRange: dateSelectionResult.generateDateRange,
 	})
 
 	// Display helpers (centralised in useDatePickerState)
@@ -772,7 +778,7 @@
 					const startDate = parseDate(startDateStr, props.format)
 					const endDate = parseDate(endDateStr, props.format)
 					if (startDate && endDate) {
-						selectedDates.value = [startDate, endDate]
+						selectedDates.value = dateSelectionResult.generateDateRange(startDate, endDate)
 						validateDates()
 					}
 				}
@@ -866,7 +872,7 @@
 				const endDate = endStr ? parseDate(endStr, rf) || parseDate(endStr, props.format) : null
 
 				if (startDate && endDate) {
-					selectedDates.value = [startDate, endDate]
+					selectedDates.value = dateSelectionResult.generateDateRange(startDate, endDate)
 					displayFormattedDate.value
 						= `${formatDate(startDate, props.format)} - ${formatDate(endDate, props.format)}`
 				}
@@ -1222,8 +1228,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .date-picker-title {
 	display: block;
 	text-transform: lowercase;
@@ -1249,7 +1253,7 @@
 /* Style pour les jours fériés */
 :deep(.holiday-day) {
 	background-color: rgb(255 193 7 / 10%);
-	border: 2px dotted tokens.$neutral-black;
+	border: 2px dotted rgb(var(--v-theme-grey-darken60));
 	border-radius: 50%;
 }
 
@@ -1268,45 +1272,45 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-success !important;
+		color: rgb(var(--v-theme-textSuccess)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 	}
 }
 
 .v-messages__message--error {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
 .v-messages__message--warning {
 	:deep(.v-input__control) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 }
 
 :deep(.v-btn__content) {
-	font-size: tokens.$font-size-body-text + 3;
+	font-size: var(--v-fontSize-corpsDeTexte) + 3;
 	font-weight: bold;
 }
 
@@ -1337,7 +1341,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: tokens.$colors-background-main;
+	background-color: rgb(var(--v-theme-backgroundMain));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1345,7 +1349,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: tokens.$colors-background-accent-primary-contrasted !important;
+	background-color: rgb(var(--v-theme-backgroundAccentContrasted)) !important;
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {

package/src/components/DatePicker/ComplexDatePicker/tests/ComplexDatePicker.spec.ts

@@ -160,6 +160,29 @@ describe('ComplexDatePicker.clean', () => {
 		expect((input.element as HTMLInputElement).value).toBe('01/01/2025 - ')
 	})
 
+	it('generates all intermediate dates when selecting a range in range mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+		})
+
+		await wrapper.vm.handleDateSelected(['01/01/2025', '05/01/2025'])
+		await flushPromises()
+
+		const selection = wrapper.vm.selectedDates as Date[]
+		expect(Array.isArray(selection)).toBe(true)
+		// Should contain 5 dates: 01/01, 02/01, 03/01, 04/01, 05/01
+		expect(selection).toHaveLength(5)
+
+		// Verify start and end dates are correct (handle timezone differences)
+		expect(selection[0]).toBeInstanceOf(Date)
+		expect(selection[selection.length - 1]).toBeInstanceOf(Date)
+		// Use local date string to avoid timezone issues
+		expect(selection[0]?.toLocaleDateString('fr-FR')).toContain('01/01/2025')
+		expect(selection[selection.length - 1]?.toLocaleDateString('fr-FR')).toContain('05/01/2025')
+	})
+
 	it('formatDateInput formats raw digits according to the format and computes cursor position', () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -1110,8 +1110,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 :deep(.v-icon__svg) { cursor: default; }
 
 .warning-field {
@@ -1122,10 +1120,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -1133,7 +1131,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -1141,11 +1139,11 @@
 .error-field {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
@@ -1157,10 +1155,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -1168,7 +1166,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }

package/src/components/DatePicker/composables/tests/useDatePickerState.spec.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
+import { useDatePickerState } from '../useDatePickerState'
+
+describe('useDatePickerState', () => {
+	const mockParseDate = vi.fn()
+	const mockFormatDate = vi.fn()
+	const mockInitializeSelectedDates = vi.fn()
+	const mockValidateDates = vi.fn()
+	const mockUpdateModel = vi.fn()
+	const mockGenerateDateRange = vi.fn()
+
+	const format = 'DD/MM/YYYY'
+
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	describe('syncFromModelValue', () => {
+		it('devrait initialiser selectedDates et générer les dates intermédiaires en mode plage', () => {
+			const selectedDates = ref<Date | (Date | null)[] | null>(null)
+			const startDate = new Date('2023-01-01')
+			const endDate = new Date('2023-01-05')
+			const intermediateDate = new Date('2023-01-03')
+
+			mockInitializeSelectedDates.mockReturnValue([startDate, endDate])
+			mockFormatDate.mockImplementation((date) => {
+				if (date === startDate) return '01/01/2023'
+				if (date === endDate) return '05/01/2023'
+				return ''
+			})
+			mockGenerateDateRange.mockReturnValue([startDate, intermediateDate, endDate])
+
+			const { syncFromModelValue } = useDatePickerState({
+				selectedDates,
+				format,
+				displayRange: true,
+				parseDate: mockParseDate,
+				formatDate: mockFormatDate,
+				initializeSelectedDates: mockInitializeSelectedDates,
+				validateDates: mockValidateDates,
+				updateModel: mockUpdateModel,
+				generateDateRange: mockGenerateDateRange,
+			})
+
+			syncFromModelValue(['01/01/2023', '05/01/2023'])
+
+			expect(mockInitializeSelectedDates).toHaveBeenCalled()
+			expect(mockGenerateDateRange).toHaveBeenCalledWith(startDate, endDate)
+			expect(selectedDates.value).toEqual([startDate, intermediateDate, endDate])
+		})
+	})
+})

package/src/components/DatePicker/composables/useDatePickerState.ts

@@ -12,6 +12,7 @@ export interface UseDatePickerStateOptions {
 	initializeSelectedDates: (value: DateInput | null, format: string, dateFormatReturn?: string) => Date | (Date | null)[] | null
 	validateDates: (forceValidation?: boolean) => void
 	updateModel: (value: DateValue) => void
+	generateDateRange?: (start: Date, end: Date) => Date[]
 }
 
 export interface UseDatePickerStateResult {
@@ -37,6 +38,7 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 		initializeSelectedDates,
 		validateDates,
 		// updateModel,
+		generateDateRange,
 	} = options
 
 	const textInputValue = ref('')
@@ -115,6 +117,16 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 		}
 
 		selectedDates.value = initializeSelectedDates(newValue ?? null, format, dateFormatReturn)
+
+		if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length === 2) {
+			const startDate = selectedDates.value[0]
+			const endDate = selectedDates.value[1]
+			if (startDate && endDate && generateDateRange) {
+				// Regenerate intermediate dates for Vuetify range selection
+				selectedDates.value = generateDateRange(startDate, endDate)
+			}
+		}
+
 		if (selectedDates.value) {
 			const firstDate = Array.isArray(selectedDates.value)
 				? selectedDates.value[0]
@@ -141,6 +153,18 @@ export const useDatePickerState = (options: UseDatePickerStateOptions): UseDateP
 			return
 		}
 
+		if (displayRange && Array.isArray(value) && value.length >= 2) {
+			const startDate = value[0]
+			const endDate = value[value.length - 1]
+			if (startDate && endDate) {
+				const formattedForInput = `${formatDate(startDate, format)} - ${formatDate(endDate, format)}`
+				if (textInputValue.value !== formattedForInput) {
+					textInputValue.value = formattedForInput
+				}
+				return
+			}
+		}
+
 		const firstDate = Array.isArray(value) ? (value[0] ?? null) : value
 		if (!firstDate) return
 

package/src/components/DatePicker/composables/useDateTextField.ts

@@ -80,7 +80,6 @@ export const useDateTextField = (options: UseDateTextFieldOptions) => {
 		isValidating.value = true
 		hasInteracted.value = true
 		const ok = await runRules(inputValue.value)
-		console.log('ok from validateOnSubmit:', ok)
 		isValidating.value = false
 		return ok
 	}

package/src/components/DatePicker/composables/useMonthButtonCustomization.ts

@@ -14,6 +14,7 @@ export function useMonthButtonCustomization(
 	const monthButtonText = ref('')
 	const yearText = ref('')
 	const monthButtonObservers: MutationObserver[] = []
+	const primaryThemeColor = 'rgb(var(--v-theme-primary, 12, 65, 154))'
 
 	onBeforeUnmount(() => {
 		monthButtonObservers.forEach(observer => observer.disconnect())
@@ -111,12 +112,12 @@ export function useMonthButtonCustomization(
 						)
 						monthBtnElement.setAttribute('data-ripple', 'false')
 						monthBtnElement.setAttribute('aria-label', monthText)
-						monthBtnElement.style.color = 'var(--v-theme-primary)'
+						monthBtnElement.style.color = primaryThemeColor
 
 						const buttonContentHTML = `
-							<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-								<span style="color: var(--v-theme-primary);">${monthText}</span> 
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+							<div class="v-btn__content" data-no-activator="" style="color: ${primaryThemeColor};">
+								<span style="color: ${primaryThemeColor};">${monthText}</span> 
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: ${primaryThemeColor};" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 							</div>
 						`
 
@@ -167,12 +168,12 @@ export function useMonthButtonCustomization(
 						)
 						yearBtnElement.setAttribute('data-ripple', 'false')
 						yearBtnElement.setAttribute('aria-label', displayedYear)
-						yearBtnElement.style.color = 'var(--v-theme-primary)'
+						yearBtnElement.style.color = primaryThemeColor
 
 						const yearButtonContentHTML = `
-							<div class="v-btn__content" data-no-activator="" style="color: var(--v-theme-primary);">
-								<span style="color: var(--v-theme-primary);">${displayedYear}</span> 
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: var(--v-theme-primary);" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+							<div class="v-btn__content" data-no-activator="" style="color: ${primaryThemeColor};">
+								<span style="color: ${primaryThemeColor};">${displayedYear}</span> 
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" class="ms-1" style="fill: ${primaryThemeColor};" aria-hidden="true"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
 							</div>
 						`
 

package/src/components/DatePicker/playground/DatePickerHolidayRule.vue

@@ -135,7 +135,7 @@
 .holiday-list {
 	max-height: 200px;
 	overflow-y: auto;
-	background-color: #fff;
+	background-color: rgb(var(--v-theme-surface));
 	padding: 10px;
 	border-radius: 4px;
 	border: 1px solid #e0e0e0;

package/src/components/DialogBox/DialogBox.vue

@@ -244,8 +244,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens' as *;
-
 .sy-dialog-box-actions :deep(.v-btn) {
 	box-shadow: none;
 }
@@ -255,7 +253,7 @@
 }
 
 .v-btn--icon {
-	color: $colors-icon-base;
+	color: rgb(var(--v-theme-iconBase));
 	position: absolute;
 	right: 24px;
 }
@@ -285,7 +283,7 @@ h2 {
 	display: flex;
 	flex-direction: column;
 	justify-content: stretch;
-	gap: $spacing-small;
+	gap: 16px;
 }
 
 .sy-dialog-box-draggable .sy-dialog-box-title {
@@ -303,7 +301,7 @@ h2 {
 	user-select: none;
 }
 
-@media screen and (min-width: $container-mobile-max-width) {
+@media screen and (width >= 600px) {
 	.sy-dialog-box-actions-ctn {
 		flex-direction: row;
 	}

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

@@ -0,0 +1,76 @@
+import { h } from 'vue'
+import DialogBox from '../DialogBox.vue'
+
+const dialogTransitionOptions = {
+	global: {
+		stubs: {
+			'transition': false,
+			'transition-group': false,
+		},
+	},
+} as const
+
+function waitForDialogTransitionEnd() {
+	cy.get('.v-overlay__content')
+		.should('be.visible')
+		.and('not.have.class', 'dialog-transition-enter-active')
+}
+
+describe('DialogBox - Visual regression tests', () => {
+	it('displays the opened dialog box', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Confirmer la suppression',
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Êtes-vous sûr de vouloir supprimer cet élément ?'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-default')
+	})
+
+	it('displays the dialog box without actions', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Information',
+				'hideActions': true,
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Ceci est un message informatif.'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-no-actions')
+	})
+
+	it('displays the dialog box with custom texts', () => {
+		cy.mountWithVuetify(DialogBox, {
+			...dialogTransitionOptions,
+			props: {
+				'modelValue': true,
+				'title': 'Valider le formulaire',
+				'cancelBtnText': 'Annuler',
+				'confirmBtnText': 'Valider',
+				'onUpdate:modelValue': () => {},
+			},
+			slots: {
+				default: () => h('p', 'Souhaitez-vous valider ce formulaire ?'),
+			},
+		})
+
+		cy.get('.v-dialog').should('be.visible')
+		waitForDialogTransitionEnd()
+		cy.matchImageSnapshot('dialog-box-custom-texts')
+	})
+})

package/src/components/FileList/FileList.vue

@@ -19,8 +19,14 @@
 	const props = withDefaults(defineProps<{
 		uploadList: Item[]
 		locales?: typeof defaultLocales
+		seeLabel?: string
+		importLabel?: string
+		deleteLabel?: string
 	} & Widthable>(), {
 		locales: () => defaultLocales,
+		seeLabel: undefined,
+		importLabel: undefined,
+		deleteLabel: undefined,
 	})
 
 	const { widthStyles } = useWidthable(props)
@@ -51,6 +57,9 @@
 			:show-delete-btn="item.showDeleteBtn"
 			tag="li"
 			:locales="locales"
+			:see-label="seeLabel"
+			:import-label="importLabel"
+			:delete-label="deleteLabel"
 			@upload="() => $emit('upload', uploadList.find((i) => i.id === item.id) as Item)"
 			@preview="() => $emit('preview', uploadList.find((i) => i.id === item.id) as Item)"
 			@delete="() => $emit('delete', uploadList.find((i) => i.id === item.id) as Item)"
@@ -66,8 +75,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .upload-list {
 	display: flex;
 	flex-direction: column;

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -206,14 +206,12 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .file-item {
 	display: flex;
 	flex-direction: column;
-	gap: tokens.$gap-3;
-	padding-block: tokens.$padding-4;
-	border-bottom: 1px solid tokens.$colors-border-subdued;
+	gap: var(--v-gap-3);
+	padding-block: var(--v-padding-4);
+	border-bottom: 1px solid rgb(var(--v-theme-borderSubdued));
 
 	&:first-child:last-child {
 		border-bottom: none;
@@ -221,12 +219,12 @@
 }
 
 .file-item__title {
-	font-size: tokens.$font-size-body-text;
+	font-size: var(--v-fontSize-corpsDeTexte);
 }
 
 .file-item__name {
 	font-size: 0.875rem;
-	color: tokens.$colors-text-base;
+	color: rgb(var(--v-theme-textBase));
 }
 
 .file-item__description {
@@ -252,7 +250,7 @@
 
 .file-item__content {
 	display: flex;
-	gap: tokens.$gap-4;
+	gap: var(--v-gap-4);
 	align-items: center;
 }
 
@@ -263,9 +261,9 @@
 	justify-content: center;
 	margin-left: auto;
 	height: 100%;
-	gap: tokens.$gap-1;
+	gap: var(--v-gap-1);
 
-	@media screen and (min-width: tokens.$container-tablet-max-width) {
+	@media screen and (width >= 960px) {
 		flex-direction: row;
 	}
 }
@@ -280,18 +278,18 @@
 
 .file-item__message {
 	font-size: 0.875rem;
-	color: tokens.$colors-text-subdued;
+	color: rgb(var(--v-theme-textSubdued));
 }
 
 .file-item__message-success,
 .file-item__message-error {
-	margin-top: tokens.$gap-3;
+	margin-top: var(--v-gap-3);
 }
 
 .file-item__message-error {
 	display: flex;
 	align-items: center;
-	gap: tokens.$gap-4;
+	gap: var(--v-gap-4);
 }
 
 </style>

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

@@ -135,6 +135,53 @@ describe('FileList', () => {
 		expect(wrapper.emitted('preview')?.[0]?.[0]).toEqual(fileItem2)
 	})
 
+	it('forwards seeLabel, importLabel, deleteLabel to all items', () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{ id: 'file1', title: 'file1', state: 'initial' },
+					{ id: 'file2', title: 'file2', state: 'success', showDeleteBtn: true, showPreviewBtn: true },
+				],
+				importLabel: 'Ajouter',
+				seeLabel: 'Consulter',
+				deleteLabel: 'Retirer',
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.find('.file-item__action-upload').text()).toContain('Ajouter')
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.find('.file-item__action-preview').text()).toContain('Consulter')
+		expect(item2!.find('.file-item__action-delete').text()).toContain('Retirer')
+	})
+
+	it('uses locales for button labels when individual label props are not passed', () => {
+		const customLocales = {
+			...locales,
+			import: 'Déposer',
+			see: 'Afficher',
+			delete: 'Effacer',
+		}
+
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{ id: 'file1', title: 'file1', state: 'initial' },
+					{ id: 'file2', title: 'file2', state: 'success', showDeleteBtn: true, showPreviewBtn: true },
+				],
+				locales: customLocales,
+			},
+		})
+
+		const item1 = wrapper.findAll('.file-item').at(0)
+		expect(item1!.find('.file-item__action-upload').text()).toContain('Importer le fichier')
+
+		const item2 = wrapper.findAll('.file-item').at(1)
+		expect(item2!.find('.file-item__action-preview').text()).toContain('Voir le fichier')
+		expect(item2!.find('.file-item__action-delete').text()).toContain('Supprimer le fichier')
+	})
+
 	it('shows when a file is optional', () => {
 		const wrapper = mount(FileList, {
 			props: {