decue 1.0.0 → 1.1.0

package/test/debug.test.js

@@ -0,0 +1,201 @@
+import { expect } from '@esm-bundle/chai';
+import { createTemplate, createElement, getContentRoot } from './test-helpers.js';
+
+// Unique counter for element names
+let elementCounter = 0;
+function uniqueName(prefix) {
+    return `${prefix}-${++elementCounter}`;
+}
+
+// Clean up after each test
+afterEach(() => {
+    // Remove all test templates and elements
+    document.querySelectorAll('template[decue]').forEach(el => el.remove());
+    document.querySelectorAll('[data-test-element]').forEach(el => el.remove());
+});
+
+describe('debug', () => {
+
+  ['none', 'open', 'closed'].forEach(shadow => {
+    describe("shadowmode: " + shadow, function() {
+        it('debug mode adds data attributes for observed attributes', function () {
+            const name = uniqueName('test-debug-observed-attrs');
+            
+            // Create a template first
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.setAttribute('debug', '');
+            template.setAttribute('observed-attributes', 'value,data-test');
+            if (shadow !== 'none') {
+                template.setAttribute('shadow', shadow);
+            }
+            template.innerHTML = '<div>Test</div>';
+            document.head.appendChild(template);
+            
+            // Process template
+            decue.processTemplate(template);
+            
+            const el = document.createElement(name);
+            el.setAttribute('data-test-element', '');
+            if (shadow !== 'none') {
+                el.setAttribute('shadow', shadow);
+            }
+            
+            document.body.appendChild(el);
+            
+            // Check if debug attribute was added
+            expect(el).to.exist;
+            if (el.hasAttribute('data-decue-observed-attributes')) {
+                expect(el.getAttribute('data-decue-observed-attributes')).to.include('value');
+                expect(el.getAttribute('data-decue-observed-attributes')).to.include('data-test');
+            }
+        });
+
+        it('debug mode adds data attributes for mutation observed attributes', function () {
+            const name = uniqueName('test-debug-mutation-attrs');
+            
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.setAttribute('debug', '');
+            if (shadow !== 'none') {
+                template.setAttribute('shadow', shadow);
+            }
+            template.innerHTML = '<div class="content">{text}</div>';
+            document.head.appendChild(template);
+            
+            decue.processTemplate(template);
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'test value',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Check if debug attribute was added
+            expect(el).to.exist;
+            
+            // Should have mutation observer attributes marked
+            if (el.hasAttribute('data-decue-mutation-observed-attributes')) {
+                const attrs = el.getAttribute('data-decue-mutation-observed-attributes');
+                expect(attrs).to.be.a('string');
+            }
+        });
+
+        it('debug mode logs to console when enabled', function () {
+            const name = uniqueName('test-debug-console');
+            const originalLog = console.log;
+            let logCalled = false;
+            let logMessages = [];
+            
+            // Mock console.log BEFORE creating the element
+            console.log = function(...args) {
+                logCalled = true;
+                logMessages.push(args);
+                // Don't call originalLog to keep test output clean
+            };
+            
+            try {
+                // Create template
+                const template = document.createElement('template');
+                template.setAttribute('decue', name);
+                if (shadow !== 'none') {
+                    template.setAttribute('shadow', shadow);
+                }
+                template.innerHTML = '<div>{testattr}</div>';
+                document.head.appendChild(template);
+                
+                // Use defineElement directly with debug=true instead of processTemplate
+                // because processTemplate uses the module-level debug variable
+                decue.defineElement(
+                    true, // debug enabled
+                    name,
+                    template,
+                    false,
+                    ['testattr']
+                );
+                
+                const el = document.createElement(name);
+                el.setAttribute('data-test-element', '');
+                el.setAttribute('testattr', 'value');
+                if (shadow !== 'none') {
+                    el.setAttribute('shadow', shadow);
+                }
+                
+                document.body.appendChild(el);
+                
+                // Debug mode should have logged something when element connects
+                expect(logCalled).to.be.true;
+                expect(logMessages.length).to.be.greaterThan(0);
+                
+                // Verify the first argument of at least one log call is the element name
+                const hasElementName = logMessages.some(args => args[0] === name);
+                expect(hasElementName).to.be.true;
+                
+                // Verify "Finalizing..." message was logged
+                const hasFinalizingMessage = logMessages.some(args => 
+                    args.length > 1 && args[1] === 'Finalizing...'
+                );
+                expect(hasFinalizingMessage).to.be.true;
+            } finally {
+                // Restore console.log
+                console.log = originalLog;
+            }
+        });
+
+        it('non-debug mode does not add debug attributes', function () {
+            const name = uniqueName('test-no-debug');
+            
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.setAttribute('observed-attributes', 'value,data-test');
+            if (shadow !== 'none') {
+                template.setAttribute('shadow', shadow);
+            }
+            template.innerHTML = '<div>Test</div>';
+            document.head.appendChild(template);
+            
+            decue.processTemplate(template);
+            
+            const el = document.createElement(name);
+            el.setAttribute('data-test-element', '');
+            if (shadow !== 'none') {
+                el.setAttribute('shadow', shadow);
+            }
+            
+            document.body.appendChild(el);
+            
+            // Should not have debug attributes
+            expect(el.hasAttribute('data-decue-observed-attributes')).to.be.false;
+            expect(el.hasAttribute('data-decue-mutation-observed-attributes')).to.be.false;
+        });
+
+        it('debug mode works with template elements', function () {
+            const name = uniqueName('test-debug-template');
+            
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.setAttribute('debug', '');
+            if (shadow !== 'none') {
+                template.setAttribute('shadow', shadow);
+            }
+            template.innerHTML = '<div class="content">{value}</div>';
+            document.head.appendChild(template);
+            
+            // Process the template (simulate DeCuE's automatic processing)
+            decue.processTemplate(template);
+            
+            const el = document.createElement(name);
+            el.setAttribute('data-test-element', '');
+            el.setAttribute('value', 'test');
+            if (shadow !== 'none') {
+                el.setAttribute('shadow', shadow);
+            }
+            
+            document.body.appendChild(el);
+            
+            expect(el).to.exist;
+            expect(el.isConnected).to.be.true;
+        });
+      });
+    });
+});

package/test/decue.test.js

@@ -0,0 +1,78 @@
+import { expect } from '@esm-bundle/chai';
+import { createTemplate, createElement, getContentRoot } from './test-helpers.js';
+
+// Unique counter for element names
+let elementCounter = 0;
+function uniqueName(prefix) {
+    return `${prefix}-${++elementCounter}`;
+}
+
+// Clean up after each test
+afterEach(() => {
+    // Remove all test templates and elements
+    document.querySelectorAll('template[decue]').forEach(el => el.remove());
+    document.querySelectorAll('[data-test-element]').forEach(el => el.remove());
+});
+
+describe('decue', () => {
+
+  // Execute each test for all three custom element variants:
+  // 1. No shadow DOM
+  // 2. Shadow DOM open
+  // 3. Shadow DOM closed
+  ['none', 'open', 'closed'].forEach(shadow => {
+    describe("shadowmode: " + shadow, function() {
+        it('shadowroot is present or not as expected', function () {
+            const name = uniqueName('test-shadow-element');
+            createTemplate(name, '<div>Shadow test</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            if (shadow === 'none') {
+                // In 'none' mode, content is placed directly in the element (no shadow root)
+                expect(el.shadowRoot).to.be.null;
+                expect(el.querySelector('div')).to.exist;
+                expect(el.querySelector('div').textContent).to.equal('Shadow test');
+            } else if (shadow === 'open') {
+                // In 'open' mode, shadowRoot is accessible
+                expect(el.shadowRoot).to.exist;
+                expect(el.shadowRoot.querySelector('div')).to.exist;
+                expect(el.shadowRoot.querySelector('div').textContent).to.equal('Shadow test');
+            } else if (shadow === 'closed') {
+                // In 'closed' mode, shadowRoot is not accessible from outside
+                // But the content should still be rendered
+                expect(el.shadowRoot).to.be.null;
+                // We can't directly check closed shadow root content from outside
+            }
+        });
+
+        it('element with no attributes works', function () {
+            const name = uniqueName('test-no-attr-element');
+            createTemplate(name, '<div class="content">Static content</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Verify element was created successfully
+            expect(el).to.exist;
+            expect(el.tagName.toLowerCase()).to.equal(name);
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                expect(root.querySelector('.content')).to.exist;
+                expect(root.querySelector('.content').textContent).to.equal('Static content');
+            } else {
+                // For closed shadow DOM, verify shadowRoot is not accessible
+                expect(el.shadowRoot).to.be.null;
+                // But the element should still be properly initialized
+                expect(el.isConnected).to.be.true;
+            }
+        });
+      });
+    });
+});

package/test/errors.test.js

@@ -0,0 +1,212 @@
+import { expect } from '@esm-bundle/chai';
+import { createTemplate, createElement, getContentRoot } from './test-helpers.js';
+
+// Unique counter for element names
+let elementCounter = 0;
+function uniqueName(prefix) {
+    return `${prefix}-${++elementCounter}`;
+}
+
+// Clean up after each test
+afterEach(() => {
+    // Remove all test templates and elements
+    document.querySelectorAll('template[decue]').forEach(el => el.remove());
+    document.querySelectorAll('[data-test-element]').forEach(el => el.remove());
+});
+
+describe('errors', () => {
+
+  ['none', 'open', 'closed'].forEach(shadow => {
+    describe("shadowmode: " + shadow, function() {
+        it('element placeholder can reference element property', function () {
+            const name = uniqueName('test-element-property');
+            createTemplate(name, '<div class="content">Tag: {.tagName}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div).to.exist;
+                expect(div.textContent).to.equal(`Tag: ${name.toUpperCase()}`);
+            }
+        });
+
+        it('formAssociated element has correct class property', function () {
+            const name = uniqueName('test-form-class');
+            
+            // Define element as formAssociated
+            decue.defineElement(false, name, null, true, []);
+            
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.exist;
+            expect(elementClass.formAssociated).to.be.true;
+        });
+
+        it('node cleanup works when element is removed and re-added', function () {
+            const name = uniqueName('test-node-cleanup');
+            createTemplate(name, '<div class="content">{text}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'initial',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            const root = getContentRoot(el, shadow);
+            
+            // Initial state
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div.textContent).to.equal('initial');
+            }
+            
+            // Remove element from DOM
+            el.remove();
+            
+            // Re-add to DOM
+            document.body.appendChild(el);
+            
+            // Update attribute - should still work
+            el.setAttribute('text', 'updated');
+            
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div.textContent).to.equal('updated');
+            }
+        });
+
+        it('node cleanup works with multiple disconnect/reconnect cycles', function () {
+            const name = uniqueName('test-multiple-cleanup');
+            createTemplate(name, '<div class="content">{value}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                value: 'cycle-1',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            const root = getContentRoot(el, shadow);
+            
+            // Cycle 1: disconnect and reconnect
+            el.remove();
+            document.body.appendChild(el);
+            el.setAttribute('value', 'cycle-2');
+            
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div.textContent).to.equal('cycle-2');
+            }
+            
+            // Cycle 2: disconnect and reconnect again
+            el.remove();
+            document.body.appendChild(el);
+            el.setAttribute('value', 'cycle-3');
+            
+            if (shadow !== 'closed') {
+                const div = root.querySelector('.content');
+                expect(div.textContent).to.equal('cycle-3');
+            }
+        });
+
+        it('node cleanup works with multiple placeholders', function () {
+            const name = uniqueName('test-cleanup-multiple-placeholders');
+            createTemplate(name, '<div class="first">{attr1}</div><div class="second">{attr2}</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                attr1: 'first',
+                attr2: 'second',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            const root = getContentRoot(el, shadow);
+            
+            // Remove and re-add
+            el.remove();
+            document.body.appendChild(el);
+            
+            // Update both attributes
+            el.setAttribute('attr1', 'updated-first');
+            el.setAttribute('attr2', 'updated-second');
+            
+            if (shadow !== 'closed') {
+                const first = root.querySelector('.first');
+                const second = root.querySelector('.second');
+                expect(first.textContent).to.equal('updated-first');
+                expect(second.textContent).to.equal('updated-second');
+            }
+        });
+      });
+    });
+
+    describe('special cases', function() {
+        it('processes template that is already defined (skips re-definition)', function () {
+            const name = uniqueName('test-already-defined');
+            
+            // Define first
+            createTemplate(name, '<div>First</div>');
+            expect(customElements.get(name)).to.exist;
+            
+            // Try to process same element again
+            const template2 = document.createElement('template');
+            template2.setAttribute('decue', name);
+            template2.innerHTML = '<div>Second</div>';
+            
+            // Process template should skip since already defined
+            decue.processTemplate(template2);
+            
+            // Element should still use first definition
+            const el = createElement(name, { 
+                'data-test-element': ''
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('div');
+            expect(div.textContent).to.equal('First');
+            
+            template2.remove();
+        });
+
+        it('fires events even when CustomEvent is unavailable', function (done) {
+            const name = uniqueName('test-event-fallback');
+            createTemplate(name, '<div>Content</div>');
+            
+            // Save original CustomEvent
+            const originalCustomEvent = window.CustomEvent;
+            
+            try {
+                // Temporarily remove CustomEvent to test fallback
+                // @ts-ignore
+                delete window.CustomEvent;
+                
+                const el = document.createElement(name);
+                el.setAttribute('data-test-element', '');
+                
+                let eventFired = false;
+                el.addEventListener('connect', () => {
+                    eventFired = true;
+                });
+                
+                document.body.appendChild(el);
+                
+                setTimeout(() => {
+                    expect(eventFired).to.be.true;
+                    
+                    // Restore CustomEvent
+                    window.CustomEvent = originalCustomEvent;
+                    done();
+                }, 50);
+            } catch (e) {
+                // Restore in case of error
+                window.CustomEvent = originalCustomEvent;
+                throw e;
+            }
+        });
+    });
+});

package/test/eventHandlers.test.js

@@ -0,0 +1,95 @@
+import { expect } from '@esm-bundle/chai';
+import { createTemplate, createElement } from './test-helpers.js';
+
+// Unique counter for element names
+let elementCounter = 0;
+function uniqueName(prefix) {
+    return `${prefix}-${++elementCounter}`;
+}
+
+// Clean up after each test
+afterEach(() => {
+    // Remove all test templates and elements
+    document.querySelectorAll('template[decue]').forEach(el => el.remove());
+    document.querySelectorAll('[data-test-element]').forEach(el => el.remove());
+});
+
+describe('eventHandlers', () => {
+
+  // Execute each test for all three custom element variants:
+  // 1. No shadow DOM
+  // 2. Shadow DOM open
+  // 3. Shadow DOM closed
+  ['none', 'open', 'closed'].forEach(shadow => {
+    describe("shadowmode: " + shadow, function() {
+        it('decue-on can catch all of the known events', function (done) {
+            const name = uniqueName('test-decue-on-known');
+            createTemplate(name, '<div data-value="{testattr}">Content</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            let eventsCaught = [];
+            
+            // Register global handler
+            window.testEventHandler = function(e) {
+                eventsCaught.push(e.type);
+            };
+            
+            const el = document.createElement(name);
+            el.setAttribute('data-test-element', '');
+            el.setAttribute('decue-on:connect', 'testEventHandler');
+            el.setAttribute('decue-on:disconnect', 'testEventHandler');
+            el.setAttribute('decue-on:attributechange', 'testEventHandler');
+            el.setAttribute('testattr', 'initial');
+            if (shadow !== 'none') {
+                el.setAttribute('shadow', shadow);
+            }
+            
+            document.body.appendChild(el);
+            
+            setTimeout(() => {
+                el.setAttribute('testattr', 'value');
+                
+                setTimeout(() => {
+                    el.remove();
+                    
+                    setTimeout(() => {
+                        expect(eventsCaught).to.include('connect');
+                        expect(eventsCaught).to.include('disconnect');
+                        expect(eventsCaught).to.include('attributechange');
+                        delete window.testEventHandler;
+                        done();
+                    }, 50);
+                }, 50);
+            }, 50);
+        });
+
+        it('decue-on can catch any unknown event', function (done) {
+            const name = uniqueName('test-decue-on-custom');
+            createTemplate(name, '<div>Content</div>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            let customEventCaught = false;
+            
+            // Register global handler
+            window.customEventHandler = function(e) {
+                if (e.type === 'customevent') {
+                    customEventCaught = true;
+                }
+            };
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                'decue-on:customevent': 'customEventHandler',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Dispatch a custom event
+            el.dispatchEvent(new CustomEvent('customevent', { detail: { test: true } }));
+            
+            setTimeout(() => {
+                expect(customEventCaught).to.be.true;
+                delete window.customEventHandler;
+                done();
+            }, 50);
+        });
+      });
+    });
+});