@htlkg/components 0.0.1

package/src/data/Table.test.ts

@@ -0,0 +1,562 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Table from './Table.vue';
+
+/**
+ * Integration tests for Table component
+ * Tests user interactions, real-world scenarios, and component integration
+ */
+describe('Table integration tests', () => {
+  const mockColumns = [
+    { name: 'ID', value: 'id' },
+    { name: 'Name', value: 'name' },
+    { name: 'Email', value: 'email' },
+    { name: 'Status', value: 'status' }
+  ];
+
+  const mockItems = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'active' },
+    { id: 4, name: 'Alice Williams', email: 'alice@example.com', status: 'pending' },
+    { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', status: 'active' }
+  ];
+
+  const globalStubs = {
+    uiTable: true,
+    uiPagination: true,
+    uiDropdown: true,
+    uiSmartFilterMultipleV2: true,
+    uiNoResults: true
+  };
+
+  describe('User List Management', () => {
+    it('should display user list with pagination', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          currentPage: 1,
+          totalPages: 2,
+          totalItems: 5,
+          itemsPerPage: 3,
+          showPagination: true
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.tableItems).toHaveLength(5);
+      expect(vm.showTable).toBe(true);
+      expect(vm.showPagination).toBe(true);
+    });
+
+    it('should handle sorting by name', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          orderedBy: '',
+          orderDirection: 'asc'
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleOrderBy({ value: 'name', orderDirection: 'desc' });
+      await nextTick();
+
+      expect(wrapper.emitted('update:orderedBy')?.[0]).toEqual(['name']);
+      expect(wrapper.emitted('update:orderDirection')?.[0]).toEqual(['desc']);
+      expect(wrapper.emitted('order-changed')?.[0]).toEqual(['name', 'desc']);
+    });
+
+    it('should handle page navigation', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          currentPage: 1,
+          totalPages: 3
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Navigate to page 2
+      vm.handleChangePage(2);
+      await nextTick();
+
+      expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([2]);
+      expect(wrapper.emitted('page-changed')?.[0]).toEqual([2]);
+
+      // Navigate to page 3
+      vm.handleChangePage(3);
+      await nextTick();
+
+      expect(wrapper.emitted('update:currentPage')?.[1]).toEqual([3]);
+    });
+
+    it('should change page size and reset to page 1', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          currentPage: 3,
+          itemsPerPage: 10
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleChangePageSize({ value: '25' });
+      await nextTick();
+
+      expect(wrapper.emitted('update:itemsPerPage')?.[0]).toEqual([25]);
+      expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([1]);
+      expect(wrapper.emitted('items-per-page-changed')?.[0]).toEqual([25]);
+    });
+  });
+
+  describe('Selection Management', () => {
+    it('should select all items', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleSelectAllItems();
+      await nextTick();
+
+      expect(vm.selectedItemIds.size).toBe(5);
+      expect(wrapper.emitted('select-all-items')).toBeDefined();
+      expect(wrapper.emitted('update:selected')).toBeDefined();
+      
+      const selectedItems = wrapper.emitted('update:selected')?.[0]?.[0] as any[];
+      expect(selectedItems).toHaveLength(5);
+    });
+
+    it('should deselect all items', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // First select all
+      vm.handleSelectAllItems();
+      await nextTick();
+
+      // Then deselect all
+      vm.handleDeselectAllItems();
+      await nextTick();
+
+      expect(vm.selectedItemIds.size).toBe(0);
+      expect(wrapper.emitted('deselect-all-items')).toBeDefined();
+      
+      const selectedItems = wrapper.emitted('update:selected')?.slice(-1)[0]?.[0] as any[];
+      expect(selectedItems).toHaveLength(0);
+    });
+
+    it('should handle table action with selected items', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          actions: [
+            { name: 'Delete', id: 'delete' },
+            { name: 'Export', id: 'export' }
+          ]
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleTableAction({ action: 'delete', items: [1, 3, 5] });
+      await nextTick();
+
+      expect(wrapper.emitted('table-action')?.[0]).toEqual([
+        { action: 'delete', items: [1, 3, 5] }
+      ]);
+      expect(vm.selectedItemIds.size).toBe(3);
+    });
+
+    it('should clear selection programmatically', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Select some items
+      vm.selectedItemIds = new Set([1, 2, 3]);
+      
+      // Clear selection
+      vm.clearSelection();
+      await nextTick();
+
+      expect(vm.selectedItemIds.size).toBe(0);
+      expect(vm.resetSelected).toBe(true);
+    });
+  });
+
+  describe('Filtering and Search', () => {
+    it('should handle smart filter application', async () => {
+      const availableCategories = [
+        {
+          name: 'name',
+          label: 'Name',
+          componentType: 'uiInput' as const,
+          defaultProps: {}
+        },
+        {
+          name: 'status',
+          label: 'Status',
+          componentType: 'uiSelect' as const,
+          defaultProps: {}
+        }
+      ];
+
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          availableCategories,
+          showFilters: true
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      const filters = { name: 'John', status: 'active' };
+      
+      vm.handleSmartFiltersSent(filters);
+      await nextTick();
+
+      expect(vm.hasUserSearched).toBe(true);
+      expect(wrapper.emitted('smart-filters-sent')?.[0]).toEqual([filters]);
+      expect(wrapper.emitted('multiple-filters-applied')?.[0]).toEqual([filters]);
+    });
+
+    it('should show search no results after filtering', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: [],
+          columns: mockColumns,
+          loading: false
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Simulate user search
+      vm.handleSmartFiltersSent({ name: 'NonExistent' });
+      await nextTick();
+
+      expect(vm.showSearchNoResults).toBe(true);
+      expect(vm.showInitialNoResults).toBe(false);
+    });
+
+    it('should clear filters', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleSmartFiltersCleared();
+      await nextTick();
+
+      expect(wrapper.emitted('smart-filters-cleared')).toBeDefined();
+    });
+
+    it('should delete individual filter', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleSmartFilterDeleted(0);
+      await nextTick();
+
+      expect(wrapper.emitted('smart-filter-deleted')?.[0]).toEqual([0]);
+    });
+  });
+
+  describe('Column Visibility', () => {
+    it('should hide and show columns', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Hide column 1
+      vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
+      await nextTick();
+
+      expect(vm.hiddenColumns).toContain(1);
+      expect(vm.getHiddenColumns()).toContain(1);
+
+      // Show column 1 again
+      vm.handleColumnsVisibilityChanged({ index: 1, hidden: false });
+      await nextTick();
+
+      expect(vm.hiddenColumns).not.toContain(1);
+    });
+
+    it('should handle multiple hidden columns', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      
+      // Hide multiple columns
+      vm.handleColumnsVisibilityChanged({ index: 0, hidden: true });
+      vm.handleColumnsVisibilityChanged({ index: 2, hidden: true });
+      await nextTick();
+
+      expect(vm.hiddenColumns).toHaveLength(2);
+      expect(vm.hiddenColumns).toContain(0);
+      expect(vm.hiddenColumns).toContain(2);
+    });
+  });
+
+  describe('Empty States', () => {
+    it('should show initial no results when no data', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: [],
+          columns: mockColumns,
+          loading: false
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showInitialNoResults).toBe(true);
+      expect(vm.showTable).toBe(false);
+    });
+
+    it('should show loading state', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: [],
+          columns: mockColumns,
+          loading: true
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showTable).toBe(true);
+      expect(vm.showInitialNoResults).toBe(false);
+    });
+
+    it('should handle no results action', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: [],
+          columns: mockColumns,
+          loading: false,
+          noResults: {
+            title: 'No users found',
+            message: 'Create your first user',
+            actions: [{ action: 'create', text: 'Create User' }],
+            select: { name: '', value: '' }
+          }
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleNoResultsAction('create');
+      await nextTick();
+
+      expect(wrapper.emitted('no-results-action')?.[0]).toEqual(['create']);
+    });
+  });
+
+  describe('Refresh and Actions', () => {
+    it('should handle refresh action', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          showRefresh: true
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleDropdownAction({ value: 'refreshData' });
+      await nextTick();
+
+      expect(wrapper.emitted('refresh:data')).toBeDefined();
+    });
+
+    it('should handle table action button click', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          tableActionButtons: [
+            { id: 'export', text: 'Export' },
+            { id: 'import', text: 'Import' }
+          ]
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleTableActionButtonClicked({ id: 'export', text: 'Export' });
+      await nextTick();
+
+      expect(wrapper.emitted('table-action-button-clicked')?.[0]).toEqual([
+        { id: 'export', text: 'Export' }
+      ]);
+    });
+
+    it('should handle modal action', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleModalAction({ modal: 'confirm-delete', action: 'confirm' });
+      await nextTick();
+
+      expect(wrapper.emitted('modal-action')?.[0]).toEqual([
+        { modal: 'confirm-delete', action: 'confirm' }
+      ]);
+    });
+  });
+
+  describe('State Management', () => {
+    it('should reset selection when items change', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.resetSelected = true;
+
+      // Change items
+      await wrapper.setProps({ items: mockItems.slice(0, 3) });
+      await nextTick();
+
+      expect(vm.resetSelected).toBe(false);
+    });
+
+    it('should maintain hidden columns across updates', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
+      
+      // Update items
+      await wrapper.setProps({ items: mockItems.slice(0, 2) });
+      await nextTick();
+
+      expect(vm.hiddenColumns).toContain(1);
+    });
+  });
+
+  describe('Complex Workflows', () => {
+    it('should handle complete user management workflow', async () => {
+      const wrapper = mount(Table, {
+        props: {
+          items: mockItems,
+          columns: mockColumns,
+          currentPage: 1,
+          totalPages: 2,
+          itemsPerPage: 3,
+          showPagination: true,
+          showFilters: true,
+          availableCategories: [
+            {
+              name: 'status',
+              label: 'Status',
+              componentType: 'uiSelect' as const,
+              defaultProps: {}
+            }
+          ]
+        },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+
+      // 1. Apply filter
+      vm.handleSmartFiltersSent({ status: 'active' });
+      await nextTick();
+      expect(wrapper.emitted('smart-filters-sent')).toBeDefined();
+
+      // 2. Sort by name
+      vm.handleOrderBy({ value: 'name', orderDirection: 'asc' });
+      await nextTick();
+      expect(wrapper.emitted('order-changed')).toBeDefined();
+
+      // 3. Select items
+      vm.handleSelectAllItems();
+      await nextTick();
+      expect(vm.selectedItemIds.size).toBeGreaterThan(0);
+
+      // 4. Perform action
+      vm.handleTableAction({ action: 'export', items: Array.from(vm.selectedItemIds) });
+      await nextTick();
+      expect(wrapper.emitted('table-action')).toBeDefined();
+
+      // 5. Change page
+      vm.handleChangePage(2);
+      await nextTick();
+      expect(wrapper.emitted('page-changed')).toBeDefined();
+      expect(vm.resetSelected).toBe(true);
+    });
+  });
+});