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

package/src/maquette/projection.test.ts

@@ -0,0 +1,366 @@
+/**
+ * Tests for Maquette projection module
+ */
+
+import { describe, it, expect, afterEach, beforeEach, vi } from 'vitest';
+import { h } from './h.js';
+import { createProjection } from './projection.js';
+
+describe('Maquette projection', () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    if (container.parentNode) {
+      document.body.removeChild(container);
+    }
+  });
+
+  describe('Projection lifecycle callbacks', () => {
+    it('should call afterUpdate when VNode is updated', () => {
+      const afterUpdate = vi.fn();
+      const dom = {
+        create: (vnode: any) => document.createElement(vnode.vnodeSelector),
+        append: (parentNode: any, newNode: any) => parentNode.appendChild(newNode),
+        insertBefore: (parentNode: any, newNode: any, referenceNode: any) => 
+          parentNode.insertBefore(newNode, referenceNode),
+        detach: (domNode: any) => domNode.parentNode?.removeChild(domNode),
+        merge: (element: any, vnode: any) => vnode.domNode = element,
+      };
+
+      let vnode = h('div', { afterUpdate }, ['Initial']);
+      dom.merge(container, vnode);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      // Update should trigger afterUpdate
+      projection.update(h('div', { afterUpdate }, ['Updated']));
+      
+      expect(afterUpdate).toHaveBeenCalled();
+    });
+
+    it('should call updateAnimation when VNode properties change', () => {
+      const updateAnimation = vi.fn();
+      
+      let vnode = h('div', { class: 'initial', updateAnimation });
+      const element = document.createElement('div');
+      element.className = 'initial';
+      vnode.domNode = element;
+      container.appendChild(element);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      // Update with different properties - updateAnimation is called when properties are updated
+      const updatedVnode = h('div', { class: 'updated', id: 'test', updateAnimation });
+      projection.update(updatedVnode);
+      
+      // updateAnimation is called when DOM updates happen
+      expect(updateAnimation).toHaveBeenCalled();
+    });
+
+    it('should call afterCreate callback when element is created', () => {
+      const afterCreate = vi.fn();
+      
+      const vnode = h('div', { afterCreate }, ['Content']);
+      const element = document.createElement('div');
+      vnode.domNode = element;
+      container.appendChild(element);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      // Update to trigger lifecycle
+      projection.update(h('div', { afterCreate }, ['Updated']));
+      
+      // afterCreate should have been called during initial render
+      expect(projection.domNode).toBe(element);
+    });
+  });
+
+  describe('Projection updates', () => {
+    it('should throw error when selector changes', () => {
+      const vnode = h('div', ['Content']);
+      const element = document.createElement('div');
+      vnode.domNode = element;
+      container.appendChild(element);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      expect(() => {
+        projection.update(h('span', ['Content']));
+      }).toThrow('The selector for the root VNode may not be changed');
+    });
+
+    it('should update text content when text changes', () => {
+      const vnode = h('div.text-node', { key: 'test' }, ['Initial text']);
+      const element = document.createElement('div');
+      element.className = 'text-node';
+      element.textContent = 'Initial text';
+      vnode.domNode = element;
+      container.appendChild(element);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      projection.update(h('div.text-node', { key: 'test' }, ['Updated text']));
+      
+      expect(element.textContent).toBe('Updated text');
+    });
+
+    it('should handle text node to empty update', () => {
+      const vnode = h('div', { key: 'test' }, ['Text']);
+      const element = document.createElement('div');
+      const textNode = document.createTextNode('Text');
+      element.appendChild(textNode);
+      vnode.domNode = element;
+      container.appendChild(element);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      // Update to have no text
+      projection.update(h('div', { key: 'test' }));
+      
+      expect(element.childNodes.length).toBe(0);
+    });
+  });
+
+  describe('SVG namespace handling', () => {
+    it('should handle SVG namespace for svg elements', () => {
+      const circleChild = h('circle', { r: 10, cx: 20, cy: 20 });
+      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+      circle.setAttribute('r', '10');
+      circle.setAttribute('cx', '20');
+      circle.setAttribute('cy', '20');
+      circleChild.domNode = circle;
+      
+      const svgVnode = h('svg', [circleChild]);
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.appendChild(circle);
+      svgVnode.domNode = svg;
+      container.appendChild(svg);
+      
+      const projection = createProjection(svgVnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      // Update SVG child
+      const updatedCircle = h('circle', { r: 15, cx: 20, cy: 20 });
+      projection.update(h('svg', [updatedCircle]));
+      
+      expect(svg.children.length).toBe(1);
+      expect(svg.children[0].getAttribute('r')).toBe('15');
+    });
+  });
+
+  describe('Property updates', () => {
+    it('should update boolean attributes correctly', () => {
+      const vnode = h('input', { type: 'checkbox', checked: false });
+      const input = document.createElement('input') as HTMLInputElement;
+      input.type = 'checkbox';
+      vnode.domNode = input;
+      container.appendChild(input);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      projection.update(h('input', { type: 'checkbox', checked: true }));
+      
+      expect(input.checked).toBe(true);
+    });
+
+    it('should handle style updates', () => {
+      const vnode = h('div', { styles: { color: 'red' } });
+      const div = document.createElement('div');
+      vnode.domNode = div;
+      container.appendChild(div);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      projection.update(h('div', { styles: { color: 'blue', fontSize: '14px' } }));
+      
+      expect(div.style.color).toBe('blue');
+      expect(div.style.fontSize).toBe('14px');
+    });
+
+    it('should handle class string updates', () => {
+      const vnode = h('div', { class: 'class1 class2' });
+      const div = document.createElement('div');
+      div.className = 'class1 class2';
+      vnode.domNode = div;
+      container.appendChild(div);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      projection.update(h('div', { class: 'class3 class4' }));
+      
+      expect(div.className).toBe('class3 class4');
+    });
+  });
+
+  describe('Children updates', () => {
+    it('should add new children', () => {
+      const vnode = h('div', [h('span', { key: '1' }, ['1'])]);
+      const div = document.createElement('div');
+      const span = document.createElement('span');
+      span.textContent = '1';
+      div.appendChild(span);
+      vnode.domNode = div;
+      vnode.children![0].domNode = span;
+      container.appendChild(div);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      projection.update(h('div', [
+        h('span', { key: '1' }, ['1']),
+        h('span', { key: '2' }, ['2'])
+      ]));
+      
+      expect(div.children.length).toBe(2);
+    });
+
+    it('should remove children', () => {
+      const vnode = h('div', [
+        h('span', { key: '1' }, ['1']),
+        h('span', { key: '2' }, ['2'])
+      ]);
+      const div = document.createElement('div');
+      const span1 = document.createElement('span');
+      const span2 = document.createElement('span');
+      span1.textContent = '1';
+      span2.textContent = '2';
+      div.appendChild(span1);
+      div.appendChild(span2);
+      vnode.domNode = div;
+      vnode.children![0].domNode = span1;
+      vnode.children![1].domNode = span2;
+      container.appendChild(div);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      projection.update(h('div', [h('span', { key: '1' }, ['1'])]));
+      
+      expect(div.children.length).toBe(1);
+    });
+
+    it('should reorder children with keys', () => {
+      const vnode = h('div', [
+        h('span', { key: 'a' }, ['A']),
+        h('span', { key: 'b' }, ['B']),
+        h('span', { key: 'c' }, ['C'])
+      ]);
+      
+      const div = document.createElement('div');
+      const spanA = document.createElement('span');
+      const spanB = document.createElement('span');
+      const spanC = document.createElement('span');
+      spanA.textContent = 'A';
+      spanB.textContent = 'B';
+      spanC.textContent = 'C';
+      div.appendChild(spanA);
+      div.appendChild(spanB);
+      div.appendChild(spanC);
+      vnode.domNode = div;
+      vnode.children![0].domNode = spanA;
+      vnode.children![1].domNode = spanB;
+      vnode.children![2].domNode = spanC;
+      container.appendChild(div);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      // Reorder: C, A, B
+      projection.update(h('div', [
+        h('span', { key: 'c' }, ['C']),
+        h('span', { key: 'a' }, ['A']),
+        h('span', { key: 'b' }, ['B'])
+      ]));
+      
+      expect(div.children[0].textContent).toBe('C');
+      expect(div.children[1].textContent).toBe('A');
+      expect(div.children[2].textContent).toBe('B');
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle getLastRender', () => {
+      const vnode = h('div', ['Content']);
+      const element = document.createElement('div');
+      vnode.domNode = element;
+      container.appendChild(element);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      const lastRender = projection.getLastRender();
+      expect(lastRender.vnodeSelector).toBe('div');
+    });
+
+    it('should expose domNode in projection', () => {
+      const vnode = h('div', ['Content']);
+      const element = document.createElement('div');
+      vnode.domNode = element;
+      container.appendChild(element);
+      
+      const projection = createProjection(vnode, { 
+        styleApplyer: (domNode, styleName, value) => {
+          (domNode as any).style[styleName] = value;
+        }
+      });
+      
+      expect(projection.domNode).toBe(element);
+    });
+  });
+});