@datarailsshared/dr_renderer 1.5.150 → 1.5.159

package/tests/pivot-table/freeze-panes/sticky-strategy.test.js

@@ -0,0 +1,542 @@
+const stickyStrategy = require('../../../src/pivot-table/freeze-panes/sticky-strategy');
+const { STICKY_CSS_CLASSES, FREEZE_PANES_THRESHOLD_CHECK_DEBOUNCE_MS } = require('../../../src/pivot-table/freeze-panes/constants');
+
+describe('freeze-panes/sticky-strategy', () => {
+    describe('getClassStrings', () => {
+        it('should return sticky class strings when enabled', () => {
+            const result = stickyStrategy.getClassStrings(true);
+
+            expect(result.horizontal).toBe(' ' + STICKY_CSS_CLASSES.HORIZONTAL);
+            expect(result.vertical).toBe(' ' + STICKY_CSS_CLASSES.VERTICAL);
+            expect(result.axis).toBe(' ' + STICKY_CSS_CLASSES.AXIS);
+        });
+
+        it('should return empty strings when disabled', () => {
+            const result = stickyStrategy.getClassStrings(false);
+
+            expect(result.horizontal).toBe('');
+            expect(result.vertical).toBe('');
+            expect(result.axis).toBe('');
+        });
+
+        it('should return class strings with leading space', () => {
+            const result = stickyStrategy.getClassStrings(true);
+
+            expect(result.horizontal.startsWith(' ')).toBe(true);
+            expect(result.vertical.startsWith(' ')).toBe(true);
+            expect(result.axis.startsWith(' ')).toBe(true);
+        });
+    });
+
+    describe('initialize', () => {
+        let container;
+        let mockObserve;
+        let mockDisconnect;
+
+        beforeEach(() => {
+            container = document.createElement('div');
+            Object.defineProperty(container, 'clientWidth', { value: 1000, configurable: true });
+            Object.defineProperty(container, 'clientHeight', { value: 500, configurable: true });
+            document.body.appendChild(container);
+
+            mockObserve = jest.fn();
+            mockDisconnect = jest.fn();
+            global.ResizeObserver = jest.fn().mockImplementation(() => ({
+                observe: mockObserve,
+                disconnect: mockDisconnect,
+            }));
+        });
+
+        afterEach(() => {
+            document.body.removeChild(container);
+            jest.restoreAllMocks();
+        });
+
+        it('should apply container class', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            container.appendChild(table);
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(container.classList.contains(STICKY_CSS_CLASSES.CONTAINER)).toBe(true);
+        });
+
+        it('should return destroy function', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            container.appendChild(table);
+
+            const result = stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(result).toBeDefined();
+            expect(result.destroy).toBeInstanceOf(Function);
+        });
+
+        it('should disconnect observer on destroy', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            container.appendChild(table);
+
+            const result = stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+            result.destroy();
+
+            expect(mockDisconnect).toHaveBeenCalled();
+        });
+
+        it('should observe container for resize', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            container.appendChild(table);
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(mockObserve).toHaveBeenCalledWith(container);
+        });
+
+        it('should return noop destroy function when no table found', () => {
+            const result = stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(result.destroy).toBeInstanceOf(Function);
+            // Should not throw
+            result.destroy();
+        });
+
+        it('should handle missing rowAttrsLength', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            container.appendChild(table);
+
+            const result = stickyStrategy.initialize(container, {});
+
+            expect(result.destroy).toBeInstanceOf(Function);
+        });
+
+        it('should calculate sticky positions for header cells', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead>
+                    <tr>
+                        <th class="${STICKY_CSS_CLASSES.AXIS}">Axis</th>
+                        <th class="${STICKY_CSS_CLASSES.VERTICAL}">Header</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td class="${STICKY_CSS_CLASSES.HORIZONTAL}">Row Header</td>
+                        <td>Data</td>
+                    </tr>
+                </tbody>
+            `;
+            container.appendChild(table);
+
+            // Mock offsetHeight and offsetWidth
+            const th = table.querySelector('th');
+            Object.defineProperty(th, 'offsetHeight', { value: 30, configurable: true });
+            Object.defineProperty(th, 'offsetWidth', { value: 100, configurable: true });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            // The axis cell should have top style set
+            const axisCell = table.querySelector('.' + STICKY_CSS_CLASSES.AXIS);
+            expect(axisCell.style.top).toBe('0px');
+        });
+
+        it('should toggle rows disabled class based on threshold', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead>
+                    <tr><th>H1</th></tr>
+                    <tr><th>H2</th></tr>
+                    <tr><th>H3</th></tr>
+                    <tr><th>H4</th></tr>
+                </thead>
+                <tbody><tr><td>Data</td></tr></tbody>
+            `;
+            container.appendChild(table);
+
+            // Set container height small so rows exceed threshold
+            Object.defineProperty(container, 'clientHeight', { value: 100, configurable: true });
+
+            // Mock row heights to exceed 70% of container
+            table.querySelectorAll('thead tr').forEach(row => {
+                Object.defineProperty(row, 'offsetHeight', { value: 25, configurable: true });
+            });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 0 });
+
+            expect(table.classList.contains(STICKY_CSS_CLASSES.ROWS_DISABLED)).toBe(true);
+        });
+
+        it('should toggle columns disabled class based on threshold', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead><tr><th>Header</th></tr></thead>
+                <tbody>
+                    <tr>
+                        <td class="rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Row 1</td>
+                        <td>Data</td>
+                    </tr>
+                </tbody>
+            `;
+            container.appendChild(table);
+
+            // Set container width small so columns exceed threshold
+            Object.defineProperty(container, 'clientWidth', { value: 100, configurable: true });
+
+            // Mock cell width to exceed 70% of container
+            const firstCell = table.querySelector('tbody td');
+            Object.defineProperty(firstCell, 'offsetWidth', { value: 80, configurable: true });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            expect(table.classList.contains(STICKY_CSS_CLASSES.COLUMNS_DISABLED)).toBe(true);
+        });
+
+        it('should enable freeze when dimensions are zero', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = '<thead><tr><th>H</th></tr></thead><tbody><tr><td>D</td></tr></tbody>';
+            container.appendChild(table);
+
+            Object.defineProperty(container, 'clientWidth', { value: 0, configurable: true });
+            Object.defineProperty(container, 'clientHeight', { value: 0, configurable: true });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            // Should not disable rows/columns when dimensions are zero
+            expect(table.classList.contains(STICKY_CSS_CLASSES.ROWS_DISABLED)).toBe(false);
+            expect(table.classList.contains(STICKY_CSS_CLASSES.COLUMNS_DISABLED)).toBe(false);
+        });
+
+        it('should enable columns freeze when rowAttrsLength is 0', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = '<thead><tr><th>H</th></tr></thead><tbody><tr><td>D</td></tr></tbody>';
+            container.appendChild(table);
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 0 });
+
+            expect(table.classList.contains(STICKY_CSS_CLASSES.COLUMNS_DISABLED)).toBe(false);
+        });
+    });
+
+    describe('debounce behavior', () => {
+        let container;
+
+        beforeEach(() => {
+            jest.useFakeTimers();
+            container = document.createElement('div');
+            Object.defineProperty(container, 'clientWidth', { value: 1000, configurable: true });
+            Object.defineProperty(container, 'clientHeight', { value: 500, configurable: true });
+            document.body.appendChild(container);
+        });
+
+        afterEach(() => {
+            document.body.removeChild(container);
+            jest.useRealTimers();
+        });
+
+        it('should debounce resize observer callback', () => {
+            let observerCallback;
+            global.ResizeObserver = jest.fn().mockImplementation((callback) => {
+                observerCallback = callback;
+                return {
+                    observe: jest.fn(),
+                    disconnect: jest.fn(),
+                };
+            });
+
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = '<thead><tr><th>H</th></tr></thead><tbody><tr><td>D</td></tr></tbody>';
+            container.appendChild(table);
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            // Trigger multiple resize events
+            observerCallback();
+            observerCallback();
+            observerCallback();
+
+            // Fast-forward time but not enough for debounce
+            jest.advanceTimersByTime(100);
+
+            // Fast-forward past debounce time
+            jest.advanceTimersByTime(FREEZE_PANES_THRESHOLD_CHECK_DEBOUNCE_MS);
+
+            // The callback should have been called (no assertion needed, just ensuring no errors)
+            expect(true).toBe(true);
+        });
+    });
+
+    describe('calculateStickyPositions', () => {
+        let container;
+
+        beforeEach(() => {
+            container = document.createElement('div');
+            Object.defineProperty(container, 'clientWidth', { value: 1000, configurable: true });
+            Object.defineProperty(container, 'clientHeight', { value: 500, configurable: true });
+            document.body.appendChild(container);
+
+            global.ResizeObserver = jest.fn().mockImplementation(() => ({
+                observe: jest.fn(),
+                disconnect: jest.fn(),
+            }));
+        });
+
+        afterEach(() => {
+            document.body.removeChild(container);
+        });
+
+        it('should set top positions for multiple header rows', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead>
+                    <tr>
+                        <th class="${STICKY_CSS_CLASSES.VERTICAL}">Row 1</th>
+                    </tr>
+                    <tr>
+                        <th class="${STICKY_CSS_CLASSES.VERTICAL}">Row 2</th>
+                    </tr>
+                </thead>
+                <tbody><tr><td>Data</td></tr></tbody>
+            `;
+            container.appendChild(table);
+
+            const rows = table.querySelectorAll('thead tr');
+            rows.forEach(row => {
+                Object.defineProperty(row, 'offsetHeight', { value: 30, configurable: true });
+            });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 0 });
+
+            const verticalCells = table.querySelectorAll('.' + STICKY_CSS_CLASSES.VERTICAL);
+            expect(verticalCells[0].style.top).toBe('0px');
+            expect(verticalCells[1].style.top).toBe('30px');
+        });
+
+        it('should set left positions for row headers in tbody', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead><tr><th>Header</th></tr></thead>
+                <tbody>
+                    <tr>
+                        <td class="rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Col 1</td>
+                        <td class="rowcol1 ${STICKY_CSS_CLASSES.HORIZONTAL}">Col 2</td>
+                        <td>Data</td>
+                    </tr>
+                </tbody>
+            `;
+            container.appendChild(table);
+
+            const cells = table.querySelectorAll('.' + STICKY_CSS_CLASSES.HORIZONTAL);
+            cells.forEach(cell => {
+                Object.defineProperty(cell, 'offsetWidth', { value: 80, configurable: true });
+            });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 2 });
+
+            expect(cells[0].style.left).toBe('0px');
+            expect(cells[1].style.left).toBe('80px');
+        });
+
+        it('should set left positions for axis cells in thead', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead>
+                    <tr>
+                        <th class="${STICKY_CSS_CLASSES.AXIS}">Axis 1</th>
+                        <th class="${STICKY_CSS_CLASSES.AXIS}">Axis 2</th>
+                        <th class="${STICKY_CSS_CLASSES.VERTICAL}">Header</th>
+                    </tr>
+                </thead>
+                <tbody><tr><td>Data</td></tr></tbody>
+            `;
+            container.appendChild(table);
+
+            const rows = table.querySelectorAll('thead tr');
+            rows.forEach(row => {
+                Object.defineProperty(row, 'offsetHeight', { value: 30, configurable: true });
+            });
+
+            const axisCells = table.querySelectorAll('.' + STICKY_CSS_CLASSES.AXIS);
+            axisCells.forEach(cell => {
+                Object.defineProperty(cell, 'offsetWidth', { value: 100, configurable: true });
+            });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 2 });
+
+            expect(axisCells[0].style.left).toBe('0px');
+            expect(axisCells[1].style.left).toBe('100px');
+        });
+
+        it('should correctly position cells when subtotals are present', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            // Simulates subtotal structure where one <tr> has multiple <th> cells
+            table.innerHTML = `
+                <thead><tr><th>Header</th></tr></thead>
+                <tbody>
+                    <tr class="pvtRowSubtotal row0">
+                        <th class="pvtRowLabel row0 rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Category A</th>
+                        <th class="pvtRowLabel pvtRowSubtotal row0 rowcol0">Subtotal</th>
+                    </tr>
+                    <tr class="row1">
+                        <th class="pvtRowLabel row1 rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Category A</th>
+                        <th class="pvtRowLabel row1 rowcol1 ${STICKY_CSS_CLASSES.HORIZONTAL}">Item 1</th>
+                        <td>Data</td>
+                    </tr>
+                    <tr class="row2">
+                        <th class="pvtRowLabel row2 rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Category A</th>
+                        <th class="pvtRowLabel row2 rowcol1 ${STICKY_CSS_CLASSES.HORIZONTAL}">Item 2</th>
+                        <td>Data</td>
+                    </tr>
+                </tbody>
+            `;
+            container.appendChild(table);
+
+            // Mock offsetWidth for cells - different widths for different column levels
+            const horizontalCells = table.querySelectorAll('.' + STICKY_CSS_CLASSES.HORIZONTAL);
+            horizontalCells.forEach(cell => {
+                if (cell.classList.contains('rowcol0')) {
+                    Object.defineProperty(cell, 'offsetWidth', { value: 120, configurable: true });
+                } else if (cell.classList.contains('rowcol1')) {
+                    Object.defineProperty(cell, 'offsetWidth', { value: 80, configurable: true });
+                }
+            });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 2 });
+
+            // All rowcol0 cells should have left: 0px
+            // All rowcol1 cells should have left: 120px (width of rowcol0)
+            horizontalCells.forEach(cell => {
+                if (cell.classList.contains('rowcol0')) {
+                    expect(cell.style.left).toBe('0px');
+                } else if (cell.classList.contains('rowcol1')) {
+                    expect(cell.style.left).toBe('120px');
+                }
+            });
+        });
+
+        it('should skip subtotal placeholder cells when calculating widths', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead><tr><th>Header</th></tr></thead>
+                <tbody>
+                    <tr class="pvtRowSubtotal row0">
+                        <th class="pvtRowLabel row0 rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Category</th>
+                        <th class="pvtRowLabel pvtRowSubtotal row0 rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Subtotal</th>
+                    </tr>
+                </tbody>
+            `;
+            container.appendChild(table);
+
+            // Regular cell has width 100, subtotal cell has width 200
+            const horizontalCells = table.querySelectorAll('.' + STICKY_CSS_CLASSES.HORIZONTAL);
+            Object.defineProperty(horizontalCells[0], 'offsetWidth', { value: 100, configurable: true });
+            Object.defineProperty(horizontalCells[1], 'offsetWidth', { value: 200, configurable: true });
+
+            // The subtotal cell (pvtRowSubtotal class) should be ignored when calculating column widths
+            // So the positioning should be based on 100px, not 200px
+            stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+
+            // Both cells are rowcol0, so both should have left: 0px
+            expect(horizontalCells[0].style.left).toBe('0px');
+            expect(horizontalCells[1].style.left).toBe('0px');
+        });
+
+        it('should handle multiple row attribute levels with subtotals correctly', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead><tr><th>Header</th></tr></thead>
+                <tbody>
+                    <tr class="row0">
+                        <th class="rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Level 0</th>
+                        <th class="rowcol1 ${STICKY_CSS_CLASSES.HORIZONTAL}">Level 1</th>
+                        <th class="rowcol2 ${STICKY_CSS_CLASSES.HORIZONTAL}">Level 2</th>
+                        <td>Data</td>
+                    </tr>
+                    <tr class="pvtRowSubtotal row1">
+                        <th class="rowcol0 ${STICKY_CSS_CLASSES.HORIZONTAL}">Category</th>
+                        <th class="pvtRowSubtotal rowcol0">Subtotal</th>
+                    </tr>
+                </tbody>
+            `;
+            container.appendChild(table);
+
+            const horizontalCells = table.querySelectorAll('.' + STICKY_CSS_CLASSES.HORIZONTAL);
+            horizontalCells.forEach(cell => {
+                if (cell.classList.contains('rowcol0')) {
+                    Object.defineProperty(cell, 'offsetWidth', { value: 50, configurable: true });
+                } else if (cell.classList.contains('rowcol1')) {
+                    Object.defineProperty(cell, 'offsetWidth', { value: 60, configurable: true });
+                } else if (cell.classList.contains('rowcol2')) {
+                    Object.defineProperty(cell, 'offsetWidth', { value: 70, configurable: true });
+                }
+            });
+
+            stickyStrategy.initialize(container, { rowAttrsLength: 3 });
+
+            // Check positions: rowcol0 -> 0, rowcol1 -> 50, rowcol2 -> 110
+            horizontalCells.forEach(cell => {
+                if (cell.classList.contains('rowcol0')) {
+                    expect(cell.style.left).toBe('0px');
+                } else if (cell.classList.contains('rowcol1')) {
+                    expect(cell.style.left).toBe('50px');
+                } else if (cell.classList.contains('rowcol2')) {
+                    expect(cell.style.left).toBe('110px');
+                }
+            });
+        });
+
+        it('should handle empty tbody gracefully', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead><tr><th>Header</th></tr></thead>
+                <tbody></tbody>
+            `;
+            container.appendChild(table);
+
+            // Should not throw
+            expect(() => {
+                stickyStrategy.initialize(container, { rowAttrsLength: 2 });
+            }).not.toThrow();
+        });
+
+        it('should handle cells without rowcol classes', () => {
+            const table = document.createElement('table');
+            table.className = 'pvtTable';
+            table.innerHTML = `
+                <thead><tr><th>Header</th></tr></thead>
+                <tbody>
+                    <tr>
+                        <td class="${STICKY_CSS_CLASSES.HORIZONTAL}">No rowcol class</td>
+                        <td>Data</td>
+                    </tr>
+                </tbody>
+            `;
+            container.appendChild(table);
+
+            const horizontalCell = table.querySelector('.' + STICKY_CSS_CLASSES.HORIZONTAL);
+            Object.defineProperty(horizontalCell, 'offsetWidth', { value: 80, configurable: true });
+
+            // Should not throw, cell without rowcol class should not get positioned
+            expect(() => {
+                stickyStrategy.initialize(container, { rowAttrsLength: 1 });
+            }).not.toThrow();
+
+            // Cell without rowcol class should not have left style set
+            expect(horizontalCell.style.left).toBe('');
+        });
+    });
+});