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

package/src/maquette/maquette.test.ts

@@ -0,0 +1,493 @@
+/**
+ * Tests for Maquette integration with CustomElement
+ */
+
+import { describe, it, expect } from 'vitest';
+import '../test-setup.js';
+import { CustomElement } from '../custom-element.js';
+import { customElementConfig } from '../decorators/custom-element-config.js';
+import { property } from '../decorators/property.js';
+import { h } from './h.js';
+import { generateUniqueTagName } from '../test-setup.js';
+import { waitForRender } from '../test-utils.js';
+
+describe('Maquette rendering', () => {
+  describe('h() function', () => {
+    it('should render simple vnodes', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return h('div', ['Hello World']);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const div = el.shadowRoot.querySelector('div');
+      expect(div).toBeDefined();
+      expect(div.textContent).toBe('Hello World');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should render nested vnodes', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return h('div', [
+            h('span', { class: 'child' }, ['Child 1']),
+            h('span', { class: 'child' }, ['Child 2'])
+          ]);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const spans = el.shadowRoot.querySelectorAll('span');
+      expect(spans.length).toBe(2);
+      expect(spans[0].textContent).toBe('Child 1');
+      expect(spans[1].textContent).toBe('Child 2');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should render with properties', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return h('button', { 
+            class: 'btn', 
+            disabled: true,
+            'data-test': 'value'
+          }, ['Click me']);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const button = el.shadowRoot.querySelector('button');
+      expect(button).toBeDefined();
+      expect(button.className).toBe('btn');
+      expect(button.disabled).toBe(true);
+      expect(button.getAttribute('data-test')).toBe('value');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle dynamic content updates', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: String })
+        message = 'Initial';
+
+        render() {
+          return h('p', [this.message]);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      let p = el.shadowRoot.querySelector('p');
+      expect(p.textContent).toBe('Initial');
+
+      el.message = 'Updated';
+      await waitForRender(el);
+
+      p = el.shadowRoot.querySelector('p');
+      expect(p.textContent).toBe('Updated');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should render lists of items',  async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property()
+        items = ['a', 'b', 'c'];
+
+        render() {
+          return h('ul', this.items.map(item => 
+            h('li', { key: item }, [item])
+          ));
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const lis = el.shadowRoot.querySelectorAll('li');
+      expect(lis.length).toBe(3);
+      expect(lis[0].textContent).toBe('a');
+      expect(lis[1].textContent).toBe('b');
+      expect(lis[2].textContent).toBe('c');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle conditional rendering', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: Boolean })
+        showContent = false;
+
+        render() {
+          return h('div', [
+            this.showContent ? h('p', ['Visible']) : null
+          ]);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      let p = el.shadowRoot.querySelector('p');
+      expect(p).toBeNull();
+
+      el.showContent = true;
+      await waitForRender(el);
+
+      p = el.shadowRoot.querySelector('p');
+      expect(p).toBeDefined();
+      expect(p.textContent).toBe('Visible');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Event handlers', () => {
+    it('should attach event handlers', async () => {
+      const tagName = generateUniqueTagName('event-test');
+      let clicked = false;
+      
+      @customElementConfig({ tagName })
+      class EventTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        handleClick() {
+          clicked = true;
+        }
+
+        render() {
+          return h('button', { onclick: () => this.handleClick() }, ['Click']);
+        }
+      }
+
+      const el = document.createElement(tagName) as EventTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const button = el.shadowRoot.querySelector('button');
+      button.click();
+
+      expect(clicked).toBe(true);
+      
+      document.body.removeChild(el);
+    });
+
+    it('should update event handlers', async () => {
+      const tagName = generateUniqueTagName('event-test');
+      let counter = 0;
+      
+      @customElementConfig({ tagName })
+      class EventTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: Number })
+        multiplier = 1;
+        
+        handleClick() {
+          counter += this.multiplier;
+          this.renderNow();
+        }
+
+        render() {
+          return h('button', { onclick: () => this.handleClick() }, [`Count: ${counter}`]);
+        }
+      }
+
+      const el = document.createElement(tagName) as EventTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const button = el.shadowRoot.querySelector('button');
+      
+      button.click();
+      await waitForRender(el);
+      expect(counter).toBe(1);
+
+      el.multiplier = 5;
+      await waitForRender(el);
+      button.click();
+      await waitForRender(el);
+      expect(counter).toBe(6); // 1 + 5
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Advanced rendering patterns', () => {
+    it('should handle conditional rendering', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: Boolean })
+        showMessage = false;
+
+        render() {
+          return h('div', [
+            this.showMessage ? h('span.message', ['Visible']) : null
+          ].filter(Boolean) as any);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.shadowRoot.querySelector('.message')).toBeNull();
+
+      el.showMessage = true;
+      await waitForRender(el);
+
+      expect(el.shadowRoot.querySelector('.message')).toBeDefined();
+      expect(el.shadowRoot.querySelector('.message')?.textContent).toBe('Visible');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle list rendering with keys', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property()
+        items: string[] = ['a', 'b', 'c'];
+
+        render() {
+          return h('ul', this.items.map(item => 
+            h('li', { key: item }, [item])
+          ));
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.shadowRoot.querySelectorAll('li').length).toBe(3);
+
+      el.items = ['b', 'c', 'd'];
+      await waitForRender(el);
+
+      expect(el.shadowRoot.querySelectorAll('li').length).toBe(3);
+      expect(el.shadowRoot.querySelectorAll('li')[0].textContent).toBe('b');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle nested component structures', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return h('div.container', [
+            h('header', [
+              h('h1', ['Title']),
+              h('nav', [
+                h('a', { href: '#' }, ['Link 1']),
+                h('a', { href: '#' }, ['Link 2']),
+              ])
+            ]),
+            h('main', [
+              h('article', [
+                h('p', ['Content'])
+              ])
+            ]),
+            h('footer', ['Footer'])
+          ]);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.shadowRoot.querySelector('h1')?.textContent).toBe('Title');
+      expect(el.shadowRoot.querySelectorAll('nav a').length).toBe(2);
+      expect(el.shadowRoot.querySelector('article p')?.textContent).toBe('Content');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle dynamic styles', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: String })
+        color = 'red';
+
+        render() {
+          return h('div', { 
+            styles: { 
+              color: this.color,
+              fontSize: '16px'
+            } 
+          }, ['Styled text']);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const div = el.shadowRoot.querySelector('div') as HTMLElement;
+      expect(div.style.color).toBe('red');
+
+      el.color = 'blue';
+      await waitForRender(el);
+
+      expect(div.style.color).toBe('blue');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle classes object', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        @property({ type: Boolean })
+        active = false;
+
+        render() {
+          return h('div', { 
+            classes: { 
+              'item': true,
+              'active': this.active,
+              'disabled': false
+            } 
+          }, ['Item']);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const div = el.shadowRoot.querySelector('div') as HTMLElement;
+      expect(div.classList.contains('item')).toBe(true);
+      expect(div.classList.contains('active')).toBe(false);
+      expect(div.classList.contains('disabled')).toBe(false);
+
+      el.active = true;
+      await waitForRender(el);
+
+      expect(div.classList.contains('active')).toBe(true);
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle afterCreate callback', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      let afterCreateCalled = false;
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return h('div', { 
+            afterCreate: (element: HTMLElement) => {
+              afterCreateCalled = true;
+              element.setAttribute('data-created', 'true');
+            }
+          }, ['Content']);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(afterCreateCalled).toBe(true);
+      expect(el.shadowRoot.querySelector('div')?.getAttribute('data-created')).toBe('true');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle data attributes', async () => {
+      const tagName = generateUniqueTagName('maquette-test');
+      
+      @customElementConfig({ tagName })
+      class MaquetteTest extends CustomElement {
+        static style = ':host { display: block; }';
+
+        render() {
+          return h('div', { 
+            'data-test': 'value',
+            'data-id': '123',
+            'aria-label': 'Test element'
+          }, ['Content']);
+        }
+      }
+
+      const el = document.createElement(tagName) as MaquetteTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const div = el.shadowRoot.querySelector('div') as HTMLElement;
+      expect(div.getAttribute('data-test')).toBe('value');
+      expect(div.getAttribute('data-id')).toBe('123');
+      expect(div.getAttribute('aria-label')).toBe('Test element');
+      
+      document.body.removeChild(el);
+    });
+  });
+});