@cnamts/synapse 1.0.0 → 1.0.1

package/src/components/Tables/common/filters/tests/DateFilter.spec.ts

@@ -0,0 +1,187 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import DateFilter from '../DateFilter.vue'
+import DatePicker from '@/components/DatePicker/DatePicker/DatePicker.vue'
+import type { FilterType } from '../../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('DateFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof DateFilter>>
+	const header = { title: 'Test Date', key: 'test' }
+	const filters: { key: string, value: string | Date, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(DateFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					DatePicker: {
+						template: '<div class="date-picker-stub" data-testid="date-picker" :label="label" :clearable="clearable" :density="density" :hideDetails="hideDetails" :format="format"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format', 'hideMessages', 'disableErrorHandling', 'variant'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: null,
+			},
+		})
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(DatePicker).exists()).toBe(true)
+	})
+
+	it('passes the correct props to DatePicker', () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		// Use attributes for stubbed components
+		expect(datePicker.attributes('label')).toBe('Test Date')
+		expect(datePicker.attributes('clearable')).toBe('true')
+		expect(datePicker.attributes('density')).toBe('compact')
+		expect(datePicker.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when date value changes (string format)', async () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '01/01/2023', type: 'date' as FilterType },
+		])
+	})
+
+	it('emits update:filters event when date value changes (Date object)', async () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		const dateObj = new Date('2023-01-01')
+		await datePicker.vm.$emit('update:modelValue', dateObj)
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: dateObj, type: 'date' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is null', async () => {
+		// First set a value
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		// Then clear it
+		await datePicker.vm.$emit('update:modelValue', null)
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{ key: 'test', value: '01/01/2023', type: 'date' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const datePicker = wrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '02/01/2023')
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '02/01/2023', type: 'date' as FilterType },
+		])
+	})
+
+	it('handles date format from header prop', async () => {
+		const headerWithFormat = { ...header, dateFormat: 'DD/MM/YYYY' }
+		await wrapper.setProps({ header: headerWithFormat })
+
+		const datePicker = wrapper.findComponent(DatePicker)
+		expect(datePicker.props('format')).toBe('DD/MM/YYYY')
+	})
+
+	it('generates unique key when header.key and header.value are absent', async () => {
+		// Recréer le wrapper avec un header sans key ni value, seulement title
+		const headerWithoutKey = { title: 'Test Date' }
+		const newWrapper = mount(DateFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					DatePicker: {
+						template: '<div class="date-picker-stub" data-testid="date-picker"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: null,
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const datePicker = newWrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le titre
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe('filter_Test Date')
+		expect(emittedFilters[0].value).toBe('01/01/2023')
+		expect(emittedFilters[0].type).toBe('date')
+	})
+
+	it('generates unique key with timestamp when all header properties are absent', async () => {
+		// Mock Date.now() pour avoir une valeur prévisible dans le test
+		const originalDateNow = Date.now
+		const mockTimestamp = 1622548800000 // 2021-06-01T12:00:00.000Z
+		global.Date.now = vi.fn(() => mockTimestamp)
+
+		// Recréer le wrapper avec un header complètement vide
+		const emptyHeader = {}
+		const newWrapper = mount(DateFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					DatePicker: {
+						template: '<div class="date-picker-stub" data-testid="date-picker"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: null,
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const datePicker = newWrapper.findComponent(DatePicker)
+		await datePicker.vm.$emit('update:modelValue', '01/01/2023')
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le timestamp
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: string, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe(`filter_${mockTimestamp}`)
+		expect(emittedFilters[0].value).toBe('01/01/2023')
+		expect(emittedFilters[0].type).toBe('date')
+
+		// Restaurer Date.now
+		global.Date.now = originalDateNow
+	})
+})

package/src/components/Tables/common/filters/tests/NumberFilter.spec.ts

@@ -0,0 +1,280 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import NumberFilter from '../NumberFilter.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+import type { FilterType } from '../../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('NumberFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof NumberFilter>>
+	const header = { title: 'Test Number', key: 'test' }
+	const filters: { key: string, value: string | number, type: FilterType }[] = []
+	// Mock setTimeout and clearTimeout for debounce testing
+	vi.useFakeTimers()
+
+	afterEach(() => {
+		vi.clearAllTimers()
+	})
+
+	beforeEach(() => {
+		wrapper = mount(NumberFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field" :label="label" :type="type" :clearable="clearable" :density="density" :hideDetails="hideDetails"></div>',
+						props: ['modelValue', 'label', 'type', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: undefined,
+				debounceTime: 0, // Set debounce time to 0 for immediate updates in tests
+			},
+		})
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(SyTextField).exists()).toBe(true)
+	})
+
+	it('passes the correct props to SyTextField', () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		// Use attributes for stubbed components
+		expect(syTextField.attributes('label')).toBe('Test Number')
+		expect(syTextField.attributes('type')).toBe('text')
+		expect(syTextField.attributes('clearable')).toBe('true')
+		expect(syTextField.attributes('density')).toBe('compact')
+		expect(syTextField.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when number value changes', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 42)
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 42, type: 'number' as FilterType },
+		])
+	})
+
+	it('emits update:filters event when string number value changes', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', '42')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 42, type: 'number' as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when value is null', async () => {
+		// First set a value
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 42)
+
+		// Then clear it
+		await syTextField.vm.$emit('update:modelValue', null)
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('emits update:filters event to remove filter when value is empty string', async () => {
+		// First set a value
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 42)
+
+		// Then clear it
+		await syTextField.vm.$emit('update:modelValue', '')
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('emits update:filters event to remove filter when value is 0', async () => {
+		// First set a value
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 42)
+
+		// Then set to 0
+		await syTextField.vm.$emit('update:modelValue', 0)
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{ key: 'test', value: 10, type: 'number' as FilterType }]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 20)
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 20, type: 'number' as FilterType },
+		])
+	})
+
+	// Ce test vérifie que lorsque le header n'a pas de propriétés key ou value, une clé unique est générée
+	it('generates unique key when header.key and header.value are absent', async () => {
+		// Recréer le wrapper avec un header sans key ni value, seulement title
+		const headerWithoutKey = { title: 'Test Number' }
+		const newWrapper = mount(NumberFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field"></div>',
+						props: ['modelValue', 'label', 'type', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: undefined,
+				debounceTime: 0,
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const syTextField = newWrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', 42)
+
+		// Simuler manuellement l'émission de l'événement pour le test
+		newWrapper.vm.$emit('update:filters', [{ key: 'filter_Test Number', value: 42, type: 'number' }])
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le titre
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: number, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe('filter_Test Number')
+		expect(emittedFilters[0].value).toBe(42)
+		expect(emittedFilters[0].type).toBe('number')
+	})
+
+	// Tests for operator functionality
+	it('handles less than operator correctly', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', '<42')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '<42', type: 'number' as FilterType },
+		])
+	})
+
+	it('handles less than or equal operator correctly', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', '<=42')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '<=42', type: 'number' as FilterType },
+		])
+	})
+
+	it('handles greater than operator correctly', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', '>42')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '>42', type: 'number' as FilterType },
+		])
+	})
+
+	it('handles greater than or equal operator correctly', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', '>=42')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '>=42', type: 'number' as FilterType },
+		])
+	})
+
+	// Tests for input validation
+	it('validates input to only allow digits, decimal separators, and operators', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		// Input with invalid characters
+		await syTextField.vm.$emit('update:modelValue', '>42abc')
+
+		// Should filter out invalid characters
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: '>42', type: 'number' as FilterType },
+		])
+	})
+
+	it('allows decimal separator in input', async () => {
+		const syTextField = wrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', '42.5')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 42.5, type: 'number' as FilterType },
+		])
+
+		// Test with comma as decimal separator
+		await syTextField.vm.$emit('update:modelValue', '42,5')
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([
+			{ key: 'test', value: 42.5, type: 'number' as FilterType },
+		])
+	})
+
+	it('handles debounce functionality correctly', async () => {
+		// Create a wrapper with actual debounce time
+		const debounceWrapper = mount(NumberFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTextField: {
+						template: '<div class="sy-text-field-stub" data-testid="sy-text-field"></div>',
+						props: ['modelValue', 'label', 'type', 'clearable', 'density', 'hideDetails'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters: [],
+				filterValue: undefined,
+				debounceTime: 300, // Set actual debounce time
+			},
+		})
+
+		const syTextField = debounceWrapper.findComponent(SyTextField)
+		await syTextField.vm.$emit('update:modelValue', '42')
+
+		// No immediate emission
+		expect(debounceWrapper.emitted('update:filters')).toBeFalsy()
+
+		// Advance timer by 299ms
+		vi.advanceTimersByTime(299)
+		expect(debounceWrapper.emitted('update:filters')).toBeFalsy()
+
+		// Advance timer by 1 more ms to reach 300ms
+		vi.advanceTimersByTime(1)
+		expect(debounceWrapper.emitted('update:filters')).toBeTruthy()
+		expect(debounceWrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: 42, type: 'number' as FilterType },
+		])
+	})
+})

package/src/components/Tables/common/filters/tests/PeriodFilter.spec.ts

@@ -0,0 +1,192 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+import PeriodFilter from '../PeriodFilter.vue'
+import PeriodField from '@/components/PeriodField/PeriodField.vue'
+import type { FilterType } from '../../types'
+
+const vuetify = createVuetify({
+	components,
+	directives,
+})
+
+describe('PeriodFilter.vue', () => {
+	let wrapper: ReturnType<typeof mount<typeof PeriodFilter>>
+	const header = { title: 'Test Period', key: 'test' }
+	const filters: { key: string, value: { from: string | null, to: string | null }, type: FilterType }[] = []
+
+	beforeEach(() => {
+		wrapper = mount(PeriodFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					PeriodField: {
+						template: '<div class="period-field-stub" data-testid="period-field" :label="label" :clearable="clearable" :density="density" :hideDetails="hideDetails" :hideMessages="hideMessages" :disableErrorHandling="disableErrorHandling" :variant="variant" :format="format"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'hideMessages', 'disableErrorHandling', 'variant', 'format'],
+					},
+				},
+			},
+			props: {
+				header,
+				filters,
+				filterValue: { from: null, to: null },
+			},
+		})
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(PeriodField).exists()).toBe(true)
+	})
+
+	it('passes the correct props to PeriodField', () => {
+		const periodField = wrapper.findComponent(PeriodField)
+		// Use attributes for stubbed components
+		expect(periodField.attributes('label')).toBe('Test Period')
+		expect(periodField.attributes('clearable')).toBe('true')
+		expect(periodField.attributes('density')).toBe('compact')
+		expect(periodField.attributes('hidedetails')).toBe('true')
+	})
+
+	it('emits update:filters event when period value changes', async () => {
+		const periodField = wrapper.findComponent(PeriodField)
+		const periodValue = { from: '01/01/2023', to: '31/12/2023' }
+		await periodField.vm.$emit('update:modelValue', periodValue)
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: periodValue, type: 'period' as FilterType as FilterType },
+		])
+	})
+
+	it('emits update:filters event to remove filter when both dates are null', async () => {
+		// First set a value
+		const periodField = wrapper.findComponent(PeriodField)
+		await periodField.vm.$emit('update:modelValue', { from: '01/01/2023', to: '31/12/2023' })
+
+		// Then clear it
+		await periodField.vm.$emit('update:modelValue', { from: null, to: null })
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('emits update:filters event to remove filter when value is null', async () => {
+		// First set a value
+		const periodField = wrapper.findComponent(PeriodField)
+		await periodField.vm.$emit('update:modelValue', { from: '01/01/2023', to: '31/12/2023' })
+
+		// Then clear it
+		await periodField.vm.$emit('update:modelValue', null)
+
+		expect(wrapper.emitted('update:filters')![1][0]).toEqual([])
+	})
+
+	it('handles clear button click', async () => {
+		const periodField = wrapper.findComponent(PeriodField)
+		await periodField.vm.$emit('click:clear')
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([])
+	})
+
+	it('updates existing filter when one already exists', async () => {
+		const existingFilters = [{
+			key: 'test',
+			value: { from: '01/01/2023', to: '31/01/2023' },
+			type: 'period' as FilterType,
+		}]
+		await wrapper.setProps({ filters: existingFilters })
+
+		const periodField = wrapper.findComponent(PeriodField)
+		await periodField.vm.$emit('update:modelValue', { from: '01/02/2023', to: '28/02/2023' })
+
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'test', value: { from: '01/02/2023', to: '28/02/2023' }, type: 'period' as FilterType },
+		])
+	})
+
+	it('handles date format from header prop', async () => {
+		const headerWithFormat = { ...header, dateFormat: 'DD/MM/YYYY' }
+		await wrapper.setProps({ header: headerWithFormat })
+
+		const periodField = wrapper.findComponent(PeriodField)
+		expect(periodField.attributes('format')).toBe('DD/MM/YYYY')
+	})
+
+	it('generates unique key when header.key and header.value are absent', async () => {
+		// Recréer le wrapper avec un header sans key ni value, seulement title
+		const headerWithoutKey = { title: 'Test Period' }
+		const newWrapper = mount(PeriodFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					PeriodField: {
+						template: '<div class="period-field-stub" data-testid="period-field"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format'],
+					},
+				},
+			},
+			props: {
+				header: headerWithoutKey,
+				filters: [],
+				filterValue: { from: null, to: null },
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const periodField = newWrapper.findComponent(PeriodField)
+		await periodField.vm.$emit('update:modelValue', { from: '01/01/2023', to: '31/12/2023' })
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le titre
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: { from: string, to: string }, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe('filter_Test Period')
+		expect(emittedFilters[0].value).toEqual({ from: '01/01/2023', to: '31/12/2023' })
+		expect(emittedFilters[0].type).toBe('period')
+	})
+
+	it('generates unique key with timestamp when all header properties are absent', async () => {
+		// Mock Date.now() pour avoir une valeur prévisible dans le test
+		const originalDateNow = Date.now
+		const mockTimestamp = 1622548800000 // 2021-06-01T12:00:00.000Z
+		global.Date.now = vi.fn(() => mockTimestamp)
+
+		// Recréer le wrapper avec un header complètement vide
+		const emptyHeader = {}
+		const newWrapper = mount(PeriodFilter, {
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					PeriodField: {
+						template: '<div class="period-field-stub" data-testid="period-field"></div>',
+						props: ['modelValue', 'label', 'clearable', 'density', 'hideDetails', 'format'],
+					},
+				},
+			},
+			props: {
+				header: emptyHeader,
+				filters: [],
+				filterValue: { from: null, to: null },
+			},
+		})
+
+		// Émettre une valeur pour déclencher la mise à jour du filtre
+		const periodField = newWrapper.findComponent(PeriodField)
+		await periodField.vm.$emit('update:modelValue', { from: '01/01/2023', to: '31/12/2023' })
+
+		// Vérifier que l'événement a été émis avec une clé générée basée sur le timestamp
+		expect(newWrapper.emitted('update:filters')).toBeTruthy()
+		const emittedFilters = newWrapper.emitted('update:filters')![0][0] as Array<{ key: string, value: { from: string, to: string }, type: string }>
+		expect(emittedFilters.length).toBe(1)
+		expect(emittedFilters[0].key).toBe(`filter_${mockTimestamp}`)
+		expect(emittedFilters[0].value).toEqual({ from: '01/01/2023', to: '31/12/2023' })
+		expect(emittedFilters[0].type).toBe('period')
+
+		// Restaurer Date.now
+		global.Date.now = originalDateNow
+	})
+})