@sc4rfurryx/proteusjs 1.0.0

package/src/performance/__tests__/BatchDOMOperations.test.ts

@@ -0,0 +1,309 @@
+/**
+ * Tests for Batch DOM Operations
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { BatchDOMOperations } from '../BatchDOMOperations';
+
+// Mock requestAnimationFrame
+global.requestAnimationFrame = vi.fn((callback) => {
+  setTimeout(callback, 16);
+  return 1;
+});
+
+global.cancelAnimationFrame = vi.fn();
+
+describe('BatchDOMOperations', () => {
+  let batchDOM: BatchDOMOperations;
+  let testElement: HTMLElement;
+
+  beforeEach(() => {
+    batchDOM = new BatchDOMOperations({
+      maxBatchSize: 10,
+      frameTimeLimit: 16,
+      separateReadWrite: true,
+      autoFlush: false // Disable for testing
+    });
+
+    testElement = document.createElement('div');
+    testElement.style.width = '100px';
+    testElement.style.height = '100px';
+    document.body.appendChild(testElement);
+  });
+
+  afterEach(() => {
+    batchDOM.destroy();
+    document.body.removeChild(testElement);
+    vi.clearAllMocks();
+  });
+
+  describe('Read Operations', () => {
+    it('should queue and execute read operations', async () => {
+      const result = await batchDOM.queueRead(
+        testElement,
+        () => testElement.offsetWidth
+      );
+
+      expect(result).toBe(100);
+    });
+
+    it('should batch multiple reads efficiently', async () => {
+      const reads = [
+        batchDOM.queueRead(testElement, () => testElement.offsetWidth),
+        batchDOM.queueRead(testElement, () => testElement.offsetHeight),
+        batchDOM.queueRead(testElement, () => testElement.offsetTop)
+      ];
+
+      const results = await Promise.all(reads);
+      
+      expect(results[0]).toBe(100); // width
+      expect(results[1]).toBe(100); // height
+      expect(typeof results[2]).toBe('number'); // top
+    });
+
+    it('should handle read operation errors', async () => {
+      await expect(
+        batchDOM.queueRead(testElement, () => {
+          throw new Error('Test error');
+        })
+      ).rejects.toThrow('Test error');
+    });
+  });
+
+  describe('Write Operations', () => {
+    it('should queue and execute write operations', async () => {
+      await batchDOM.queueWrite(
+        testElement,
+        () => {
+          testElement.style.backgroundColor = 'red';
+        }
+      );
+
+      expect(testElement.style.backgroundColor).toBe('red');
+    });
+
+    it('should batch multiple writes efficiently', async () => {
+      const writes = [
+        batchDOM.queueWrite(testElement, () => {
+          testElement.style.color = 'blue';
+        }),
+        batchDOM.queueWrite(testElement, () => {
+          testElement.style.fontSize = '20px';
+        })
+      ];
+
+      await Promise.all(writes);
+      
+      expect(testElement.style.color).toBe('blue');
+      expect(testElement.style.fontSize).toBe('20px');
+    });
+  });
+
+  describe('Batch Style Operations', () => {
+    it('should batch multiple style changes', async () => {
+      await batchDOM.batchStyles(testElement, {
+        'background-color': 'green',
+        'border': '1px solid black',
+        'padding': '10px'
+      });
+
+      expect(testElement.style.backgroundColor).toBe('green');
+      expect(testElement.style.border).toBe('1px solid black');
+      expect(testElement.style.padding).toBe('10px');
+    });
+  });
+
+  describe('Batch Class Operations', () => {
+    it('should batch class changes', async () => {
+      testElement.className = 'initial-class';
+
+      await batchDOM.batchClasses(testElement, {
+        add: ['new-class', 'another-class'],
+        remove: ['initial-class'],
+        toggle: ['toggle-class']
+      });
+
+      expect(testElement.classList.contains('new-class')).toBe(true);
+      expect(testElement.classList.contains('another-class')).toBe(true);
+      expect(testElement.classList.contains('initial-class')).toBe(false);
+      expect(testElement.classList.contains('toggle-class')).toBe(true);
+    });
+  });
+
+  describe('Batch Attribute Operations', () => {
+    it('should batch attribute changes', async () => {
+      await batchDOM.batchAttributes(testElement, {
+        'data-test': 'value',
+        'aria-label': 'Test element',
+        'title': null // Should remove
+      });
+
+      expect(testElement.getAttribute('data-test')).toBe('value');
+      expect(testElement.getAttribute('aria-label')).toBe('Test element');
+      expect(testElement.hasAttribute('title')).toBe(false);
+    });
+  });
+
+  describe('Batch Read Operations', () => {
+    it('should batch multiple property reads', async () => {
+      const results = await batchDOM.batchReads(testElement, {
+        width: () => testElement.offsetWidth,
+        height: () => testElement.offsetHeight,
+        tagName: () => testElement.tagName
+      });
+
+      expect(results.width).toBe(100);
+      expect(results.height).toBe(100);
+      expect(results.tagName).toBe('DIV');
+    });
+  });
+
+  describe('Element Measurement', () => {
+    it('should measure element dimensions', async () => {
+      const measurements = await batchDOM.measureElement(
+        testElement,
+        ['width', 'height', 'top', 'left']
+      );
+
+      expect(measurements.width).toBe(100);
+      expect(measurements.height).toBe(100);
+      expect(typeof measurements.top).toBe('number');
+      expect(typeof measurements.left).toBe('number');
+    });
+
+    it('should measure only requested dimensions', async () => {
+      const measurements = await batchDOM.measureElement(
+        testElement,
+        ['width']
+      );
+
+      expect(measurements.width).toBe(100);
+      expect(measurements.height).toBeUndefined();
+    });
+  });
+
+  describe('Priority Handling', () => {
+    it('should respect operation priorities', async () => {
+      const executionOrder: string[] = [];
+
+      // Add operations with different priorities
+      const lowPriority = batchDOM.queueWrite(testElement, () => {
+        executionOrder.push('low');
+      }, 'low');
+
+      const highPriority = batchDOM.queueWrite(testElement, () => {
+        executionOrder.push('high');
+      }, 'high');
+
+      const normalPriority = batchDOM.queueWrite(testElement, () => {
+        executionOrder.push('normal');
+      }, 'normal');
+
+      await Promise.all([lowPriority, highPriority, normalPriority]);
+
+      // High priority should execute first
+      expect(executionOrder[0]).toBe('high');
+    });
+  });
+
+  describe('Read/Write Separation', () => {
+    it('should separate reads and writes to prevent layout thrashing', async () => {
+      const executionOrder: string[] = [];
+
+      // Mix reads and writes
+      const read1 = batchDOM.queueRead(testElement, () => {
+        executionOrder.push('read1');
+        return testElement.offsetWidth;
+      });
+
+      const write1 = batchDOM.queueWrite(testElement, () => {
+        executionOrder.push('write1');
+        testElement.style.width = '200px';
+      });
+
+      const read2 = batchDOM.queueRead(testElement, () => {
+        executionOrder.push('read2');
+        return testElement.offsetHeight;
+      });
+
+      const write2 = batchDOM.queueWrite(testElement, () => {
+        executionOrder.push('write2');
+        testElement.style.height = '200px';
+      });
+
+      await Promise.all([read1, write1, read2, write2]);
+
+      // All reads should come before writes
+      const readIndices = executionOrder
+        .map((op, index) => op.startsWith('read') ? index : -1)
+        .filter(index => index !== -1);
+      
+      const writeIndices = executionOrder
+        .map((op, index) => op.startsWith('write') ? index : -1)
+        .filter(index => index !== -1);
+
+      const lastReadIndex = Math.max(...readIndices);
+      const firstWriteIndex = Math.min(...writeIndices);
+
+      expect(lastReadIndex).toBeLessThan(firstWriteIndex);
+    });
+  });
+
+  describe('Performance Metrics', () => {
+    it('should track performance metrics', async () => {
+      const initialMetrics = batchDOM.getMetrics();
+      
+      await batchDOM.queueRead(testElement, () => testElement.offsetWidth);
+      await batchDOM.queueWrite(testElement, () => {
+        testElement.style.color = 'red';
+      });
+
+      const updatedMetrics = batchDOM.getMetrics();
+      
+      expect(updatedMetrics.totalOperations).toBeGreaterThan(initialMetrics.totalOperations);
+      expect(updatedMetrics.readOperations).toBeGreaterThan(initialMetrics.readOperations);
+      expect(updatedMetrics.writeOperations).toBeGreaterThan(initialMetrics.writeOperations);
+    });
+  });
+
+  describe('Flush Operations', () => {
+    it('should flush all queued operations', async () => {
+      let executed = false;
+
+      // Queue operation without auto-flush
+      batchDOM.queueWrite(testElement, () => {
+        executed = true;
+      });
+
+      // Should not be executed yet
+      expect(executed).toBe(false);
+
+      // Flush manually
+      await batchDOM.flush();
+
+      // Should be executed now
+      expect(executed).toBe(true);
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should clear all queues', () => {
+      batchDOM.queueRead(testElement, () => testElement.offsetWidth);
+      batchDOM.queueWrite(testElement, () => {
+        testElement.style.color = 'red';
+      });
+
+      const metricsBeforeClear = batchDOM.getMetrics();
+      expect(metricsBeforeClear.totalOperations).toBeGreaterThan(0);
+
+      batchDOM.clear();
+
+      // Queues should be empty after clear
+      // Note: We can't directly test queue size, but we can test that no new operations are processed
+    });
+
+    it('should destroy properly', () => {
+      expect(() => batchDOM.destroy()).not.toThrow();
+    });
+  });
+});

package/src/performance/__tests__/EfficientEventHandler.test.ts

@@ -0,0 +1,268 @@
+/**
+ * Tests for Efficient Event Handler
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { EfficientEventHandler } from '../EfficientEventHandler';
+
+// Mock ResizeObserver and IntersectionObserver
+global.ResizeObserver = vi.fn().mockImplementation((callback) => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+global.IntersectionObserver = vi.fn().mockImplementation((callback) => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Mock requestAnimationFrame
+global.requestAnimationFrame = vi.fn((callback) => {
+  setTimeout(callback, 16);
+  return 1;
+});
+
+global.cancelAnimationFrame = vi.fn();
+
+describe('EfficientEventHandler', () => {
+  let eventHandler: EfficientEventHandler;
+  let testElement: HTMLElement;
+
+  beforeEach(() => {
+    eventHandler = new EfficientEventHandler({
+      debounceDelay: 10,
+      throttleDelay: 10,
+      useRAF: false, // Use timer for testing
+      batchOperations: true,
+      performanceTarget: 16
+    });
+
+    testElement = document.createElement('div');
+    document.body.appendChild(testElement);
+  });
+
+  afterEach(() => {
+    eventHandler.destroy();
+    document.body.removeChild(testElement);
+    vi.clearAllMocks();
+  });
+
+  describe('Initialization', () => {
+    it('should initialize without errors', () => {
+      expect(() => eventHandler.initialize()).not.toThrow();
+    });
+
+    it('should setup observers when initialized', () => {
+      eventHandler.initialize();
+      expect(global.ResizeObserver).toHaveBeenCalled();
+      expect(global.IntersectionObserver).toHaveBeenCalled();
+    });
+  });
+
+  describe('Resize Observation', () => {
+    it('should register resize observation', () => {
+      eventHandler.initialize();
+      
+      const callback = vi.fn();
+      const operationId = eventHandler.observeResize(testElement, callback);
+      
+      expect(operationId).toBeDefined();
+      expect(typeof operationId).toBe('string');
+    });
+
+    it('should call resize callback when triggered', async () => {
+      eventHandler.initialize();
+      
+      const callback = vi.fn();
+      eventHandler.observeResize(testElement, callback);
+      
+      // Simulate resize
+      const resizeObserverInstance = (global.ResizeObserver as any).mock.instances[0];
+      const resizeCallback = (global.ResizeObserver as any).mock.calls[0][0];
+      
+      const mockEntry = {
+        target: testElement,
+        contentRect: { width: 100, height: 100 },
+        borderBoxSize: [{ inlineSize: 100, blockSize: 100 }],
+        contentBoxSize: [{ inlineSize: 100, blockSize: 100 }],
+        devicePixelContentBoxSize: [{ inlineSize: 100, blockSize: 100 }]
+      };
+      
+      resizeCallback([mockEntry]);
+      
+      // Wait for processing
+      await new Promise(resolve => setTimeout(resolve, 50));
+      
+      expect(callback).toHaveBeenCalled();
+    });
+  });
+
+  describe('Intersection Observation', () => {
+    it('should register intersection observation', () => {
+      eventHandler.initialize();
+      
+      const callback = vi.fn();
+      const operationId = eventHandler.observeIntersection(testElement, callback);
+      
+      expect(operationId).toBeDefined();
+      expect(typeof operationId).toBe('string');
+    });
+  });
+
+  describe('Debounced Events', () => {
+    it('should add debounced event listener', () => {
+      const callback = vi.fn();
+      const operationId = eventHandler.addDebouncedListener(testElement, 'click', callback);
+      
+      expect(operationId).toBeDefined();
+    });
+
+    it('should debounce rapid events', async () => {
+      const callback = vi.fn();
+      eventHandler.addDebouncedListener(testElement, 'click', callback, 20);
+      
+      // Trigger multiple events rapidly
+      testElement.click();
+      testElement.click();
+      testElement.click();
+      
+      // Should not be called immediately
+      expect(callback).not.toHaveBeenCalled();
+      
+      // Wait for debounce delay
+      await new Promise(resolve => setTimeout(resolve, 30));
+      
+      // Should be called only once after debounce
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Throttled Events', () => {
+    it('should add throttled event listener', () => {
+      const callback = vi.fn();
+      const operationId = eventHandler.addThrottledListener(testElement, 'scroll', callback);
+      
+      expect(operationId).toBeDefined();
+    });
+  });
+
+  describe('Performance Metrics', () => {
+    it('should provide performance metrics', () => {
+      const metrics = eventHandler.getMetrics();
+      
+      expect(metrics).toHaveProperty('frameTime');
+      expect(metrics).toHaveProperty('fps');
+      expect(metrics).toHaveProperty('operationsPerFrame');
+      expect(metrics).toHaveProperty('queueSize');
+      expect(metrics).toHaveProperty('droppedFrames');
+      expect(metrics).toHaveProperty('averageLatency');
+    });
+
+    it('should update metrics during operation', async () => {
+      eventHandler.initialize();
+      
+      const callback = vi.fn();
+      eventHandler.observeResize(testElement, callback);
+      
+      const initialMetrics = eventHandler.getMetrics();
+      
+      // Trigger some operations
+      const resizeCallback = (global.ResizeObserver as any).mock.calls[0][0];
+      resizeCallback([{
+        target: testElement,
+        contentRect: { width: 100, height: 100 }
+      }]);
+      
+      await new Promise(resolve => setTimeout(resolve, 50));
+      
+      const updatedMetrics = eventHandler.getMetrics();
+      expect(updatedMetrics.queueSize).toBeGreaterThanOrEqual(0);
+    });
+  });
+
+  describe('Operation Management', () => {
+    it('should remove operations from queue', () => {
+      eventHandler.initialize();
+      
+      const callback = vi.fn();
+      const operationId = eventHandler.observeResize(testElement, callback);
+      
+      eventHandler.removeOperation(operationId);
+      
+      // Operation should be removed from queue
+      const metrics = eventHandler.getMetrics();
+      expect(metrics.queueSize).toBe(0);
+    });
+
+    it('should flush all operations', async () => {
+      eventHandler.initialize();
+      
+      const callback = vi.fn();
+      eventHandler.observeResize(testElement, callback);
+      
+      // Add operation to queue
+      const resizeCallback = (global.ResizeObserver as any).mock.calls[0][0];
+      resizeCallback([{
+        target: testElement,
+        contentRect: { width: 100, height: 100 }
+      }]);
+      
+      // Flush operations
+      eventHandler.flush();
+      
+      await new Promise(resolve => setTimeout(resolve, 10));
+      
+      expect(callback).toHaveBeenCalled();
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should clean up resources on destroy', () => {
+      eventHandler.initialize();
+      
+      const resizeObserverInstance = (global.ResizeObserver as any).mock.instances[0];
+      const intersectionObserverInstance = (global.IntersectionObserver as any).mock.instances[0];
+      
+      eventHandler.destroy();
+      
+      expect(resizeObserverInstance.disconnect).toHaveBeenCalled();
+      expect(intersectionObserverInstance.disconnect).toHaveBeenCalled();
+    });
+  });
+
+  describe('Performance Budgeting', () => {
+    it('should respect performance budget', async () => {
+      const handler = new EfficientEventHandler({
+        performanceTarget: 1, // Very low budget
+        maxBatchSize: 1,
+        useRAF: false
+      });
+      
+      handler.initialize();
+      
+      const callbacks = Array.from({ length: 10 }, () => vi.fn());
+      
+      // Add many operations
+      callbacks.forEach((callback, index) => {
+        handler.observeResize(testElement, callback);
+      });
+      
+      // Trigger operations
+      const resizeCallback = (global.ResizeObserver as any).mock.calls[0][0];
+      resizeCallback(callbacks.map(() => ({
+        target: testElement,
+        contentRect: { width: 100, height: 100 }
+      })));
+      
+      await new Promise(resolve => setTimeout(resolve, 50));
+      
+      // Not all callbacks should be executed due to budget constraints
+      const executedCount = callbacks.filter(cb => cb.mock.calls.length > 0).length;
+      expect(executedCount).toBeLessThan(callbacks.length);
+      
+      handler.destroy();
+    });
+  });
+});