@htlkg/components 0.0.1

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

@@ -0,0 +1,548 @@
+import { describe, it, expect } from 'vitest';
+import * as fc from 'fast-check';
+import { mount } from '@vue/test-utils';
+import Table from './Table.vue';
+
+/**
+ * Property tests for Table component
+ * Tests with random data generation to find edge cases
+ */
+describe('Table property tests', () => {
+  const globalStubs = {
+    uiTable: true,
+    uiPagination: true,
+    uiDropdown: true,
+    uiSmartFilterMultipleV2: true,
+    uiNoResults: true
+  };
+
+  it('should handle any number of columns', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            name: fc.string({ minLength: 1, maxLength: 20 }),
+            value: fc.string({ minLength: 1, maxLength: 20 })
+          }),
+          { minLength: 1, maxLength: 10 }
+        ),
+        (columns) => {
+          const items = [{ id: 1 }];
+          
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          expect(vm.tableHeader).toHaveLength(columns.length);
+          expect(vm.tableItems[0].row).toHaveLength(columns.length);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle any number of items', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.integer({ min: 1, max: 10000 }),
+            name: fc.string({ minLength: 1, maxLength: 50 }),
+            value: fc.integer()
+          }),
+          { minLength: 0, maxLength: 100 }
+        ),
+        (items) => {
+          const columns = [
+            { name: 'ID', value: 'id' },
+            { name: 'Name', value: 'name' },
+            { name: 'Value', value: 'value' }
+          ];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          expect(vm.tableItems).toHaveLength(items.length);
+          
+          if (items.length === 0) {
+            expect(vm.showInitialNoResults).toBe(true);
+          } else {
+            expect(vm.showTable).toBe(true);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should correctly map item properties to table rows', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.integer(),
+            field1: fc.string(),
+            field2: fc.integer(),
+            field3: fc.boolean()
+          }),
+          { minLength: 1, maxLength: 10 }
+        ),
+        (items) => {
+          const columns = [
+            { name: 'Field 1', value: 'field1' },
+            { name: 'Field 2', value: 'field2' },
+            { name: 'Field 3', value: 'field3' }
+          ];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          items.forEach((item, index) => {
+            const tableItem = vm.tableItems[index];
+            expect(tableItem.id).toBe(item.id);
+            expect(tableItem.row[0]).toBe(String(item.field1));
+            expect(tableItem.row[1]).toBe(String(item.field2));
+            expect(tableItem.row[2]).toBe(String(item.field3));
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle page changes for any valid page number', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 1, max: 100 }),
+        fc.integer({ min: 1, max: 100 }),
+        (currentPage, newPage) => {
+          const items = Array.from({ length: 50 }, (_, i) => ({ id: i + 1 }));
+          const columns = [{ name: 'ID', value: 'id' }];
+
+          const wrapper = mount(Table, {
+            props: { items, columns, currentPage, totalPages: 100 },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          vm.handleChangePage(newPage);
+
+          expect(wrapper.emitted('update:currentPage')).toBeDefined();
+          expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([newPage]);
+          expect(wrapper.emitted('page-changed')?.[0]).toEqual([newPage]);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle page size changes for any valid size', () => {
+    fc.assert(
+      fc.property(
+        fc.constantFrom(10, 25, 50, 100),
+        (pageSize) => {
+          const items = Array.from({ length: 100 }, (_, i) => ({ id: i + 1 }));
+          const columns = [{ name: 'ID', value: 'id' }];
+
+          const wrapper = mount(Table, {
+            props: { items, columns, itemsPerPage: 10 },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          vm.handleChangePageSize({ value: String(pageSize) });
+
+          expect(wrapper.emitted('update:itemsPerPage')?.[0]).toEqual([pageSize]);
+          expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([1]);
+        }
+      ),
+      { numRuns: 50 }
+    );
+  });
+
+  it('should handle sorting by any column', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            name: fc.string({ minLength: 1, maxLength: 20 }),
+            value: fc.string({ minLength: 1, maxLength: 20 })
+          }),
+          { minLength: 1, maxLength: 5 }
+        ),
+        fc.constantFrom('asc', 'desc'),
+        (columns, direction) => {
+          const items = [{ id: 1 }];
+          
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          const columnToSort = columns[0].value;
+          
+          vm.handleOrderBy({ value: columnToSort, orderDirection: direction });
+
+          expect(wrapper.emitted('update:orderedBy')?.[0]).toEqual([columnToSort]);
+          expect(wrapper.emitted('update:orderDirection')?.[0]).toEqual([direction]);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle column visibility for any column index', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 3, max: 10 }),
+        fc.integer({ min: 0, max: 9 }),
+        (numColumns, columnIndex) => {
+          const columns = Array.from({ length: numColumns }, (_, i) => ({
+            name: `Column ${i}`,
+            value: `col${i}`
+          }));
+          const items = [{ id: 1 }];
+
+          if (columnIndex >= numColumns) return;
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          // Hide column
+          vm.handleColumnsVisibilityChanged({ index: columnIndex, hidden: true });
+          expect(vm.hiddenColumns).toContain(columnIndex);
+
+          // Show column
+          vm.handleColumnsVisibilityChanged({ index: columnIndex, hidden: false });
+          expect(vm.hiddenColumns).not.toContain(columnIndex);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle selection of any subset of items', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.integer({ min: 1, max: 1000 }),
+            name: fc.string()
+          }),
+          { minLength: 1, maxLength: 20 }
+        ),
+        fc.array(fc.integer({ min: 0, max: 19 }), { maxLength: 10 }),
+        (items, selectedIndices) => {
+          const columns = [
+            { name: 'ID', value: 'id' },
+            { name: 'Name', value: 'name' }
+          ];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          // Select items by indices
+          const selectedIds = selectedIndices
+            .filter(i => i < items.length)
+            .map(i => items[i].id);
+
+          // Get unique IDs (Set removes duplicates)
+          const uniqueSelectedIds = [...new Set(selectedIds)];
+
+          vm.handleTableAction({ action: 'test', items: selectedIds });
+
+          expect(vm.selectedItemIds.size).toBe(uniqueSelectedIds.length);
+          uniqueSelectedIds.forEach(id => {
+            expect(vm.selectedItemIds.has(id)).toBe(true);
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should emit correct events for any action', () => {
+    fc.assert(
+      fc.property(
+        fc.string({ minLength: 1, maxLength: 20 }),
+        fc.array(fc.integer({ min: 1, max: 100 }), { maxLength: 10 }),
+        (action, itemIds) => {
+          const items = itemIds.map(id => ({ id, name: `Item ${id}` }));
+          const columns = [{ name: 'ID', value: 'id' }];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          vm.handleTableAction({ action, items: itemIds });
+
+          expect(wrapper.emitted('table-action')).toBeDefined();
+          expect(wrapper.emitted('table-action')?.[0]).toEqual([
+            { action, items: itemIds }
+          ]);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle items with missing properties gracefully', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.option(fc.integer(), { nil: undefined }),
+            name: fc.option(fc.string(), { nil: undefined }),
+            email: fc.option(fc.string(), { nil: undefined })
+          }),
+          { minLength: 1, maxLength: 10 }
+        ),
+        (items) => {
+          const columns = [
+            { name: 'ID', value: 'id' },
+            { name: 'Name', value: 'name' },
+            { name: 'Email', value: 'email' }
+          ];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          // Should not throw and should handle undefined values
+          expect(vm.tableItems).toHaveLength(items.length);
+          vm.tableItems.forEach((tableItem: any) => {
+            expect(tableItem.row).toHaveLength(3);
+            tableItem.row.forEach((cell: any) => {
+              expect(typeof cell).toBe('string');
+            });
+          });
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should maintain selection state across operations', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.integer({ min: 1, max: 100 }),
+            name: fc.string()
+          }),
+          { minLength: 5, maxLength: 20 }
+        ),
+        (items) => {
+          const columns = [
+            { name: 'ID', value: 'id' },
+            { name: 'Name', value: 'name' }
+          ];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          // Select all items
+          vm.handleSelectAllItems();
+          const initialSize = vm.selectedItemIds.size;
+          
+          // Size should match unique IDs (Set removes duplicates)
+          const uniqueIds = new Set(items.map(item => item.id));
+          expect(initialSize).toBe(uniqueIds.size);
+
+          // Deselect all
+          vm.handleDeselectAllItems();
+          expect(vm.selectedItemIds.size).toBe(0);
+
+          // Select all again
+          vm.handleSelectAllItems();
+          expect(vm.selectedItemIds.size).toBe(initialSize);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle loading state correctly', () => {
+    fc.assert(
+      fc.property(
+        fc.boolean(),
+        fc.array(fc.record({ id: fc.integer() }), { maxLength: 10 }),
+        (loading, items) => {
+          const columns = [{ name: 'ID', value: 'id' }];
+
+          const wrapper = mount(Table, {
+            props: { items, columns, loading },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          if (loading) {
+            expect(vm.showTable).toBe(true);
+            expect(vm.showInitialNoResults).toBe(false);
+          } else if (items.length === 0) {
+            expect(vm.showInitialNoResults).toBe(true);
+          } else {
+            expect(vm.showTable).toBe(true);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should reset selection when sorting or paginating', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({ id: fc.integer({ min: 1, max: 100 }) }),
+          { minLength: 5, maxLength: 20 }
+        ),
+        fc.constantFrom('name', 'id', 'email'),
+        fc.integer({ min: 1, max: 10 }),
+        (items, sortField, newPage) => {
+          const columns = [{ name: 'ID', value: 'id' }];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          // Select items
+          vm.handleSelectAllItems();
+          const uniqueIds = new Set(items.map(item => item.id));
+          expect(vm.selectedItemIds.size).toBe(uniqueIds.size);
+
+          // Sort - should reset
+          vm.handleOrderBy({ value: sortField, orderDirection: 'asc' });
+          expect(vm.resetSelected).toBe(true);
+
+          // Reset flag
+          vm.resetSelected = false;
+
+          // Change page - should reset
+          vm.handleChangePage(newPage);
+          expect(vm.resetSelected).toBe(true);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle filters with any structure', () => {
+    fc.assert(
+      fc.property(
+        fc.dictionary(
+          fc.string({ minLength: 1, maxLength: 20 }),
+          fc.oneof(
+            fc.string(),
+            fc.integer(),
+            fc.boolean()
+          )
+        ),
+        (filters) => {
+          const items = [{ id: 1 }];
+          const columns = [{ name: 'ID', value: 'id' }];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          vm.handleSmartFiltersSent(filters);
+
+          expect(wrapper.emitted('smart-filters-sent')?.[0]).toEqual([filters]);
+          expect(wrapper.emitted('multiple-filters-applied')?.[0]).toEqual([filters]);
+          expect(vm.hasUserSearched).toBe(true);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle pagination calculations correctly', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 0, max: 1000 }),
+        fc.constantFrom(10, 25, 50, 100),
+        (totalItems, itemsPerPage) => {
+          const items = Array.from({ length: Math.min(totalItems, itemsPerPage) }, (_, i) => ({ id: i }));
+          const columns = [{ name: 'ID', value: 'id' }];
+          const totalPages = Math.ceil(totalItems / itemsPerPage) || 1;
+
+          const wrapper = mount(Table, {
+            props: { 
+              items, 
+              columns, 
+              totalItems,
+              itemsPerPage,
+              totalPages
+            },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          expect(vm.totalItems).toBe(totalItems);
+          expect(vm.itemsPerPage).toBe(itemsPerPage);
+          expect(vm.totalPages).toBe(totalPages);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should expose all required methods', () => {
+    fc.assert(
+      fc.property(
+        fc.constant(null),
+        () => {
+          const items = [{ id: 1 }];
+          const columns = [{ name: 'ID', value: 'id' }];
+
+          const wrapper = mount(Table, {
+            props: { items, columns },
+            global: { stubs: globalStubs }
+          });
+
+          const vm = wrapper.vm as any;
+          
+          // Check all exposed methods exist
+          expect(typeof vm.clearSelection).toBe('function');
+          expect(typeof vm.getHiddenColumns).toBe('function');
+          expect(typeof vm.getSelectedItems).toBe('function');
+        }
+      ),
+      { numRuns: 50 }
+    );
+  });
+});