@nova-design-system/nova-webcomponents 3.15.0 → 3.17.0

package/dist/collection/components/nv-table/test/nv-table.utils.test.js

@@ -0,0 +1,604 @@
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { TABLE_CONSTANTS, getHandleWidthForCurrentPointer, getPointerOffsetInCell, isInResizeHandle, calculateNewWidth, isValidTableCell, getClosestTableCell, setPointerCapture, releasePointerCapture, setUserSelectPrevention, getCellWidth, setCellWidth, calculatePointerDelta, createResizeState, isValidResizeState, updateCellWidthFromResize, } from "../nv-table.utils";
+// Mock browser globals
+const mockMatchMedia = vi.fn();
+const mockDocumentBody = {
+    style: { userSelect: '' },
+};
+vi.stubGlobal('matchMedia', mockMatchMedia);
+vi.stubGlobal('document', { body: mockDocumentBody });
+vi.stubGlobal('HTMLElement', class MockHTMLElement {
+});
+/**
+ * Comprehensive tests for nv-table utilities
+ *
+ * These tests validate all utility functions:
+ * - Constants and configuration values
+ * - Pointer event calculations and handling
+ * - Column resize logic and constraints
+ * - DOM element validation and manipulation
+ * - Resize state management
+ * - Edge cases and error conditions
+ */
+describe('nv-table.utils - Comprehensive Tests', () => {
+    // Mock DOM elements and browser APIs
+    let mockCell;
+    let mockPointerEvent;
+    beforeEach(() => {
+        // Reset mocks
+        vi.clearAllMocks();
+        // Setup matchMedia mock for each test
+        mockMatchMedia.mockImplementation(query => ({
+            matches: query.includes('coarse') ? false : true,
+            media: query,
+        }));
+        // Reset document body style
+        mockDocumentBody.style.userSelect = '';
+        // Mock HTMLTableCellElement with mutable offsetWidth
+        const mockCellProps = {
+            tagName: 'TH',
+            offsetWidth: 100,
+            style: { width: '' },
+            getBoundingClientRect: vi.fn().mockReturnValue({
+                left: 10,
+                top: 10,
+                width: 100,
+                height: 30,
+            }),
+            closest: vi.fn().mockReturnValue(null),
+            setPointerCapture: vi.fn(),
+            releasePointerCapture: vi.fn(),
+        };
+        // Make offsetWidth mutable for testing
+        Object.defineProperty(mockCellProps, 'offsetWidth', {
+            writable: true,
+            value: 100,
+        });
+        mockCell = mockCellProps;
+        // Mock PointerEvent
+        mockPointerEvent = {
+            pointerId: 1,
+            clientX: 50,
+            clientY: 20,
+            target: mockCell,
+        };
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('TABLE_CONSTANTS', () => {
+        it('should have correct constant values', () => {
+            expect(TABLE_CONSTANTS.HANDLE_W).toBe(12);
+            expect(TABLE_CONSTANTS.HANDLE_W_TOUCH).toBe(24);
+            expect(TABLE_CONSTANTS.MIN_W).toBe(40);
+        });
+        it('should be immutable', () => {
+            // Object.freeze prevents modification in strict mode
+            const originalValue = TABLE_CONSTANTS.HANDLE_W;
+            try {
+                TABLE_CONSTANTS.HANDLE_W = 20;
+            }
+            catch (_a) {
+                // Ignored - assignment may or may not throw depending on strict mode
+            }
+            expect(TABLE_CONSTANTS.HANDLE_W).toBe(originalValue);
+        });
+    });
+    describe('getHandleWidthForCurrentPointer', () => {
+        it('should return fine pointer width for mouse input', () => {
+            mockMatchMedia.mockReturnValue({ matches: false });
+            const result = getHandleWidthForCurrentPointer();
+            expect(result).toBe(TABLE_CONSTANTS.HANDLE_W);
+            expect(mockMatchMedia).toHaveBeenCalledWith('(pointer: coarse)');
+        });
+        it('should return touch width for coarse pointer input', () => {
+            mockMatchMedia.mockReturnValue({ matches: true });
+            const result = getHandleWidthForCurrentPointer();
+            expect(result).toBe(TABLE_CONSTANTS.HANDLE_W_TOUCH);
+            expect(mockMatchMedia).toHaveBeenCalledWith('(pointer: coarse)');
+        });
+        it('should handle matchMedia errors gracefully', () => {
+            mockMatchMedia.mockImplementation(() => {
+                throw new Error('matchMedia not supported');
+            });
+            expect(() => getHandleWidthForCurrentPointer()).toThrow();
+        });
+    });
+    describe('getPointerOffsetInCell', () => {
+        it('should calculate correct offset within cell', () => {
+            const event = { clientX: 60 };
+            mockCell.getBoundingClientRect = vi.fn().mockReturnValue({ left: 10 });
+            const result = getPointerOffsetInCell(event, mockCell);
+            expect(result).toBe(50); // 60 - 10
+            expect(mockCell.getBoundingClientRect).toHaveBeenCalled();
+        });
+        it('should handle zero offset', () => {
+            const event = { clientX: 10 };
+            mockCell.getBoundingClientRect = vi.fn().mockReturnValue({ left: 10 });
+            const result = getPointerOffsetInCell(event, mockCell);
+            expect(result).toBe(0);
+        });
+        it('should handle negative offset', () => {
+            const event = { clientX: 5 };
+            mockCell.getBoundingClientRect = vi.fn().mockReturnValue({ left: 10 });
+            const result = getPointerOffsetInCell(event, mockCell);
+            expect(result).toBe(-5);
+        });
+        it('should handle fractional coordinates', () => {
+            const event = { clientX: 15.7 };
+            mockCell.getBoundingClientRect = vi.fn().mockReturnValue({ left: 10.3 });
+            const result = getPointerOffsetInCell(event, mockCell);
+            expect(result).toBeCloseTo(5.4, 1);
+        });
+    });
+    describe('isInResizeHandle', () => {
+        it('should return true when pointer is in handle area', () => {
+            const result = isInResizeHandle(95, 100, 10);
+            expect(result).toBe(true);
+        });
+        it('should return true when pointer is exactly at handle boundary', () => {
+            const result = isInResizeHandle(90, 100, 10);
+            expect(result).toBe(true);
+        });
+        it('should return false when pointer is outside handle area', () => {
+            const result = isInResizeHandle(89, 100, 10);
+            expect(result).toBe(false);
+        });
+        it('should handle edge cases with zero dimensions', () => {
+            expect(isInResizeHandle(0, 0, 10)).toBe(true); // 0 >= 0 - 10 = -10 (true)
+            expect(isInResizeHandle(0, 10, 0)).toBe(false); // 0 >= 10 - 0 = 10 (false)
+        });
+        it('should handle large handle areas', () => {
+            const result = isInResizeHandle(50, 100, 60);
+            expect(result).toBe(true); // 50 >= 100 - 60 = 40
+        });
+        it('should handle fractional values', () => {
+            const result = isInResizeHandle(85.5, 100.2, 10.7);
+            expect(result).toBe(false); // 85.5 < 100.2 - 10.7 = 89.5
+        });
+    });
+    describe('calculateNewWidth', () => {
+        it('should calculate width with positive delta', () => {
+            const result = calculateNewWidth(100, 20);
+            expect(result).toBe(120);
+        });
+        it('should calculate width with negative delta', () => {
+            const result = calculateNewWidth(100, -20);
+            expect(result).toBe(80);
+        });
+        it('should enforce minimum width constraint', () => {
+            const result = calculateNewWidth(50, -30, 40);
+            expect(result).toBe(40); // Math.max(40, 50 - 30 = 20)
+        });
+        it('should use default minimum width when not provided', () => {
+            const result = calculateNewWidth(50, -30);
+            expect(result).toBe(TABLE_CONSTANTS.MIN_W);
+        });
+        it('should handle zero delta', () => {
+            const result = calculateNewWidth(100, 0);
+            expect(result).toBe(100);
+        });
+        it('should handle fractional values', () => {
+            const result = calculateNewWidth(100.5, 20.3, 30.7);
+            expect(result).toBeCloseTo(120.8, 1);
+        });
+        it('should handle extreme negative delta', () => {
+            const result = calculateNewWidth(100, -200, 40);
+            expect(result).toBe(40);
+        });
+    });
+    describe('isValidTableCell', () => {
+        it('should return true for TH elements', () => {
+            const th = { tagName: 'TH' };
+            expect(isValidTableCell(th)).toBe(true);
+        });
+        it('should return true for TD elements', () => {
+            const td = { tagName: 'TD' };
+            expect(isValidTableCell(td)).toBe(true);
+        });
+        it('should return false for other elements', () => {
+            const div = { tagName: 'DIV' };
+            expect(isValidTableCell(div)).toBe(false);
+        });
+        it('should return false for null', () => {
+            expect(isValidTableCell(null)).toBe(false);
+        });
+        it('should return false for undefined', () => {
+            expect(isValidTableCell(undefined)).toBe(false);
+        });
+        it('should handle case sensitivity', () => {
+            const th = { tagName: 'th' };
+            expect(isValidTableCell(th)).toBe(false); // tagName is always uppercase in real DOM
+        });
+    });
+    describe('getClosestTableCell', () => {
+        it('should return closest table cell element', () => {
+            const mockElement = Object.create(HTMLElement.prototype);
+            mockElement.closest = vi.fn().mockReturnValue(mockCell);
+            const result = getClosestTableCell(mockElement);
+            expect(result).toBe(mockCell);
+            expect(mockElement.closest).toHaveBeenCalledWith('th, td');
+        });
+        it('should return null for non-HTMLElement targets', () => {
+            const result = getClosestTableCell('not an element');
+            expect(result).toBeNull();
+        });
+        it('should return null when closest returns null', () => {
+            const mockElement = {
+                closest: vi.fn().mockReturnValue(null),
+            };
+            const result = getClosestTableCell(mockElement);
+            expect(result).toBeNull();
+        });
+        it('should return null when closest returns invalid element', () => {
+            const invalidElement = { tagName: 'DIV' };
+            const mockElement = {
+                closest: vi.fn().mockReturnValue(invalidElement),
+            };
+            const result = getClosestTableCell(mockElement);
+            expect(result).toBeNull();
+        });
+        it('should handle null target', () => {
+            const result = getClosestTableCell(null);
+            expect(result).toBeNull();
+        });
+    });
+    describe('setPointerCapture', () => {
+        it('should successfully set pointer capture', () => {
+            mockCell.setPointerCapture = vi.fn();
+            const result = setPointerCapture(mockCell, 123);
+            expect(result).toBe(true);
+            expect(mockCell.setPointerCapture).toHaveBeenCalledWith(123);
+        });
+        it('should handle missing setPointerCapture method', () => {
+            const cellWithoutCapture = { setPointerCapture: undefined };
+            const result = setPointerCapture(cellWithoutCapture, 123);
+            expect(result).toBe(true); // Method doesn't exist but doesn't throw
+        });
+        it('should handle setPointerCapture exceptions', () => {
+            mockCell.setPointerCapture = vi.fn().mockImplementation(() => {
+                throw new Error('Capture failed');
+            });
+            const result = setPointerCapture(mockCell, 123);
+            expect(result).toBe(false);
+        });
+        it('should handle different pointer IDs', () => {
+            mockCell.setPointerCapture = vi.fn();
+            setPointerCapture(mockCell, 999);
+            expect(mockCell.setPointerCapture).toHaveBeenCalledWith(999);
+        });
+    });
+    describe('releasePointerCapture', () => {
+        it('should successfully release pointer capture', () => {
+            mockCell.releasePointerCapture = vi.fn();
+            const result = releasePointerCapture(mockCell, 123);
+            expect(result).toBe(true);
+            expect(mockCell.releasePointerCapture).toHaveBeenCalledWith(123);
+        });
+        it('should handle missing releasePointerCapture method', () => {
+            const cellWithoutRelease = { releasePointerCapture: undefined };
+            const result = releasePointerCapture(cellWithoutRelease, 123);
+            expect(result).toBe(true);
+        });
+        it('should handle releasePointerCapture exceptions', () => {
+            mockCell.releasePointerCapture = vi.fn().mockImplementation(() => {
+                throw new Error('Release failed');
+            });
+            const result = releasePointerCapture(mockCell, 123);
+            expect(result).toBe(false);
+        });
+    });
+    describe('setUserSelectPrevention', () => {
+        it('should prevent user selection', () => {
+            setUserSelectPrevention(true);
+            expect(document.body.style.userSelect).toBe('none');
+        });
+        it('should restore user selection', () => {
+            document.body.style.userSelect = 'none';
+            setUserSelectPrevention(false);
+            expect(document.body.style.userSelect).toBe('');
+        });
+        it('should handle multiple calls', () => {
+            setUserSelectPrevention(true);
+            setUserSelectPrevention(true);
+            expect(document.body.style.userSelect).toBe('none');
+            setUserSelectPrevention(false);
+            expect(document.body.style.userSelect).toBe('');
+        });
+    });
+    describe('getCellWidth', () => {
+        it('should return cell offset width', () => {
+            mockCell.offsetWidth = 150;
+            const result = getCellWidth(mockCell);
+            expect(result).toBe(150);
+        });
+        it('should handle zero width', () => {
+            mockCell.offsetWidth = 0;
+            const result = getCellWidth(mockCell);
+            expect(result).toBe(0);
+        });
+        it('should handle fractional width (rounded by browser)', () => {
+            mockCell.offsetWidth = 100; // Browser rounds fractional offset values
+            const result = getCellWidth(mockCell);
+            expect(result).toBe(100);
+        });
+    });
+    describe('setCellWidth', () => {
+        it('should set cell width in pixels', () => {
+            setCellWidth(mockCell, 150);
+            expect(mockCell.style.width).toBe('150px');
+        });
+        it('should handle zero width', () => {
+            setCellWidth(mockCell, 0);
+            expect(mockCell.style.width).toBe('0px');
+        });
+        it('should handle fractional width', () => {
+            setCellWidth(mockCell, 150.5);
+            expect(mockCell.style.width).toBe('150.5px');
+        });
+        it('should overwrite previous width', () => {
+            mockCell.style.width = '100px';
+            setCellWidth(mockCell, 200);
+            expect(mockCell.style.width).toBe('200px');
+        });
+    });
+    describe('calculatePointerDelta', () => {
+        it('should calculate positive delta', () => {
+            const result = calculatePointerDelta(150, 100);
+            expect(result).toBe(50);
+        });
+        it('should calculate negative delta', () => {
+            const result = calculatePointerDelta(80, 100);
+            expect(result).toBe(-20);
+        });
+        it('should calculate zero delta', () => {
+            const result = calculatePointerDelta(100, 100);
+            expect(result).toBe(0);
+        });
+        it('should handle fractional coordinates', () => {
+            const result = calculatePointerDelta(150.7, 100.3);
+            expect(result).toBeCloseTo(50.4, 1);
+        });
+        it('should handle large deltas', () => {
+            const result = calculatePointerDelta(1000, 100);
+            expect(result).toBe(900);
+        });
+    });
+    describe('createResizeState', () => {
+        it('should create valid resize state', () => {
+            const event = {
+                pointerId: 42,
+                clientX: 200,
+            };
+            mockCell.offsetWidth = 120;
+            const result = createResizeState(mockCell, event);
+            expect(result).toEqual({
+                resizingCell: mockCell,
+                pointerId: 42,
+                startX: 200,
+                startWidth: 120,
+            });
+        });
+        it('should handle different pointer IDs', () => {
+            const event = {
+                pointerId: 999,
+                clientX: 300,
+            };
+            const result = createResizeState(mockCell, event);
+            expect(result.pointerId).toBe(999);
+        });
+        it('should capture current cell width at time of creation', () => {
+            mockCell.offsetWidth = 75;
+            const event = {
+                pointerId: 1,
+                clientX: 100,
+            };
+            const result = createResizeState(mockCell, event);
+            expect(result.startWidth).toBe(75);
+        });
+    });
+    describe('isValidResizeState', () => {
+        const mockState = {
+            resizingCell: mockCell,
+            pointerId: 42,
+            startX: 100,
+            startWidth: 120,
+        };
+        it('should return true for matching pointer event', () => {
+            const event = { pointerId: 42 };
+            const result = isValidResizeState(mockState, event);
+            expect(result).toBe(true);
+        });
+        it('should return false for non-matching pointer ID', () => {
+            const event = { pointerId: 43 };
+            const result = isValidResizeState(mockState, event);
+            expect(result).toBe(false);
+        });
+        it('should return false for null state', () => {
+            const event = { pointerId: 42 };
+            const result = isValidResizeState(null, event);
+            expect(result).toBe(false);
+        });
+        it('should handle edge case pointer IDs', () => {
+            const zeroIdState = Object.assign(Object.assign({}, mockState), { pointerId: 0 });
+            const event = { pointerId: 0 };
+            const result = isValidResizeState(zeroIdState, event);
+            expect(result).toBe(true);
+        });
+    });
+    describe('updateCellWidthFromResize', () => {
+        it('should update cell width during resize', () => {
+            const state = {
+                resizingCell: mockCell,
+                pointerId: 1,
+                startX: 100,
+                startWidth: 120,
+            };
+            const event = { clientX: 130 };
+            updateCellWidthFromResize(state, event);
+            expect(mockCell.style.width).toBe('150px'); // 120 + (130 - 100) = 150
+        });
+        it('should enforce minimum width constraint', () => {
+            const state = {
+                resizingCell: mockCell,
+                pointerId: 1,
+                startX: 100,
+                startWidth: 60,
+            };
+            const event = { clientX: 50 };
+            updateCellWidthFromResize(state, event, 40);
+            expect(mockCell.style.width).toBe('40px'); // Constrained to minimum
+        });
+        it('should use default minimum width', () => {
+            const state = {
+                resizingCell: mockCell,
+                pointerId: 1,
+                startX: 100,
+                startWidth: 50,
+            };
+            const event = { clientX: 40 };
+            updateCellWidthFromResize(state, event);
+            expect(mockCell.style.width).toBe(`${TABLE_CONSTANTS.MIN_W}px`);
+        });
+        it('should handle negative deltas', () => {
+            const state = {
+                resizingCell: mockCell,
+                pointerId: 1,
+                startX: 100,
+                startWidth: 120,
+            };
+            const event = { clientX: 80 };
+            updateCellWidthFromResize(state, event);
+            expect(mockCell.style.width).toBe('100px'); // 120 + (80 - 100) = 100
+        });
+    });
+    describe('Integration Scenarios', () => {
+        it('should handle complete resize workflow', () => {
+            // Setup initial state
+            const initialEvent = {
+                pointerId: 1,
+                clientX: 100,
+                target: mockCell,
+            };
+            // Create resize state
+            const state = createResizeState(mockCell, initialEvent);
+            expect(isValidResizeState(state, initialEvent)).toBe(true);
+            // Simulate pointer move
+            const moveEvent = { pointerId: 1, clientX: 130 };
+            expect(isValidResizeState(state, moveEvent)).toBe(true);
+            updateCellWidthFromResize(state, moveEvent);
+            // Verify width was updated
+            expect(mockCell.style.width).toContain('px');
+        });
+        it('should handle pointer capture workflow', () => {
+            mockCell.setPointerCapture = vi.fn();
+            mockCell.releasePointerCapture = vi.fn();
+            // Set capture
+            const setCaptureResult = setPointerCapture(mockCell, 123);
+            expect(setCaptureResult).toBe(true);
+            // Release capture
+            const releaseCaptureResult = releasePointerCapture(mockCell, 123);
+            expect(releaseCaptureResult).toBe(true);
+            expect(mockCell.setPointerCapture).toHaveBeenCalledWith(123);
+            expect(mockCell.releasePointerCapture).toHaveBeenCalledWith(123);
+        });
+        it('should handle user selection prevention workflow', () => {
+            // Start resize - prevent selection
+            setUserSelectPrevention(true);
+            expect(document.body.style.userSelect).toBe('none');
+            // End resize - restore selection
+            setUserSelectPrevention(false);
+            expect(document.body.style.userSelect).toBe('');
+        });
+        it('should validate resize handle detection', () => {
+            const event = { clientX: 95 };
+            mockCell.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0 });
+            mockCell.offsetWidth = 100;
+            const offsetX = getPointerOffsetInCell(event, mockCell);
+            const cellWidth = getCellWidth(mockCell);
+            const handleWidth = getHandleWidthForCurrentPointer();
+            const inHandle = isInResizeHandle(offsetX, cellWidth, handleWidth);
+            expect(offsetX).toBe(95);
+            expect(cellWidth).toBe(100);
+            expect(inHandle).toBe(true); // 95 >= 100 - handleWidth
+        });
+    });
+    describe('Edge Cases and Error Handling', () => {
+        it('should handle extreme coordinate values', () => {
+            const extremeEvent = { clientX: Number.MAX_SAFE_INTEGER };
+            mockCell.getBoundingClientRect = vi.fn().mockReturnValue({ left: 0 });
+            const offset = getPointerOffsetInCell(extremeEvent, mockCell);
+            expect(typeof offset).toBe('number');
+            expect(isFinite(offset)).toBe(true);
+        });
+        it('should handle zero-sized cells', () => {
+            mockCell.offsetWidth = 0;
+            const state = createResizeState(mockCell, mockPointerEvent);
+            expect(state.startWidth).toBe(0);
+            const moveEvent = { pointerId: 1, clientX: 50 };
+            updateCellWidthFromResize(state, moveEvent);
+            expect(mockCell.style.width).toBe(`${TABLE_CONSTANTS.MIN_W}px`);
+        });
+        it('should handle rapid pointer ID changes', () => {
+            const state1 = createResizeState(mockCell, {
+                pointerId: 1,
+                clientX: 100,
+            });
+            const state2 = createResizeState(mockCell, {
+                pointerId: 2,
+                clientX: 100,
+            });
+            const event1 = { pointerId: 1 };
+            const event2 = { pointerId: 2 };
+            expect(isValidResizeState(state1, event1)).toBe(true);
+            expect(isValidResizeState(state1, event2)).toBe(false);
+            expect(isValidResizeState(state2, event1)).toBe(false);
+            expect(isValidResizeState(state2, event2)).toBe(true);
+        });
+        it('should handle missing DOM methods gracefully', () => {
+            const incompleteCell = {
+                tagName: 'TH',
+                offsetWidth: 100,
+                style: { width: '' },
+                getBoundingClientRect: undefined,
+            };
+            expect(() => {
+                getPointerOffsetInCell(mockPointerEvent, incompleteCell);
+            }).toThrow();
+        });
+    });
+    describe('Performance and Memory', () => {
+        it('should not create unnecessary objects in hot paths', () => {
+            var _a, _b;
+            const startMemory = ((_a = performance.memory) === null || _a === void 0 ? void 0 : _a.usedJSHeapSize) || 0;
+            // Run calculations that should not allocate much memory
+            for (let i = 0; i < 1000; i++) {
+                calculateNewWidth(100 + i, (i % 20) - 10);
+                calculatePointerDelta(i + 50, i);
+                isInResizeHandle(i % 100, 100, 10);
+            }
+            const endMemory = ((_b = performance.memory) === null || _b === void 0 ? void 0 : _b.usedJSHeapSize) || 0;
+            const memoryIncrease = endMemory - startMemory;
+            // This is a loose check - mainly ensuring we don't have massive memory leaks
+            expect(memoryIncrease).toBeLessThan(1000000); // Less than 1MB increase
+        });
+        it('should handle high-frequency resize updates', () => {
+            const state = createResizeState(mockCell, mockPointerEvent);
+            const startTime = performance.now();
+            // Simulate high-frequency updates
+            for (let i = 0; i < 100; i++) {
+                const event = { pointerId: 1, clientX: 100 + i };
+                if (isValidResizeState(state, event)) {
+                    updateCellWidthFromResize(state, event);
+                }
+            }
+            const endTime = performance.now();
+            const duration = endTime - startTime;
+            // Should complete quickly
+            expect(duration).toBeLessThan(100); // Less than 100ms for 100 updates
+        });
+    });
+});
+//# sourceMappingURL=nv-table.utils.test.js.map