p-elements-core 1.2.32-rc8 → 1.2.32

package/src/decorators/property.test.ts

@@ -1,279 +1,279 @@
-/**
- * Tests for @property decorator
- * Covers type conversion, attribute reflection, custom converters, and lifecycle integration
- */
-
-import { describe, it, expect } from 'vitest';
-import '../test-setup.js';
-import { property } from './property.js';
-import { CustomElement } from '../custom-element.js';
-import { customElementConfig } from './custom-element-config.js';
-import { generateUniqueTagName } from '../test-setup.js';
-import { waitForRender } from '../test-utils.js';
-
-describe('@property decorator', () => {
-  describe('Type: String', () => {
-    it('should convert attribute to string property', async () => {
-      const tagName = generateUniqueTagName('prop-string');
-      
-      @customElementConfig({ tagName })
-      class StringTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: String })
-        text = 'default';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as StringTest;
-      el.setAttribute('text', 'hello');
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.text).toBe('hello');
-      
-      document.body.removeChild(el);
-    });
-
-    it('should set property from JavaScript', async () => {
-      const tagName = generateUniqueTagName('prop-string');
-      
-      @customElementConfig({ tagName })
-      class StringTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: String })
-        text = 'default';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as StringTest;
-      document.body.appendChild(el);
-      
-      el.text = 'updated';
-      await waitForRender(el);
-
-      expect(el.text).toBe('updated');
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Type: Number', () => {
-    it('should convert attribute to number property', async () => {
-      const tagName = generateUniqueTagName('prop-number');
-      
-      @customElementConfig({ tagName })
-      class NumberTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: Number })
-        count = 0;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as NumberTest;
-      el.setAttribute('count', '42');
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.count).toBe(42);
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Type: Boolean', () => {
-    it('should convert presence of attribute to true', async () => {
-      const tagName = generateUniqueTagName('prop-bool');
-      
-      @customElementConfig({ tagName })
-      class BooleanTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: Boolean })
-        active = false;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as BooleanTest;
-      el.setAttribute('active', '');
-      document.body.appendChild(el);
-      await waitForRender(el);
-
-      expect(el.active).toBe(true);
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Attribute reflection (reflect: true)', () => {
-    it('should reflect string property to attribute', async () => {
-      const tagName = generateUniqueTagName('prop-reflect');
-      
-      @customElementConfig({ tagName })
-      class ReflectTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: String, reflect: true })
-        status = 'pending';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ReflectTest;
-      document.body.appendChild(el);
-      
-      el.status = 'complete';
-      await waitForRender(el);
-
-      expect(el.getAttribute('status')).toBe('complete');
-      
-      document.body.removeChild(el);
-    });
-
-    it('should reflect boolean property to attribute', async () => {
-      const tagName = generateUniqueTagName('prop-reflect');
-      
-      @customElementConfig({ tagName })
-      class ReflectTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: Boolean, reflect: true })
-        active = false;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ReflectTest;
-      document.body.appendChild(el);
-      
-      el.active = true;
-      await waitForRender(el);
-      expect(el.hasAttribute('active')).toBe(true);
-
-      el.active = false;
-      await waitForRender(el);
-      expect(el.hasAttribute('active')).toBe(false);
-      
-      document.body.removeChild(el);
-    });
-
-    it('should reflect number property to attribute', async () => {
-      const tagName = generateUniqueTagName('prop-reflect');
-      
-      @customElementConfig({ tagName })
-      class ReflectTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: Number, reflect: true })
-        count = 0;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ReflectTest;
-      document.body.appendChild(el);
-      
-      el.count = 42;
-      await waitForRender(el);
-
-      expect(el.getAttribute('count')).toBe('42');
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Property without type conversion', () => {
-    it('should handle object properties', async () => {
-      const tagName = generateUniqueTagName('prop-object');
-      
-      @customElementConfig({ tagName })
-      class ObjectTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property()
-        data: any = null;
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ObjectTest;
-      document.body.appendChild(el);
-      
-      const testData = { foo: 'bar', num: 123 };
-      el.data = testData;
-      await waitForRender(el);
-
-      expect(el.data).toBe(testData);
-      expect(el.data.foo).toBe('bar');
-      
-      document.body.removeChild(el);
-    });
-
-    it('should handle array properties', async () => {
-      const tagName = generateUniqueTagName('prop-array');
-      
-      @customElementConfig({ tagName })
-      class ArrayTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property()
-        items: string[] = [];
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as ArrayTest;
-      document.body.appendChild(el);
-      
-      el.items = ['a', 'b', 'c'];
-      await waitForRender(el);
-
-      expect(el.items.length).toBe(3);
-      expect(el.items[0]).toBe('a');
-      
-      document.body.removeChild(el);
-    });
-  });
-
-  describe('Custom attribute names', () => {
-    it('should support custom attribute names', async () => {
-      const tagName = generateUniqueTagName('prop-custom');
-      
-      @customElementConfig({ tagName })
-      class CustomAttrTest extends CustomElement {
-        static style = ':host { display: block; }';
-        @property({ type: String, attribute: 'data-value' })
-        value = '';
-
-        render() {
-          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
-        }
-      }
-
-      const el = document.createElement(tagName) as CustomAttrTest;
-      document.body.appendChild(el);
-      
-      el.setAttribute('data-value', 'test');
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      expect(el.value).toBe('test');
-      
-      document.body.removeChild(el);
-    });
-  });
-});
+/**
+ * Tests for @property decorator
+ * Covers type conversion, attribute reflection, custom converters, and lifecycle integration
+ */
+
+import { describe, it, expect } from 'vitest';
+import '../test-setup.js';
+import { property } from './property.js';
+import { CustomElement } from '../custom-element.js';
+import { customElementConfig } from './custom-element-config.js';
+import { generateUniqueTagName } from '../test-setup.js';
+import { waitForRender } from '../test-utils.js';
+
+describe('@property decorator', () => {
+  describe('Type: String', () => {
+    it('should convert attribute to string property', async () => {
+      const tagName = generateUniqueTagName('prop-string');
+      
+      @customElementConfig({ tagName })
+      class StringTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String })
+        text = 'default';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as StringTest;
+      el.setAttribute('text', 'hello');
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.text).toBe('hello');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should set property from JavaScript', async () => {
+      const tagName = generateUniqueTagName('prop-string');
+      
+      @customElementConfig({ tagName })
+      class StringTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String })
+        text = 'default';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as StringTest;
+      document.body.appendChild(el);
+      
+      el.text = 'updated';
+      await waitForRender(el);
+
+      expect(el.text).toBe('updated');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Type: Number', () => {
+    it('should convert attribute to number property', async () => {
+      const tagName = generateUniqueTagName('prop-number');
+      
+      @customElementConfig({ tagName })
+      class NumberTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Number })
+        count = 0;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as NumberTest;
+      el.setAttribute('count', '42');
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.count).toBe(42);
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Type: Boolean', () => {
+    it('should convert presence of attribute to true', async () => {
+      const tagName = generateUniqueTagName('prop-bool');
+      
+      @customElementConfig({ tagName })
+      class BooleanTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Boolean })
+        active = false;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as BooleanTest;
+      el.setAttribute('active', '');
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.active).toBe(true);
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Attribute reflection (reflect: true)', () => {
+    it('should reflect string property to attribute', async () => {
+      const tagName = generateUniqueTagName('prop-reflect');
+      
+      @customElementConfig({ tagName })
+      class ReflectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String, reflect: true })
+        status = 'pending';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ReflectTest;
+      document.body.appendChild(el);
+      
+      el.status = 'complete';
+      await waitForRender(el);
+
+      expect(el.getAttribute('status')).toBe('complete');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should reflect boolean property to attribute', async () => {
+      const tagName = generateUniqueTagName('prop-reflect');
+      
+      @customElementConfig({ tagName })
+      class ReflectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Boolean, reflect: true })
+        active = false;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ReflectTest;
+      document.body.appendChild(el);
+      
+      el.active = true;
+      await waitForRender(el);
+      expect(el.hasAttribute('active')).toBe(true);
+
+      el.active = false;
+      await waitForRender(el);
+      expect(el.hasAttribute('active')).toBe(false);
+      
+      document.body.removeChild(el);
+    });
+
+    it('should reflect number property to attribute', async () => {
+      const tagName = generateUniqueTagName('prop-reflect');
+      
+      @customElementConfig({ tagName })
+      class ReflectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: Number, reflect: true })
+        count = 0;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ReflectTest;
+      document.body.appendChild(el);
+      
+      el.count = 42;
+      await waitForRender(el);
+
+      expect(el.getAttribute('count')).toBe('42');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Property without type conversion', () => {
+    it('should handle object properties', async () => {
+      const tagName = generateUniqueTagName('prop-object');
+      
+      @customElementConfig({ tagName })
+      class ObjectTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property()
+        data: any = null;
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ObjectTest;
+      document.body.appendChild(el);
+      
+      const testData = { foo: 'bar', num: 123 };
+      el.data = testData;
+      await waitForRender(el);
+
+      expect(el.data).toBe(testData);
+      expect(el.data.foo).toBe('bar');
+      
+      document.body.removeChild(el);
+    });
+
+    it('should handle array properties', async () => {
+      const tagName = generateUniqueTagName('prop-array');
+      
+      @customElementConfig({ tagName })
+      class ArrayTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property()
+        items: string[] = [];
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ArrayTest;
+      document.body.appendChild(el);
+      
+      el.items = ['a', 'b', 'c'];
+      await waitForRender(el);
+
+      expect(el.items.length).toBe(3);
+      expect(el.items[0]).toBe('a');
+      
+      document.body.removeChild(el);
+    });
+  });
+
+  describe('Custom attribute names', () => {
+    it('should support custom attribute names', async () => {
+      const tagName = generateUniqueTagName('prop-custom');
+      
+      @customElementConfig({ tagName })
+      class CustomAttrTest extends CustomElement {
+        static style = ':host { display: block; }';
+        @property({ type: String, attribute: 'data-value' })
+        value = '';
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as CustomAttrTest;
+      document.body.appendChild(el);
+      
+      el.setAttribute('data-value', 'test');
+      await new Promise(resolve => setTimeout(resolve, 10));
+
+      expect(el.value).toBe('test');
+      
+      document.body.removeChild(el);
+    });
+  });
+});