p-elements-core 1.2.30 → 1.2.32-rc-10

package/src/maquette/projector.test.ts

@@ -0,0 +1,351 @@
+/**
+ * Tests for Maquette projector module
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createProjector } from './projector.js';
+import { h } from './h.js';
+
+describe('Maquette projector', () => {
+  let container: HTMLDivElement;
+  let projectors: Array<ReturnType<typeof createProjector>> = [];
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    projectors = [];
+  });
+
+  afterEach(() => {
+    // Stop all projectors to prevent async operations from interfering
+    projectors.forEach(p => {
+      try {
+        p.stop();
+      } catch (e) {
+        // Ignore errors if already stopped
+      }
+    });
+    
+    if (container.parentNode) {
+      document.body.removeChild(container);
+    }
+  });
+
+  describe('createProjector', () => {
+    it('should create a projector instance', () => {
+      const projector = createProjector();
+
+      expect(projector).toBeDefined();
+      expect(projector.append).toBeDefined();
+      expect(projector.merge).toBeDefined();
+      expect(projector.insertBefore).toBeDefined();
+      expect(projector.replace).toBeDefined();
+      expect(projector.scheduleRender).toBeDefined();
+      expect(projector.renderNow).toBeDefined();
+      expect(projector.stop).toBeDefined();
+      expect(projector.resume).toBeDefined();
+      expect(projector.detach).toBeDefined();
+    });
+
+    it('should append VNode and render', () => {
+      const projector = createProjector();
+      let text = 'Hello';
+
+      projector.append(container, () => h('div', [text]));
+
+      expect(container.children.length).toBe(1);
+      expect(container.children[0].textContent).toBe('Hello');
+
+      text = 'Updated';
+      projector.renderNow();
+
+      expect(container.children[0].textContent).toBe('Updated');
+    });
+
+    it('should schedule render on next animation frame', () => {
+      const projector = createProjector();
+      let count = 1;
+
+      projector.append(container, () => h('div', [`Count: ${count}`]));
+      expect(container.children[0].textContent).toBe('Count: 1');
+
+      count = 2;
+      projector.scheduleRender();
+
+      return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          expect(container.children[0].textContent).toBe('Count: 2');
+          projector.stop();
+          resolve();
+        });
+      });
+    });
+
+    it('should not schedule multiple renders', () => {
+      const projector = createProjector();
+      let renderCount = 0;
+
+      projector.append(container, () => {
+        renderCount++;
+        return h('div', [`Render ${renderCount}`]);
+      });
+
+      const initialRenderCount = renderCount;
+      
+      // Multiple scheduleRender calls should only trigger one render
+      projector.scheduleRender();
+      projector.scheduleRender();
+      projector.scheduleRender();
+
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          // Should have rendered only once more after initial
+          expect(renderCount).toBe(initialRenderCount + 1);
+          projector.stop();
+          resolve();
+        }, 50);
+      });
+    });
+
+    it('should stop rendering', () => {
+      const projector = createProjector();
+      let count = 1;
+
+      projector.append(container, () => h('div', [`Count: ${count}`]));
+      projector.stop();
+
+      count = 2;
+      projector.scheduleRender();
+
+      return new Promise<void>((resolve) => {
+        setTimeout(() => {
+          // Should not have updated because projector is stopped
+          expect(container.children[0].textContent).toBe('Count: 1');
+          resolve();
+        }, 100);
+      });
+    });
+
+    it('should resume rendering after stop', () => {
+      const projector = createProjector();
+      let count = 1;
+
+      projector.append(container, () => h('div', [`Count: ${count}`]));
+      projector.stop();
+
+      count = 2;
+      projector.resume();
+
+      return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          expect(container.children[0].textContent).toBe('Count: 2');
+          projector.stop();
+          resolve();
+        });
+      });
+    });
+
+    it('should merge with existing element', () => {
+      const existingDiv = document.createElement('div');
+      existingDiv.id = 'existing';
+      existingDiv.textContent = 'Original';
+      container.appendChild(existingDiv);
+
+      const projector = createProjector();
+      let mergedText = 'Merged';
+
+      projector.merge(existingDiv, () => h('div', [mergedText]));
+
+      expect(existingDiv.id).toBe('existing');
+      expect(existingDiv.textContent).toContain('Merged');
+    });
+
+    it('should insert before specified node', () => {
+      const firstChild = document.createElement('div');
+      firstChild.textContent = 'First';
+      container.appendChild(firstChild);
+
+      const lastChild = document.createElement('div');
+      lastChild.textContent = 'Last';
+      container.appendChild(lastChild);
+
+      const projector = createProjector();
+      projector.insertBefore(lastChild, () => h('div', ['Middle']));
+
+      expect(container.children.length).toBe(3);
+      expect(container.children[0].textContent).toBe('First');
+      expect(container.children[1].textContent).toBe('Middle');
+      expect(container.children[2].textContent).toBe('Last');
+    });
+
+    it('should replace element', () => {
+      const oldElement = document.createElement('div');
+      oldElement.textContent = 'Old';
+      container.appendChild(oldElement);
+
+      const projector = createProjector();
+      projector.replace(oldElement, () => h('span', ['New']));
+
+      expect(container.children.length).toBe(1);
+      expect(container.children[0].tagName).toBe('SPAN');
+      expect(container.children[0].textContent).toBe('New');
+    });
+
+    it('should handle multiple projections', () => {
+      const div1 = document.createElement('div');
+      const div2 = document.createElement('div');
+      container.appendChild(div1);
+      container.appendChild(div2);
+
+      const projector = createProjector();
+      let text1 = 'Projection 1';
+      let text2 = 'Projection 2';
+
+      projector.append(div1, () => h('span', [text1]));
+      projector.append(div2, () => h('span', [text2]));
+
+      expect(div1.children[0].textContent).toBe('Projection 1');
+      expect(div2.children[0].textContent).toBe('Projection 2');
+
+      text1 = 'Updated 1';
+      text2 = 'Updated 2';
+      projector.renderNow();
+
+      expect(div1.children[0].textContent).toBe('Updated 1');
+      expect(div2.children[0].textContent).toBe('Updated 2');
+    });
+
+    it('should detach render function', () => {
+      const projector = createProjector();
+      const renderFunc = () => h('div', ['Detachable']);
+
+      projector.append(container, renderFunc);
+      expect(container.children.length).toBe(1);
+
+      const detached = projector.detach(renderFunc);
+      expect(detached).toBeDefined();
+    });
+
+    it('should throw error when detaching non-existent render function', () => {
+      const projector = createProjector();
+      const renderFunc = () => h('div', ['Test']);
+
+      expect(() => {
+        projector.detach(renderFunc);
+      }).toThrow('renderFunction was not found');
+    });
+
+    it('should call performance logger', () => {
+      const logCalls: Array<{ type: string; detail: any }> = [];
+      const performanceLogger = (type: string, detail: any) => {
+        logCalls.push({ type, detail });
+      };
+
+      const projector = createProjector({ performanceLogger });
+      projector.append(container, () => h('div', ['Test']));
+      projector.renderNow();
+
+      expect(logCalls.length).toBeGreaterThan(0);
+      expect(logCalls.some(call => call.type === 'renderStart')).toBe(true);
+    });
+
+    it('should handle event handler interceptor', () => {
+      let clickCalled = false;
+      const handleClick = () => {
+        clickCalled = true;
+      };
+
+      const projector = createProjector();
+      projector.append(container, () => 
+        h('button', { onclick: handleClick }, ['Click me'])
+      );
+
+      const button = container.querySelector('button');
+      button?.click();
+
+      expect(clickCalled).toBe(true);
+    });
+
+    it('should trigger re-render when event handler is called', () => {
+      let count = 0;
+      let renderCount = 0;
+
+      const handleClick = () => {
+        count++;
+      };
+
+      const projector = createProjector();
+      projector.append(container, () => {
+        renderCount++;
+        return h('div', [
+          h('button', { onclick: handleClick }),
+          h('span', [`Count: ${count}`])
+        ]);
+      });
+
+      const initialRenderCount = renderCount;
+      const button = container.querySelector('button');
+      
+      button?.click();
+
+      return new Promise<void>((resolve) => {
+        requestAnimationFrame(() => {
+          expect(renderCount).toBeGreaterThan(initialRenderCount);
+          expect(container.querySelector('span')?.textContent).toBe('Count: 1');
+          projector.stop();
+          resolve();
+        });
+      });
+    });
+
+    it('should handle nested event handlers', () => {
+      let outerClicked = false;
+      let innerClicked = false;
+
+      const projector = createProjector();
+      projector.append(container, () =>
+        h('div', { onclick: () => { outerClicked = true; } }, [
+          h('button', { onclick: () => { innerClicked = true; } }, ['Inner'])
+        ])
+      );
+
+      const button = container.querySelector('button');
+      button?.click();
+
+      expect(innerClicked).toBe(true);
+    });
+
+    it('should update multiple times', () => {
+      const projector = createProjector();
+      let value = 0;
+
+      projector.append(container, () => h('div', [`Value: ${value}`]));
+
+      for (let i = 1; i <= 5; i++) {
+        value = i;
+        projector.renderNow();
+        expect(container.children[0].textContent).toBe(`Value: ${i}`);
+      }
+    });
+
+    it('should handle complex VNode updates', () => {
+      const projector = createProjector();
+      let items = ['a', 'b', 'c'];
+
+      projector.append(container, () =>
+        h('ul', items.map(item => h('li', { key: item }, [item])))
+      );
+
+      expect(container.querySelectorAll('li').length).toBe(3);
+
+      items = ['a', 'c', 'd', 'e'];
+      projector.renderNow();
+
+      expect(container.querySelectorAll('li').length).toBe(4);
+      expect(container.querySelectorAll('li')[0].textContent).toBe('a');
+      expect(container.querySelectorAll('li')[1].textContent).toBe('c');
+      expect(container.querySelectorAll('li')[2].textContent).toBe('d');
+      expect(container.querySelectorAll('li')[3].textContent).toBe('e');
+    });
+  });
+});