@htlkg/components 0.0.1

package/src/data/Table.unit.test.ts

@@ -0,0 +1,544 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Table from './Table.vue';
+
+/**
+ * Unit tests for Table component
+ * Tests individual functions and methods in isolation
+ */
+describe('Table unit tests', () => {
+  const mockColumns = [
+    { name: 'ID', value: 'id' },
+    { name: 'Name', value: 'name' },
+    { name: 'Email', value: 'email' }
+  ];
+
+  const mockItems = [
+    { id: 1, name: 'John Doe', email: 'john@example.com' },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com' }
+  ];
+
+  const globalStubs = {
+    uiTable: true,
+    uiPagination: true,
+    uiDropdown: true,
+    uiSmartFilterMultipleV2: true,
+    uiNoResults: true
+  };
+
+  describe('tableHeader computed', () => {
+    it('should convert columns to uiTable header format', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.tableHeader).toHaveLength(3);
+      expect(vm.tableHeader[0]).toEqual({ name: 'ID', value: 'id', tooltip: undefined });
+      expect(vm.tableHeader[1]).toEqual({ name: 'Name', value: 'name', tooltip: undefined });
+    });
+
+    it('should include tooltips when provided', () => {
+      const columnsWithTooltips = [
+        { name: 'ID', value: 'id', tooltip: 'Unique identifier' },
+        { name: 'Name', value: 'name', tooltip: 'User full name' }
+      ];
+
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: columnsWithTooltips },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.tableHeader[0].tooltip).toBe('Unique identifier');
+      expect(vm.tableHeader[1].tooltip).toBe('User full name');
+    });
+  });
+
+  describe('tableItems computed', () => {
+    it('should convert items to uiTable format', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.tableItems).toHaveLength(3);
+      expect(vm.tableItems[0].id).toBe(1);
+      expect(vm.tableItems[0].row).toHaveLength(3);
+    });
+
+    it('should handle items without id by using index', () => {
+      const itemsWithoutId = [
+        { name: 'John', email: 'john@test.com' },
+        { name: 'Jane', email: 'jane@test.com' }
+      ];
+
+      const wrapper = mount(Table, {
+        props: { items: itemsWithoutId, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.tableItems[0].id).toBe(0);
+      expect(vm.tableItems[1].id).toBe(1);
+    });
+
+    it('should handle disabled items', () => {
+      const itemsWithDisabled = [
+        { id: 1, name: 'John', email: 'john@test.com', disabled: true },
+        { id: 2, name: 'Jane', email: 'jane@test.com', disabled: false }
+      ];
+
+      const wrapper = mount(Table, {
+        props: { items: itemsWithDisabled, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.tableItems[0].disabled).toBe(true);
+      expect(vm.tableItems[1].disabled).toBe(false);
+    });
+
+    it('should handle null and undefined values', () => {
+      const itemsWithNulls = [
+        { id: 1, name: null, email: undefined }
+      ];
+
+      const wrapper = mount(Table, {
+        props: { items: itemsWithNulls, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.tableItems[0].row[1]).toBe('');
+      expect(vm.tableItems[0].row[2]).toBe('');
+    });
+  });
+
+  describe('pageItemsOptions computed', () => {
+    it('should return page size options', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns, itemsPerPage: 25 },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.pageItemsOptions).toHaveLength(4);
+      expect(vm.pageItemsOptions[0].name).toBe('10');
+      expect(vm.pageItemsOptions[1].active).toBe(true); // 25 is active
+    });
+
+    it('should mark correct option as active', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns, itemsPerPage: 50 },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      const activeOption = vm.pageItemsOptions.find((opt: any) => opt.active);
+      expect(activeOption.value).toBe('50');
+    });
+  });
+
+  describe('showInitialNoResults computed', () => {
+    it('should return true when no items and not loading', () => {
+      const wrapper = mount(Table, {
+        props: { items: [], columns: mockColumns, loading: false },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showInitialNoResults).toBe(true);
+    });
+
+    it('should return false when loading', () => {
+      const wrapper = mount(Table, {
+        props: { items: [], columns: mockColumns, loading: true },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showInitialNoResults).toBe(false);
+    });
+
+    it('should return false when items exist', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns, loading: false },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showInitialNoResults).toBe(false);
+    });
+
+    it('should return false when user has searched', () => {
+      const wrapper = mount(Table, {
+        props: { items: [], columns: mockColumns, loading: false },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.hasUserSearched = true;
+      expect(vm.showInitialNoResults).toBe(false);
+    });
+  });
+
+  describe('showSearchNoResults computed', () => {
+    it('should return true when no items after search', () => {
+      const wrapper = mount(Table, {
+        props: { items: [], columns: mockColumns, loading: false },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.hasUserSearched = true;
+      expect(vm.showSearchNoResults).toBe(true);
+    });
+
+    it('should return false when not searched', () => {
+      const wrapper = mount(Table, {
+        props: { items: [], columns: mockColumns, loading: false },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showSearchNoResults).toBe(false);
+    });
+  });
+
+  describe('showTable computed', () => {
+    it('should return true when loading', () => {
+      const wrapper = mount(Table, {
+        props: { items: [], columns: mockColumns, loading: true },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showTable).toBe(true);
+    });
+
+    it('should return true when items exist', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns, loading: false },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showTable).toBe(true);
+    });
+
+    it('should return false when no items and not loading', () => {
+      const wrapper = mount(Table, {
+        props: { items: [], columns: mockColumns, loading: false },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.showTable).toBe(false);
+    });
+  });
+
+  describe('handleOrderBy()', () => {
+    it('should emit order events', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleOrderBy({ value: 'name', orderDirection: 'desc' });
+
+      expect(wrapper.emitted('update:orderedBy')).toBeDefined();
+      expect(wrapper.emitted('update:orderedBy')?.[0]).toEqual(['name']);
+      expect(wrapper.emitted('update:orderDirection')).toBeDefined();
+      expect(wrapper.emitted('update:orderDirection')?.[0]).toEqual(['desc']);
+      expect(wrapper.emitted('order-changed')).toBeDefined();
+      expect(wrapper.emitted('order-changed')?.[0]).toEqual(['name', 'desc']);
+    });
+
+    it('should reset selected items', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.resetSelected = false;
+      vm.handleOrderBy({ value: 'name', orderDirection: 'asc' });
+
+      expect(vm.resetSelected).toBe(true);
+    });
+  });
+
+  describe('handleChangePage()', () => {
+    it('should emit page change events', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns, currentPage: 1 },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleChangePage(2);
+
+      expect(wrapper.emitted('update:currentPage')).toBeDefined();
+      expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([2]);
+      expect(wrapper.emitted('page-changed')).toBeDefined();
+      expect(wrapper.emitted('page-changed')?.[0]).toEqual([2]);
+    });
+
+    it('should reset selected items', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.resetSelected = false;
+      vm.handleChangePage(3);
+
+      expect(vm.resetSelected).toBe(true);
+    });
+  });
+
+  describe('handleChangePageSize()', () => {
+    it('should emit page size change events', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns, itemsPerPage: 10 },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleChangePageSize({ value: '25' });
+
+      expect(wrapper.emitted('update:itemsPerPage')).toBeDefined();
+      expect(wrapper.emitted('update:itemsPerPage')?.[0]).toEqual([25]);
+      expect(wrapper.emitted('items-per-page-changed')).toBeDefined();
+      expect(wrapper.emitted('items-per-page-changed')?.[0]).toEqual([25]);
+    });
+
+    it('should reset to page 1', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns, currentPage: 3 },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleChangePageSize({ value: '50' });
+
+      expect(wrapper.emitted('update:currentPage')).toBeDefined();
+      expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([1]);
+    });
+  });
+
+  describe('handleColumnsVisibilityChanged()', () => {
+    it('should add column to hidden list', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
+
+      expect(vm.hiddenColumns).toContain(1);
+    });
+
+    it('should remove column from hidden list', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.hiddenColumns = [1, 2];
+      vm.handleColumnsVisibilityChanged({ index: 1, hidden: false });
+
+      expect(vm.hiddenColumns).not.toContain(1);
+      expect(vm.hiddenColumns).toContain(2);
+    });
+
+    it('should not duplicate hidden columns', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
+      vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
+
+      expect(vm.hiddenColumns.filter((i: number) => i === 1)).toHaveLength(1);
+    });
+  });
+
+  describe('clearSelection()', () => {
+    it('should clear selected items', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.selectedItemIds = new Set([1, 2, 3]);
+      vm.clearSelection();
+
+      expect(vm.selectedItemIds.size).toBe(0);
+      expect(vm.resetSelected).toBe(true);
+    });
+
+    it('should emit update:selected with empty array', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.selectedItemIds = new Set([1, 2]);
+      vm.clearSelection();
+
+      expect(wrapper.emitted('update:selected')).toBeDefined();
+      const lastEmit = wrapper.emitted('update:selected')?.slice(-1)[0];
+      expect(lastEmit?.[0]).toEqual([]);
+    });
+  });
+
+  describe('getHiddenColumns()', () => {
+    it('should return hidden columns array', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.hiddenColumns = [0, 2];
+
+      expect(vm.getHiddenColumns()).toEqual([0, 2]);
+    });
+
+    it('should return empty array when no hidden columns', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getHiddenColumns()).toEqual([]);
+    });
+  });
+
+  describe('getSelectedItems()', () => {
+    it('should return array of selected item IDs', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.selectedItemIds = new Set([1, 3]);
+
+      const selected = vm.getSelectedItems();
+      expect(selected).toContain(1);
+      expect(selected).toContain(3);
+      expect(selected).toHaveLength(2);
+    });
+
+    it('should return empty array when nothing selected', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      expect(vm.getSelectedItems()).toEqual([]);
+    });
+  });
+
+  describe('handleSmartFiltersSent()', () => {
+    it('should set hasUserSearched to true', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleSmartFiltersSent({ name: 'John' });
+
+      expect(vm.hasUserSearched).toBe(true);
+    });
+
+    it('should emit filter events', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      const filters = { name: 'John', email: 'test' };
+      vm.handleSmartFiltersSent(filters);
+
+      expect(wrapper.emitted('smart-filters-sent')).toBeDefined();
+      expect(wrapper.emitted('smart-filters-sent')?.[0]).toEqual([filters]);
+      expect(wrapper.emitted('multiple-filters-applied')).toBeDefined();
+      expect(wrapper.emitted('multiple-filters-applied')?.[0]).toEqual([filters]);
+    });
+  });
+
+  describe('handleSelectAllItems()', () => {
+    it('should select all items', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleSelectAllItems();
+
+      expect(vm.selectedItemIds.size).toBe(3);
+      expect(vm.selectedItemIds.has(1)).toBe(true);
+      expect(vm.selectedItemIds.has(2)).toBe(true);
+      expect(vm.selectedItemIds.has(3)).toBe(true);
+    });
+
+    it('should emit select-all-items event', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleSelectAllItems();
+
+      expect(wrapper.emitted('select-all-items')).toBeDefined();
+    });
+  });
+
+  describe('handleDeselectAllItems()', () => {
+    it('should deselect all items', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.selectedItemIds = new Set([1, 2, 3]);
+      vm.handleDeselectAllItems();
+
+      expect(vm.selectedItemIds.size).toBe(0);
+    });
+
+    it('should emit deselect-all-items event', () => {
+      const wrapper = mount(Table, {
+        props: { items: mockItems, columns: mockColumns },
+        global: { stubs: globalStubs }
+      });
+
+      const vm = wrapper.vm as any;
+      vm.handleDeselectAllItems();
+
+      expect(wrapper.emitted('deselect-all-items')).toBeDefined();
+    });
+  });
+});