decue 1.0.0 → 1.1.0

package/test/scriptAttributes.test.js

@@ -0,0 +1,464 @@
+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('scriptAttributes', () => {
+
+    describe('defineElement API', function() {
+        it('can define regular elements via defineElement', function () {
+            const name = uniqueName('test-regular-element');
+            
+            // Define element programmatically (simulates elements="" attribute)
+            decue.defineElement(false, name, undefined, false, []);
+            
+            // Verify element is defined
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.exist;
+            expect(elementClass.formAssociated).to.be.false;
+        });
+
+        it('can define form-associated elements via defineElement', function () {
+            const name = uniqueName('test-form-element');
+            
+            // Define form-associated element programmatically (simulates form-associated="" attribute)
+            decue.defineElement(false, name, undefined, true, []);
+            
+            // Verify element is defined
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.exist;
+            expect(elementClass.formAssociated).to.be.true;
+        });
+
+        it('can define elements with observed attributes', function () {
+            const name = uniqueName('test-observed-attrs');
+            
+            // Define element with explicit observed attributes
+            decue.defineElement(false, name, undefined, false, ['attr1', 'attr2']);
+            
+            // Verify element is defined with correct observedAttributes
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.exist;
+            expect(elementClass.observedAttributes).to.include('attr1');
+            expect(elementClass.observedAttributes).to.include('attr2');
+        });
+
+        it('can define multiple elements', function () {
+            const name1 = uniqueName('test-multi-1');
+            const name2 = uniqueName('test-multi-2');
+            
+            // Define multiple elements
+            decue.defineElement(false, name1, undefined, false, []);
+            decue.defineElement(false, name2, undefined, false, []);
+            
+            // Verify both are defined
+            expect(customElements.get(name1)).to.exist;
+            expect(customElements.get(name2)).to.exist;
+        });
+    });
+
+    describe('registeredFunctions', function() {
+        it('can register simple functions', function () {
+            const name = uniqueName('test-simple-func');
+            
+            // Register a simple function
+            const testFunc = function(value) {
+                return value.toUpperCase();
+            };
+            decue.registeredFunctions['testSimpleFunc'] = testFunc;
+            
+            // Create element using the registered function
+            createTemplate(name, '<div class="content">{text|testSimpleFunc}</div>');
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'hello'
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('.content');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('HELLO');
+            
+            // Cleanup
+            delete decue.registeredFunctions['testSimpleFunc'];
+        });
+
+        it('can register namespaced functions', function () {
+            const name = uniqueName('test-namespaced-func');
+            
+            // Create a namespace with a function
+            window.MyTestLib = {
+                processText: function(value) {
+                    return `[${value}]`;
+                }
+            };
+            
+            // Register the namespaced function with a simple alias
+            decue.registeredFunctions['processText'] = window.MyTestLib.processText;
+            
+            // Create element using the registered function
+            createTemplate(name, '<div class="content">{text|processText}</div>');
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'test'
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('.content');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('[test]');
+            
+            // Cleanup
+            delete decue.registeredFunctions['processText'];
+            delete window.MyTestLib;
+        });
+
+        it('can register aliased functions', function () {
+            const name = uniqueName('test-aliased-func');
+            
+            // Create a function at a specific location
+            window.SomeLibrary = {
+                utilities: {
+                    format: function(value) {
+                        return `>>> ${value} <<<`;
+                    }
+                }
+            };
+            
+            // Register with an alias
+            decue.registeredFunctions['fmt'] = window.SomeLibrary.utilities.format;
+            
+            // Create element using the alias
+            createTemplate(name, '<div class="content">{text|fmt}</div>');
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'aliased'
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('.content');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('>>> aliased <<<');
+            
+            // Cleanup
+            delete decue.registeredFunctions['fmt'];
+            delete window.SomeLibrary;
+        });
+
+        it('can register deeply nested function with alias (script attribute format)', function () {
+            const name = uniqueName('test-script-attr-alias');
+            
+            // Create a deeply nested namespace structure
+            // This simulates: functions="myFunc:window.someNamespace.somePackage.someFunction"
+            window.someNamespace = {
+                somePackage: {
+                    someFunction: function(value) {
+                        return `PROCESSED: ${value}`;
+                    }
+                }
+            };
+            
+            // Simulate what the script attribute does: parse "myFunc:window.someNamespace.somePackage.someFunction"
+            const alias = 'myFunc';
+            const path = 'someNamespace.somePackage.someFunction';
+            
+            // Resolve the function from the path (simulating the script attribute behavior)
+            const func = path.split('.').reduce(function(obj, prop) {
+                return obj[prop];
+            }, window);
+            
+            // Register with the alias
+            decue.registeredFunctions[alias] = func;
+            
+            // Verify registration
+            expect(decue.registeredFunctions[alias]).to.be.a('function');
+            
+            // Create element using the registered alias
+            createTemplate(name, '<div class="content">{text|myFunc}</div>');
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'test-data'
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('.content');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('PROCESSED: test-data');
+            
+            // Verify the function is callable and works correctly
+            expect(decue.registeredFunctions['myFunc']('direct')).to.equal('PROCESSED: direct');
+            
+            // Cleanup
+            delete decue.registeredFunctions['myFunc'];
+            delete window.someNamespace;
+        });
+
+        it('can chain multiple registered functions', function () {
+            const name = uniqueName('test-chained-funcs');
+            
+            // Register multiple functions
+            decue.registeredFunctions['addPrefix'] = function(value) {
+                return 'PREFIX_' + value;
+            };
+            
+            decue.registeredFunctions['addSuffix'] = function(value) {
+                return value + '_SUFFIX';
+            };
+            
+            // Create element using chained functions
+            createTemplate(name, '<div class="content">{text|addPrefix|addSuffix}</div>');
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                text: 'middle'
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('.content');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('PREFIX_middle_SUFFIX');
+            
+            // Cleanup
+            delete decue.registeredFunctions['addPrefix'];
+            delete decue.registeredFunctions['addSuffix'];
+        });
+
+        it('registered functions receive correct context', function () {
+            const name = uniqueName('test-func-context');
+            
+            let receivedValue = null;
+            
+            // Register a function that captures the value
+            decue.registeredFunctions['captureValue'] = function(value) {
+                receivedValue = value;
+                return value;
+            };
+            
+            // Create element
+            createTemplate(name, '<div>{text|captureValue}</div>');
+            
+            createElement(name, { 
+                'data-test-element': '',
+                text: 'test-value'
+            });
+            
+            // Verify function received the correct value
+            expect(receivedValue).to.equal('test-value');
+            
+            // Cleanup
+            delete decue.registeredFunctions['captureValue'];
+        });
+
+        it('registered functions can transform attribute values', function () {
+            const name = uniqueName('test-func-transform');
+            
+            // Register a transformation function
+            decue.registeredFunctions['double'] = function(value) {
+                return parseInt(value) * 2;
+            };
+            
+            // Create element
+            createTemplate(name, '<div class="result">{number|double}</div>');
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                number: '5'
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('.result');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('10');
+            
+            // Update and verify transformation still works
+            el.setAttribute('number', '7');
+            expect(div.textContent).to.equal('14');
+            
+            // Cleanup
+            delete decue.registeredFunctions['double'];
+        });
+
+        it('can mix registered functions with element properties', function () {
+            const name = uniqueName('test-mixed-pipes');
+            
+            // Register a function
+            decue.registeredFunctions['wrap'] = function(value) {
+                return `(${value})`;
+            };
+            
+            // Create element that uses both registered function and element property
+            createTemplate(name, '<div class="tag">{.tagName|wrap}</div>');
+            
+            const el = createElement(name, { 
+                'data-test-element': ''
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('.tag');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal(`(${name.toUpperCase()})`);
+            
+            // Cleanup
+            delete decue.registeredFunctions['wrap'];
+        });
+    });
+
+    describe('processTemplate API', function() {
+        it('can process templates manually', function () {
+            const name = uniqueName('test-manual-process');
+            
+            // Create template manually
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.innerHTML = '<div>Manual template</div>';
+            
+            // Process it
+            decue.processTemplate(template);
+            
+            // Verify element is defined
+            expect(customElements.get(name)).to.exist;
+            
+            // Create element from it
+            const el = createElement(name, { 
+                'data-test-element': ''
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('div');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('Manual template');
+            
+            template.remove();
+        });
+
+        it('processTemplate skips if element is already defined', function () {
+            const name = uniqueName('test-skip-reprocess');
+            
+            // Define element first
+            createTemplate(name, '<div>First</div>');
+            expect(customElements.get(name)).to.exist;
+            
+            // Try to process again with different content
+            const template2 = document.createElement('template');
+            template2.setAttribute('decue', name);
+            template2.innerHTML = '<div>Second</div>';
+            
+            // Process should skip
+            decue.processTemplate(template2);
+            
+            // 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('processTemplate handles form-associated attribute', function () {
+            const name = uniqueName('test-process-form');
+            
+            // Create template with form-associated attribute
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.setAttribute('form-associated', '');
+            template.innerHTML = '<div>Form element</div>';
+            
+            // Process it
+            decue.processTemplate(template);
+            
+            // Verify element is defined as form-associated
+            const elementClass = customElements.get(name);
+            expect(elementClass).to.exist;
+            expect(elementClass.formAssociated).to.be.true;
+            
+            template.remove();
+        });
+    });
+
+    describe('integration scenarios', function() {
+        it('predefined element with template and observed attributes works together', function () {
+            const name = uniqueName('test-integration');
+            
+            // Define element with observed attributes first
+            decue.defineElement(false, name, undefined, false, ['greeting', 'name']);
+            
+            // Create template
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.innerHTML = '<div>{greeting} {name}!</div>';
+            document.body.insertBefore(template, document.body.firstChild);
+            
+            // Create element
+            const el = createElement(name, { 
+                'data-test-element': '',
+                greeting: 'Hello',
+                name: 'World'
+            });
+            
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('div');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('Hello World!');
+            
+            // Verify attributes are observed
+            el.setAttribute('greeting', 'Hi');
+            expect(div.textContent).to.equal('Hi World!');
+        });
+
+        it('form-associated element with registered functions works', function () {
+            const name = uniqueName('test-form-with-func');
+            
+            // Register function
+            decue.registeredFunctions['currency'] = function(value) {
+                return `$${parseFloat(value).toFixed(2)}`;
+            };
+            
+            // Define form-associated element
+            decue.defineElement(false, name, undefined, true, []);
+            
+            // Create template
+            const template = document.createElement('template');
+            template.setAttribute('decue', name);
+            template.innerHTML = '<div>Amount: {value|currency}</div>';
+            document.body.insertBefore(template, document.body.firstChild);
+            
+            // Create element
+            const el = createElement(name, { 
+                'data-test-element': '',
+                value: '42.5'
+            });
+            
+            // Verify it's form-associated
+            expect(el.internals).to.exist;
+            expect(el.value).to.equal('42.5');
+            
+            // Verify function works
+            const root = getContentRoot(el, 'none');
+            const div = root.querySelector('div');
+            expect(div).to.exist;
+            expect(div.textContent).to.equal('Amount: $42.50');
+            
+            // Cleanup
+            delete decue.registeredFunctions['currency'];
+        });
+    });
+});