@cnamts/synapse 1.0.0 → 1.0.2

package/src/components/Tables/SyServerTable/tests/SyServerTable.spec.ts

@@ -0,0 +1,702 @@
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import { vuetify } from '@tests/unit/setup'
+import { LocalStorageUtility } from '@/utils/localStorageUtility'
+import type { DataOptions, FilterOption } from '@/components/Tables/common/types'
+
+import SyServerTable from '../SyServerTable.vue'
+import SyTableFilter from '../../common/SyTableFilter.vue'
+
+vi.mock('@/utils/localStorageUtility')
+
+const fakeItems = [
+	{
+		id: 1,
+		name: 'John Doe',
+		age: 25,
+	},
+	{
+		id: 2,
+		name: 'Jane Doe',
+		age: 30,
+	},
+	{
+		id: 3,
+		name: 'John Smith',
+		age: 35,
+	},
+]
+
+// Define a more complete DataTableHeaders type for testing
+interface TestDataTableHeader {
+	title: string
+	key: string
+	hidden?: boolean
+	order?: number
+}
+
+const headers: TestDataTableHeader[] = [
+	{
+		title: 'ID',
+		key: 'id',
+	},
+	{
+		title: 'Name',
+		key: 'name',
+	},
+	{
+		title: 'Age',
+		key: 'age',
+	},
+]
+
+describe('SyServerTable', () => {
+	beforeAll(() => {
+		// Mock visualViewport for Vuetify's VMenu component
+		global.visualViewport = {
+			width: 1024,
+			height: 768,
+			scale: 1,
+			offsetLeft: 0,
+			offsetTop: 0,
+			pageLeft: 0,
+			pageTop: 0,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn(),
+			onresize: null,
+			onscroll: null,
+		}
+	})
+
+	afterEach(() => {
+		vi.resetAllMocks()
+	})
+
+	it('renders correctly with default props', () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: 10,
+				suffix: 'test',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.find('.sy-server-table').exists()).toBe(true)
+		expect(wrapper.find('table').exists()).toBe(true)
+		expect(wrapper.text()).toContain('John Doe')
+	})
+
+	it('accepts both old and new headers format', () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: 10,
+				suffix: 'test',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: [
+					{
+						text: 'ID',
+						key: 'id',
+					},
+					{
+						title: 'NAME',
+						key: 'name',
+					},
+					{
+						key: 'age',
+					},
+				],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toContain('John Doe')
+	})
+
+	it('stores the options in local storage', async () => {
+		const setItemMock = vi.spyOn(LocalStorageUtility.prototype, 'setItem')
+
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {
+					sortBy: [{ key: 'name', order: 'asc' }],
+				},
+				serverItemsLength: 10,
+				suffix: 'test-server-storage',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.setProps({
+			options: {
+				sortBy: [{ key: 'name', order: 'desc' }],
+			},
+		})
+
+		expect(setItemMock).toHaveBeenCalledWith(
+			'server-table-test-server-storage',
+			expect.objectContaining({
+				sortBy: [
+					{
+						key: 'name',
+						order: 'desc',
+					},
+				],
+				itemsLength: 10,
+			}),
+		)
+	})
+
+	it('emits update:options event when sorting changes', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: 10,
+				suffix: 'test',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Simulate a sort event from VDataTableServer
+		await wrapper.findComponent({ name: 'VDataTableServer' }).vm.$emit('update:options', {
+			sortBy: [{ key: 'name', order: 'asc' }],
+		})
+
+		const emittedOptions = wrapper.emitted('update:options')
+		expect(emittedOptions).toBeTruthy()
+	})
+
+	it('passes itemsPerPage prop correctly', () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: { itemsPerPage: 5 } as DataOptions,
+				serverItemsLength: 10,
+				suffix: 'test',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const dataTableServer = wrapper.findComponent({ name: 'VDataTableServer' })
+		expect(dataTableServer.props('itemsPerPage')).toBe(5)
+	})
+
+	it('passes serverItemsLength correctly', () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: 25,
+				suffix: 'test',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const dataTableServer = wrapper.findComponent({ name: 'VDataTableServer' })
+		expect(dataTableServer.props('itemsLength')).toBe(25)
+	})
+
+	it('should show filters when showFilters prop is true', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				showFilters: true,
+				serverItemsLength: 10,
+				suffix: 'test',
+				headers: [
+					{
+						title: 'Name',
+						key: 'name',
+						filterable: true,
+						filterType: 'text',
+					},
+					{
+						title: 'Age',
+						key: 'age',
+						filterable: true,
+						filterType: 'number',
+					},
+				],
+				items: fakeItems,
+			},
+			global: {
+				plugins: [vuetify],
+				stubs: {
+					SyTableFilter: true,
+				},
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const filterComponents = wrapper.findAllComponents({ name: 'SyTableFilter' })
+		expect(filterComponents.length).toBeGreaterThan(0)
+	})
+
+	it('updates filters when SyTableFilter emits update:filters', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				showFilters: true,
+				serverItemsLength: 10,
+				suffix: 'test',
+				headers: [
+					{
+						title: 'Name',
+						key: 'name',
+						filterable: true,
+						filterType: 'text',
+					},
+				],
+				items: fakeItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		const filterComponent = wrapper.findComponent(SyTableFilter)
+		await filterComponent.vm.$emit('update:filters', [{ key: 'name', value: 'Jane', type: 'text' }])
+
+		// Check that the component emitted an update:options event with the correct filters
+		const emitted = wrapper.emitted('update:options')
+		expect(emitted).toBeTruthy()
+		if (emitted) {
+			const lastEmitted = emitted[emitted.length - 1][0] as { filters?: FilterOption[] }
+			expect(lastEmitted).toHaveProperty('filters')
+			expect(lastEmitted.filters).toEqual([{ key: 'name', value: 'Jane', type: 'text' }])
+		}
+	})
+
+	it('should show reset filters button when filters are applied', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {
+					filters: [{ key: 'name', value: 'John', type: 'text' }],
+				},
+				showFilters: true,
+				serverItemsLength: 10,
+				suffix: 'test',
+				headers: [
+					{
+						title: 'Name',
+						key: 'name',
+						filterable: true,
+						filterType: 'text',
+					},
+				],
+				items: fakeItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const resetButton = wrapper.find('button')
+		expect(resetButton.exists()).toBe(true)
+		expect(resetButton.text()).toContain('Réinitialiser les filtres')
+	})
+
+	it('should reset filters when reset button is clicked', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {
+					filters: [{ key: 'name', value: 'John', type: 'text' }],
+				},
+				showFilters: true,
+				serverItemsLength: 10,
+				suffix: 'test',
+				headers: [
+					{
+						title: 'Name',
+						key: 'name',
+						filterable: true,
+						filterType: 'text',
+					},
+				],
+				items: fakeItems,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const resetButton = wrapper.find('button')
+		await resetButton.trigger('click')
+
+		const emitted = wrapper.emitted('update:options')
+		expect(emitted).toBeTruthy()
+		if (emitted) {
+			// Find the last emitted event
+			const lastEmitted = emitted[emitted.length - 1][0] as { filters?: FilterOption[] }
+			expect(lastEmitted).toHaveProperty('filters')
+			expect(lastEmitted.filters).toEqual([])
+		}
+	})
+
+	it('should expose filterItems method for external use', () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: 10,
+				suffix: 'test',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		// Check that the filterItems method is exposed
+		expect(wrapper.vm.filterItems).toBeDefined()
+		expect(typeof wrapper.vm.filterItems).toBe('function')
+	})
+
+	it('updates serverItemsLength when prop changes', async () => {
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: 10,
+				suffix: 'test',
+			},
+			attrs: {
+				items: fakeItems,
+				headers: headers,
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		await wrapper.setProps({
+			serverItemsLength: 20,
+		})
+
+		const dataTableServer = wrapper.findComponent({ name: 'VDataTableServer' })
+		expect(dataTableServer.props('itemsLength')).toBe(20)
+	})
+
+	it('forwards custom filter slot correctly', async () => {
+		// Define custom filter header
+		const customHeader = {
+			title: 'Status',
+			key: 'status',
+			filterable: true,
+			filterType: 'custom',
+		}
+
+		// Create test items with status
+		const itemsWithStatus = [
+			{
+				id: 1,
+				name: 'John Doe',
+				status: 'Actif',
+			},
+			{
+				id: 2,
+				name: 'Jane Doe',
+				status: 'Inactif',
+			},
+		]
+
+		// Custom slot content
+		const customSlotText = 'Custom Filter Content'
+
+		const wrapper = mount(SyServerTable, {
+			props: {
+				options: {} as DataOptions,
+				serverItemsLength: 2,
+				suffix: 'test-custom-filter',
+				showFilters: true,
+			},
+			attrs: {
+				items: itemsWithStatus,
+				headers: [customHeader],
+			},
+			global: {
+				plugins: [vuetify],
+			},
+			slots: {
+				'filter.custom': `<div class="test-custom-filter">${customSlotText}</div>`,
+			},
+		})
+
+		// Wait for component to render
+		await wrapper.vm.$nextTick()
+
+		// Find SyTableFilter component
+		const tableFilter = wrapper.findComponent(SyTableFilter)
+		expect(tableFilter.exists()).toBe(true)
+
+		// Check if the custom filter slot is forwarded correctly
+		const customFilterSlot = wrapper.find('.test-custom-filter')
+		expect(customFilterSlot.exists()).toBe(true)
+		expect(customFilterSlot.text()).toBe(customSlotText)
+	})
+
+	describe('SyServerTable Checkbox Selection', () => {
+		it('enables selection when showSelect is true', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: true,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that the VDataTableServer has showSelect prop set to true
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('showSelect')).toBe(true)
+		})
+
+		it('disables selection when showSelect is false', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: false,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that the VDataTableServer has showSelect prop set to false
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('showSelect')).toBe(false)
+		})
+
+		it('passes the correct item-value function to the data table', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: true,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Access the internal getItemValue function
+			// Since it's not exposed, we'll test the selection behavior instead
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('itemValue')).toBeDefined()
+
+			// Instead of testing the internal function directly, we'll verify the component works correctly
+			// by checking if the data table has the correct props
+			expect(dataTable.props('showSelect')).toBe(true)
+		})
+
+		it('properly binds the v-model for selection', async () => {
+			const selectedItems = [fakeItems[0].id, fakeItems[2].id]
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					items: fakeItems,
+					serverItemsLength: fakeItems.length,
+					showSelect: true,
+					modelValue: selectedItems,
+					suffix: '',
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Check that the VDataTableServer has the correct model value
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('modelValue')).toEqual(selectedItems)
+		})
+
+		it('exposes the toggleAllRows method', async () => {
+			const wrapper = mount(SyServerTable, {
+				props: {
+					headers,
+					'items': fakeItems,
+					'serverItemsLength': fakeItems.length,
+					'showSelect': true,
+					'modelValue': [],
+					'suffix': '',
+					'onUpdate:modelValue': (val: unknown[]) => {
+						wrapper.setProps({ modelValue: val })
+					},
+				},
+				global: {
+					plugins: [vuetify],
+				},
+			})
+
+			// Since toggleAllRows is not exposed, we'll test if the component renders correctly
+			// and has the expected structure for selection
+			const dataTable = wrapper.findComponent({ name: 'VDataTableServer' })
+			expect(dataTable.props('showSelect')).toBe(true)
+		})
+	})
+
+	describe('Column management', () => {
+		it('should hide a column when hideColumn is called', async () => {
+			// Create a mock for OrganizeColumns component
+			const mockOrganizeColumns = {
+				name: 'OrganizeColumns',
+				props: ['headers'],
+				template: '<div></div>',
+				emits: ['update:headers'],
+			}
+
+			// Create test items that will ensure all columns are rendered
+			const testItems = [
+				{ id: 1, name: 'Test 1', age: 25 },
+				{ id: 2, name: 'Test 2', age: 30 },
+			]
+
+			const wrapper = mount(SyServerTable, {
+				props: {
+					options: {} as DataOptions,
+					suffix: 'test',
+					headers: [...headers],
+					items: testItems,
+					serverItemsLength: testItems.length,
+					enableColumnControls: true,
+				},
+				global: {
+					plugins: [vuetify],
+					stubs: {
+						OrganizeColumns: mockOrganizeColumns,
+					},
+				},
+				attachTo: document.body, // Attach to DOM for better rendering
+			})
+
+			// Get the OrganizeColumns component
+			const organizeColumnsComponent = wrapper.findComponent({ name: 'OrganizeColumns' })
+			expect(organizeColumnsComponent.exists()).toBe(true)
+
+			// Verify initial column count
+			let columns = wrapper.findAll('th')
+			expect(columns.length).toBe(3)
+
+			// Simulate hiding a column by directly updating the headers
+			const updatedHeaders = [...headers] as TestDataTableHeader[]
+			updatedHeaders[1].hidden = true // Hide the Name column
+			organizeColumnsComponent.vm.$emit('update:headers', updatedHeaders)
+			await wrapper.vm.$nextTick()
+
+			// Check that the column is hidden
+			columns = wrapper.findAll('th')
+			expect(columns.length).toBe(2) // One less column should be visible
+		})
+
+		it('should move the column ID to the bottom', async () => {
+			// Import the sortHeaders function directly
+			const { sortHeaders } = await import('../../common/organizeColumns/sortHeaders')
+
+			// Add order property to headers for proper sorting
+			const headersWithOrder = headers.map((header, index) => ({
+				...header,
+				order: index + 1,
+			}))
+
+			// Verify initial order after sorting
+			let sortedHeaders = sortHeaders([...headersWithOrder])
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('ID')
+			expect(sortedHeaders[1].title).toBe('Name')
+			expect(sortedHeaders[2].title).toBe('Age')
+
+			// Update the headers to move ID to the bottom
+			const updatedHeaders = [
+				{ ...headersWithOrder[0], order: 3 }, // ID moves to position 3
+				{ ...headersWithOrder[1], order: 1 }, // Name stays at position 1
+				{ ...headersWithOrder[2], order: 2 }, // Age moves to position 2
+			]
+
+			// Check that the columns are in the correct order after sorting
+			sortedHeaders = sortHeaders(updatedHeaders)
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('Name')
+			expect(sortedHeaders[1].title).toBe('Age')
+			expect(sortedHeaders[2].title).toBe('ID')
+		})
+
+		it('should move the column age to the top', async () => {
+			// Import the sortHeaders function directly
+			const { sortHeaders } = await import('../../common/organizeColumns/sortHeaders')
+
+			// Add order property to headers for proper sorting
+			const headersWithOrder = headers.map((header, index) => ({
+				...header,
+				order: index + 1,
+			}))
+
+			// Verify initial order after sorting
+			let sortedHeaders = sortHeaders([...headersWithOrder])
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('ID')
+			expect(sortedHeaders[1].title).toBe('Name')
+			expect(sortedHeaders[2].title).toBe('Age')
+
+			// Update the headers to move Age to the top
+			const updatedHeaders = [
+				{ ...headersWithOrder[0], order: 2 }, // ID moves to position 2
+				{ ...headersWithOrder[1], order: 3 }, // Name moves to position 3
+				{ ...headersWithOrder[2], order: 1 }, // Age moves to position 1
+			]
+
+			// Check that the columns are in the correct order after sorting
+			sortedHeaders = sortHeaders(updatedHeaders)
+			expect(sortedHeaders.length).toBe(3)
+			expect(sortedHeaders[0].title).toBe('Age')
+			expect(sortedHeaders[1].title).toBe('ID')
+			expect(sortedHeaders[2].title).toBe('Name')
+		})
+	})
+})