p-elements-core 1.2.32-rc1 → 1.2.32-rc11

package/src/custom-element-controller.test.ts

@@ -0,0 +1,226 @@
+/**
+ * Tests for CustomElementController
+ */
+
+import { describe, it, expect } from 'vitest';
+import './test-setup.js';
+import { CustomElement } from './custom-element.js';
+import { CustomElementController } from './custom-element-controller.js';
+import { customElementConfig } from './decorators/custom-element-config.js';
+import { generateUniqueTagName } from './test-setup.js';
+import { waitForRender } from './test-utils.js';
+
+describe('CustomElementController', () => {
+  describe('Controller lifecycle', () => {
+    it('should register controller with host element', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let controller: TestController | null = null;
+
+      class TestController extends CustomElementController {
+        testMethod() {
+          return 'test';
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        controller: TestController;
+
+        init() {
+          this.controller = new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(el.controller).toBeDefined();
+      expect(el.controller.hostElement).toBe(el);
+      expect(el.controller.testMethod()).toBe('test');
+
+      document.body.removeChild(el);
+    });
+
+    it('should call controller.connected() on element connection', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let connectedCalled = false;
+
+      class TestController extends CustomElementController {
+        connected() {
+          connectedCalled = true;
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        init() {
+          new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      expect(connectedCalled).toBe(false);
+
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(connectedCalled).toBe(true);
+      document.body.removeChild(el);
+    });
+
+    it('should call controller.disconnected() on element disconnection', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let disconnectedCalled = false;
+
+      class TestController extends CustomElementController {
+        disconnected() {
+          disconnectedCalled = true;
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        init() {
+          new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(disconnectedCalled).toBe(false);
+
+      document.body.removeChild(el);
+      expect(disconnectedCalled).toBe(true);
+    });
+
+    it('should trigger render when controller calls renderNow()', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let renderCount = 0;
+
+      class TestController extends CustomElementController {
+        triggerRender() {
+          this.renderNow();
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        controller: TestController;
+
+        init() {
+          this.controller = new TestController(this);
+        }
+
+        render() {
+          renderCount++;
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const initialRenderCount = renderCount;
+      el.controller.triggerRender();
+      await waitForRender(el);
+
+      expect(renderCount).toBeGreaterThan(initialRenderCount);
+      document.body.removeChild(el);
+    });
+
+    it('should schedule render when controller calls scheduleRender()', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let renderCount = 0;
+
+      class TestController extends CustomElementController {
+        triggerSchedule() {
+          this.scheduleRender();
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        controller: TestController;
+
+        init() {
+          this.controller = new TestController(this);
+        }
+
+        render() {
+          renderCount++;
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      const initialRenderCount = renderCount;
+      el.controller.triggerSchedule();
+      await waitForRender(el);
+
+      expect(renderCount).toBeGreaterThan(initialRenderCount);
+      document.body.removeChild(el);
+    });
+
+    it('should call hostRenderStart and hostRenderDone hooks', async () => {
+      const tagName = generateUniqueTagName('controller-test');
+      let startCalled = false;
+      let doneCalled = false;
+
+      class TestController extends CustomElementController {
+        hostRenderStart() {
+          startCalled = true;
+        }
+
+        hostRenderDone() {
+          doneCalled = true;
+        }
+      }
+
+      @customElementConfig({ tagName })
+      class ControllerTest extends CustomElement {
+        static style = ':host { display: block; }';
+        
+        constructor() {
+          super();
+          new TestController(this);
+        }
+
+        render() {
+          return { vnodeSelector: 'div', properties: {}, children: [], text: undefined, domNode: null };
+        }
+      }
+
+      const el = document.createElement(tagName) as ControllerTest;
+      document.body.appendChild(el);
+      await waitForRender(el);
+
+      expect(startCalled).toBe(true);
+      expect(doneCalled).toBe(true);
+
+      document.body.removeChild(el);
+    });
+  });
+});