@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/Tables/common/tests/SyTableFilter.spec.ts

@@ -0,0 +1,312 @@
+import { describe, it, expect } from 'vitest'
+import { shallowMount, flushPromises } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+import SyTableFilter from '../SyTableFilter.vue'
+import type { FilterOption, TableColumnHeader, FilterType } from '../types'
+
+// Using shallowMount will automatically stub all child components
+
+describe('SyTableFilter', () => {
+	it('renders text filter correctly', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Name',
+			key: 'name',
+			filterable: true,
+			filterType: 'text',
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Need to wait for async components to load
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
+		expect(textFilter.exists()).toBe(true)
+	})
+
+	it('renders text filter by default', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Name',
+			key: 'name',
+			filterable: true,
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
+		expect(textFilter.exists()).toBe(true)
+	})
+
+	it('renders number filter correctly', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Age',
+			key: 'age',
+			filterable: true,
+			filterType: 'number',
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		const numberFilter = wrapper.findComponent({ name: 'NumberFilter' })
+		expect(numberFilter.exists()).toBe(true)
+	})
+
+	it('renders select filter correctly', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Department',
+			key: 'department',
+			filterable: true,
+			filterType: 'select',
+			filterOptions: [
+				{ text: 'IT', value: 'IT' },
+				{ text: 'HR', value: 'HR' },
+				{ text: 'Finance', value: 'Finance' },
+			],
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		const selectFilter = wrapper.findComponent({ name: 'SelectFilter' })
+		expect(selectFilter.exists()).toBe(true)
+	})
+
+	it('renders date filter correctly', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Birth Date',
+			key: 'birthDate',
+			filterable: true,
+			filterType: 'date',
+			dateFormat: 'DD/MM/YYYY',
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		const dateFilter = wrapper.findComponent({ name: 'DateFilter' })
+		expect(dateFilter.exists()).toBe(true)
+	})
+
+	it('renders period filter correctly', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Vacation Period',
+			key: 'vacationPeriod',
+			filterable: true,
+			filterType: 'period',
+			dateFormat: 'DD/MM/YYYY',
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		const periodFilter = wrapper.findComponent({ name: 'PeriodFilter' })
+		expect(periodFilter.exists()).toBe(true)
+	})
+
+	it('emits update:filters event when text filter changes', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Name',
+			key: 'name',
+			filterable: true,
+			filterType: 'text',
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
+		expect(textFilter.exists()).toBe(true)
+
+		// Emit the update:filters event from the TextFilter component
+		await textFilter.vm.$emit('update:filters', [
+			{ key: 'name', value: 'John', type: 'text' },
+		])
+
+		expect(wrapper.emitted('update:filters')).toBeTruthy()
+		expect(wrapper.emitted('update:filters')![0][0]).toEqual([
+			{ key: 'name', value: 'John', type: 'text' },
+		])
+	})
+
+	it('updates existing filter instead of creating duplicate', async () => {
+		const filters: FilterOption[] = [
+			{ key: 'name', value: 'John', type: 'text' },
+		]
+		const header: TableColumnHeader = {
+			title: 'Name',
+			key: 'name',
+			filterable: true,
+			filterType: 'text',
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
+		expect(textFilter.exists()).toBe(true)
+
+		// Emit the update:filters event from the TextFilter component
+		await textFilter.vm.$emit('update:filters', [
+			{ key: 'name', value: 'Jane', type: 'text' },
+		])
+
+		const emitted = wrapper.emitted('update:filters')
+		expect(emitted).toBeTruthy()
+		if (emitted && Array.isArray(emitted[0])) {
+			expect(emitted[0][0]).toEqual([{ key: 'name', value: 'Jane', type: 'text' }])
+			expect((emitted[0][0] as FilterOption[]).length).toBe(1) // Should still have only one filter
+		}
+	})
+
+	it('removes filter when value is cleared', async () => {
+		const filters: FilterOption[] = [
+			{ key: 'name', value: 'John', type: 'text' },
+		]
+		const header: TableColumnHeader = {
+			title: 'Name',
+			key: 'name',
+			filterable: true,
+			filterType: 'text',
+		}
+
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const textFilter = wrapper.findComponent({ name: 'TextFilter' })
+		expect(textFilter.exists()).toBe(true)
+
+		// Emit the update:filters event from the TextFilter component
+		await textFilter.vm.$emit('update:filters', [])
+
+		const emitted = wrapper.emitted('update:filters')
+		expect(emitted).toBeTruthy()
+		if (emitted && Array.isArray(emitted[0])) {
+			expect(emitted[0][0]).toEqual([]) // Empty array, filter removed
+		}
+	})
+
+	it('renders custom filter slot correctly', async () => {
+		const filters: FilterOption[] = []
+		const header: TableColumnHeader = {
+			title: 'Custom',
+			key: 'custom',
+			filterable: true,
+			filterType: 'custom' as FilterType,
+		}
+
+		const customSlotText = 'Mon filtre personnalisé'
+		const wrapper = shallowMount(SyTableFilter, {
+			props: {
+				filters,
+				header,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				'custom-filter': `<div class="test-custom-filter">${customSlotText}</div>`,
+			},
+		})
+
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		// Vérifier que le slot personnalisé est rendu
+		const customFilter = wrapper.find('.test-custom-filter')
+		expect(customFilter.exists()).toBe(true)
+		expect(customFilter.text()).toBe(customSlotText)
+	})
+})

package/src/components/Tables/common/tests/SyTablePagination.spec.ts

@@ -0,0 +1,170 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import SyTablePagination from '../SyTablePagination.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('SyTablePagination.vue', () => {
+	it('renders the component with default props', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.find('.sy-table-pagination').exists()).toBe(true)
+	})
+
+	it('displays pagination when there are multiple pages', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.pagination').exists()).toBe(true)
+	})
+
+	it('does not display pagination navigation when there is only one page', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 5,
+				pageCount: 1,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-table-pagination').exists()).toBe(true)
+		expect(wrapper.find('.pagination').exists()).toBe(false)
+	})
+
+	it('always shows items per page selector even with only one page', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 5,
+				pageCount: 1,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.find('.sy-table-pagination').exists()).toBe(true)
+		expect(wrapper.find('.info').exists()).toBe(true)
+		expect(wrapper.findComponent({ name: 'SySelect' }).exists()).toBe(true)
+	})
+
+	it('includes standard options and current itemsPerPage value', async () => {
+		// Test with standard value
+		const wrapper1 = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10, // Standard value
+				itemsLength: 42,
+				pageCount: 5,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const vm1 = wrapper1.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+		expect(vm1.itemsPerPageOptions).toBeDefined()
+
+		const options1 = vm1.itemsPerPageOptions
+		// Should have standard options 5, 10, 25, 50, 100) plus the 'All' option (-1)
+		expect(options1.map(o => o.value).sort((a, b) => a - b)).toEqual([-1, 5, 10, 25, 50, 100])
+
+		// Test with custom value
+		const wrapper2 = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 42, // Custom value
+				itemsLength: 100,
+				pageCount: 5,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const vm2 = wrapper2.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
+		const options2 = vm2.itemsPerPageOptions
+
+		// Should include the custom value (42)
+		const hasCustomValue = options2.some(option => option.value === 42)
+		expect(hasCustomValue).toBe(true)
+
+		// Should have standard options + custom value + 'All' option
+		expect(options2.map(o => o.value).sort((a, b) => a - b)).toEqual([-1, 5, 10, 25, 42, 50, 100])
+	})
+
+	it('shows correct range when "All" is selected', async () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: -1, // "All" option
+				itemsLength: 42,
+				pageCount: 1,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const infoText = wrapper.find('.info').text()
+		expect(infoText).toContain('1-42')
+	})
+
+	it('emits update:page event when nextPage method is called', async () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await (wrapper.vm as unknown as { nextPage: () => Promise<void> }).nextPage()
+
+		expect(wrapper.emitted('update:page')).toBeTruthy()
+		expect(wrapper.emitted('update:page')![0]).toEqual([2])
+	})
+
+	it('has the correct structure for items per page selection', () => {
+		const wrapper = mount(SyTablePagination, {
+			props: {
+				page: 1,
+				itemsPerPage: 10,
+				itemsLength: 100,
+				pageCount: 10,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.rows-per-page-label').exists()).toBe(true)
+
+		const labelText = wrapper.find('.rows-per-page-label').text()
+		expect(labelText).toContain('Lignes par page')
+	})
+})

package/src/components/Tables/common/tests/filterByRange.spec.ts

@@ -0,0 +1,215 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { afterAll, describe, expect, it, vi } from 'vitest'
+import SyTable from '../../SyTable/SyTable.vue'
+import DateFilter from '../filters/DateFilter.vue'
+import NumberFilter from '../filters/NumberFilter.vue'
+import PeriodFilter from '../filters/PeriodFilter.vue'
+import SelectFilter from '../filters/SelectFilter.vue'
+import TextFilter from '../filters/TextFilter.vue'
+
+const headers = [
+	{
+		title: 'Nom',
+		key: 'name',
+		filterable: true,
+		filterType: 'text' as const,
+	},
+	{
+		title: 'Date de naissance',
+		key: 'birthdate',
+		filterable: true,
+		filterType: 'period' as const,
+	},
+]
+
+const items = [
+	{
+		name: 'Alice',
+		birthdate: '1990-01-01',
+	},
+	{
+		name: 'Bob',
+		birthdate: '1985-05-15',
+	},
+	{
+		name: 'Charlie',
+		birthdate: '2000-12-31',
+	},
+	{
+		name: 'David',
+		birthdate: '1995-07-20',
+	},
+]
+
+describe('SyTable - filterByRange', () => {
+	vi.mock('../../common/filters/getFilterComponent', () => {
+		return {
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			default: (filterType?: string, filterOptions?: unknown) => {
+				if (filterType === 'select') {
+					return SelectFilter
+				}
+				else if (filterType === 'date') {
+					return DateFilter
+				}
+				else if (filterType === 'period') {
+					return PeriodFilter
+				}
+				else if (filterType === 'number') {
+					return NumberFilter
+				}
+				else {
+					return TextFilter
+				}
+			},
+		}
+	})
+	afterAll(() => {
+		vi.resetModules()
+	})
+
+	it('filter by max date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Alice', 'Bob', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Charlie']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('filter by min date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1995')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Charlie', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Alice', 'Bob']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('filter by min and max date', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const expectedNames = ['Alice', 'Bob', 'Charlie', 'David']
+		expectedNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1989')
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		const filteredNames = ['Alice', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		const notFilteredNames = ['Charlie', 'Bob']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+	})
+
+	it('updates the items when date changes', async () => {
+		const wrapper = mount(SyTable, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				headers,
+				items,
+				showFilters: true,
+				suffix: 'test',
+			},
+		})
+
+		const startDate = wrapper.find('input[aria-label="Début"]')
+		await startDate.setValue('01/01/1990')
+
+		const endDate = wrapper.find('input[aria-label="Fin"]')
+		await endDate.setValue('01/01/2000')
+
+		const textContent = wrapper.text()
+
+		let filteredNames = ['Alice', 'David']
+		filteredNames.forEach((element) => {
+			expect(textContent).toContain(element)
+		})
+		let notFilteredNames = ['Bob', 'Charlie']
+		notFilteredNames.forEach((element) => {
+			expect(textContent).not.toContain(element)
+		})
+
+		await endDate.setValue('01/01/1995')
+
+		filteredNames = ['Alice']
+		filteredNames.forEach((element) => {
+			expect(wrapper.text()).toContain(element)
+		})
+		notFilteredNames = ['Bob', 'Charlie', 'David']
+		notFilteredNames.forEach((element) => {
+			expect(wrapper.text()).not.toContain(element)
+		})
+	})
+})