decue 1.0.1 → 1.1.0

package/test/slots.test.js

@@ -0,0 +1,293 @@
+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('slots', () => {
+
+  // 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('named slot with default value', function () {
+            const name = uniqueName('test-named-slot-default');
+            createTemplate(name, '<slot name="content"><div class="default">Default slot content</div></slot>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                // When no slotted content is provided, default should be used
+                const defaultContent = root.querySelector('.default');
+                expect(defaultContent).to.exist;
+                expect(defaultContent.textContent).to.equal('Default slot content');
+            } else {
+                // For closed shadow, verify element exists and is connected
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('named slot with given value', function () {
+            const name = uniqueName('test-named-slot-given');
+            createTemplate(name, '<slot name="content"><div class="default">Default slot content</div></slot>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            }, '<div slot="content" class="custom">Custom slot content</div>');
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            if (shadow !== 'closed') {
+                if (shadow === 'none') {
+                    // In light DOM (no shadow), slotted content replaces the slot in place
+                    const root = getContentRoot(el, shadow);
+                    const customContent = root.querySelector('.custom');
+                    expect(customContent).to.exist;
+                    expect(customContent.textContent).to.equal('Custom slot content');
+                    
+                    // Default should not be present
+                    const defaultContent = root.querySelector('.default');
+                    expect(defaultContent).to.not.exist;
+                } else {
+                    // In shadow DOM (open), slotted content stays in light DOM
+                    // and is projected through the slot
+                    const customContent = el.querySelector('.custom');
+                    expect(customContent).to.exist;
+                    expect(customContent.textContent).to.equal('Custom slot content');
+                    
+                    // Shadow root should have the slot element
+                    const slot = el.shadowRoot.querySelector('slot[name="content"]');
+                    expect(slot).to.exist;
+                    
+                    // Default should be in the shadow root
+                    const defaultContent = el.shadowRoot.querySelector('.default');
+                    expect(defaultContent).to.exist;
+                }
+            } else {
+                // For closed shadow, verify element exists and is connected
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+                
+                // Slotted content should be in the light DOM
+                const customContent = el.querySelector('.custom');
+                expect(customContent).to.exist;
+            }
+        });
+
+        it('default slot with default value', function () {
+            const name = uniqueName('test-default-slot-default');
+            createTemplate(name, '<slot><div class="default">Default content</div></slot>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            });
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            const root = getContentRoot(el, shadow);
+            if (shadow !== 'closed') {
+                // When no content is provided, default slot content should be used
+                const defaultContent = root.querySelector('.default');
+                expect(defaultContent).to.exist;
+                expect(defaultContent.textContent).to.equal('Default content');
+            } else {
+                // For closed shadow, verify element exists and is connected
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+            }
+        });
+
+        it('default slot with given value', function () {
+            const name = uniqueName('test-default-slot-given');
+            createTemplate(name, '<slot><div class="default">Default content</div></slot>', { shadow: shadow !== 'none' ? shadow : undefined });
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            }, '<div class="custom">Custom content</div>');
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            if (shadow !== 'closed') {
+                if (shadow === 'none') {
+                    // In light DOM (no shadow), slotted content replaces the slot in place
+                    const root = getContentRoot(el, shadow);
+                    const customContent = root.querySelector('.custom');
+                    expect(customContent).to.exist;
+                    expect(customContent.textContent).to.equal('Custom content');
+                    
+                    // Default should not be present
+                    const defaultContent = root.querySelector('.default');
+                    expect(defaultContent).to.not.exist;
+                } else {
+                    // In shadow DOM (open), slotted content stays in light DOM
+                    const customContent = el.querySelector('.custom');
+                    expect(customContent).to.exist;
+                    expect(customContent.textContent).to.equal('Custom content');
+                    
+                    // Shadow root should have the slot element
+                    const slot = el.shadowRoot.querySelector('slot:not([name])');
+                    expect(slot).to.exist;
+                }
+            } else {
+                // For closed shadow, verify element exists and is connected
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+                
+                // Slotted content should be in the light DOM
+                const customContent = el.querySelector('.custom');
+                expect(customContent).to.exist;
+            }
+        });
+
+        it('multiple named slots', function () {
+            const name = uniqueName('test-multiple-named-slots');
+            createTemplate(name, 
+                '<slot name="header"><div class="default-header">Default Header</div></slot>' +
+                '<slot name="body"><div class="default-body">Default Body</div></slot>' +
+                '<slot name="footer"><div class="default-footer">Default Footer</div></slot>', 
+                { shadow: shadow !== 'none' ? shadow : undefined }
+            );
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            }, 
+                '<div slot="header" class="custom-header">Custom Header</div>' +
+                '<div slot="body" class="custom-body">Custom Body</div>'
+            );
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            if (shadow !== 'closed') {
+                if (shadow === 'none') {
+                    // In light DOM, slotted content replaces slots in place
+                    const root = getContentRoot(el, shadow);
+                    
+                    const customHeader = root.querySelector('.custom-header');
+                    expect(customHeader).to.exist;
+                    expect(customHeader.textContent).to.equal('Custom Header');
+                    
+                    const customBody = root.querySelector('.custom-body');
+                    expect(customBody).to.exist;
+                    expect(customBody.textContent).to.equal('Custom Body');
+                    
+                    // Footer should still use default (not provided)
+                    const defaultFooter = root.querySelector('.default-footer');
+                    expect(defaultFooter).to.exist;
+                    expect(defaultFooter.textContent).to.equal('Default Footer');
+                    
+                    // Defaults for header and body should not be present
+                    expect(root.querySelector('.default-header')).to.not.exist;
+                    expect(root.querySelector('.default-body')).to.not.exist;
+                } else {
+                    // In shadow DOM (open), slotted content stays in light DOM
+                    const customHeader = el.querySelector('.custom-header');
+                    expect(customHeader).to.exist;
+                    expect(customHeader.textContent).to.equal('Custom Header');
+                    
+                    const customBody = el.querySelector('.custom-body');
+                    expect(customBody).to.exist;
+                    expect(customBody.textContent).to.equal('Custom Body');
+                    
+                    // Shadow root should have slots
+                    expect(el.shadowRoot.querySelector('slot[name="header"]')).to.exist;
+                    expect(el.shadowRoot.querySelector('slot[name="body"]')).to.exist;
+                    expect(el.shadowRoot.querySelector('slot[name="footer"]')).to.exist;
+                    
+                    // Default for footer should be in shadow root
+                    const defaultFooter = el.shadowRoot.querySelector('.default-footer');
+                    expect(defaultFooter).to.exist;
+                }
+            } else {
+                // For closed shadow, verify element exists and is connected
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+                
+                // Slotted content should be in light DOM
+                expect(el.querySelector('.custom-header')).to.exist;
+                expect(el.querySelector('.custom-body')).to.exist;
+            }
+        });
+
+        it('multiple default slots', function () {
+            const name = uniqueName('test-multiple-default-slots');
+            // Multiple default slots is unusual but should work by distributing content
+            createTemplate(name, 
+                '<div class="section1"><slot><span>Default 1</span></slot></div>' +
+                '<div class="section2"><slot><span>Default 2</span></slot></div>', 
+                { shadow: shadow !== 'none' ? shadow : undefined }
+            );
+            
+            const el = createElement(name, { 
+                'data-test-element': '',
+                ...(shadow !== 'none' ? { shadow } : {})
+            }, '<div class="custom">Custom content</div>');
+            
+            // Verify element was created
+            expect(el).to.exist;
+            
+            if (shadow !== 'closed') {
+                if (shadow === 'none') {
+                    // In light DOM, first slot gets replaced with custom content
+                    const root = getContentRoot(el, shadow);
+                    const section1 = root.querySelector('.section1');
+                    expect(section1).to.exist;
+                    const customInSection1 = section1.querySelector('.custom');
+                    expect(customInSection1).to.exist;
+                    
+                    // Second slot gets its default
+                    const section2 = root.querySelector('.section2');
+                    expect(section2).to.exist;
+                    const defaultInSection2 = section2.querySelector('span');
+                    expect(defaultInSection2).to.exist;
+                    expect(defaultInSection2.textContent).to.equal('Default 2');
+                } else {
+                    // In shadow DOM (open), slotted content stays in light DOM
+                    const customContent = el.querySelector('.custom');
+                    expect(customContent).to.exist;
+                    expect(customContent.textContent).to.equal('Custom content');
+                    
+                    // Shadow root should have both sections with slots
+                    expect(el.shadowRoot.querySelector('.section1')).to.exist;
+                    expect(el.shadowRoot.querySelector('.section2')).to.exist;
+                }
+            } else {
+                // For closed shadow, verify element exists and is connected
+                expect(el.shadowRoot).to.be.null;
+                expect(el.isConnected).to.be.true;
+                
+                // Slotted content should be in light DOM
+                const customContent = el.querySelector('.custom');
+                expect(customContent).to.exist;
+            }
+        });
+      });
+    });
+});

package/test/test-helpers.js

@@ -0,0 +1,36 @@
+// Helper to create a template and process it
+export function createTemplate(name, content, options = {}) {
+    const template = document.createElement('template');
+    template.setAttribute('decue', name);
+    if (options.shadow) {
+        template.setAttribute('shadow', options.shadow);
+    }
+    if (options.formAssociated) {
+        template.setAttribute('form-associated', '');
+    }
+    template.innerHTML = content;
+    document.body.appendChild(template);
+    decue.processTemplate(template);
+    return template;
+}
+
+// Helper to create and append a custom element
+export function createElement(tagName, attributes = {}, innerHTML = '') {
+    const el = document.createElement(tagName);
+    for (const [key, value] of Object.entries(attributes)) {
+        el.setAttribute(key, value);
+    }
+    if (innerHTML) {
+        el.innerHTML = innerHTML;
+    }
+    document.body.appendChild(el);
+    return el;
+}
+
+// Helper to get content root (shadowRoot or the element itself)
+export function getContentRoot(el, shadow) {
+    if (shadow === 'none') {
+        return el;
+    }
+    return el.shadowRoot || el;
+}

package/tsconfig.json

@@ -7,7 +7,7 @@
         "noImplicitReturns": true,
         "noUnusedParameters": true,
         "strictFunctionTypes": true,
-        //"strictNullChecks": true
+        "strictNullChecks": true
     },
     "exclude": [
         "node_modules",

package/web-test-runner.config.mjs

@@ -0,0 +1,30 @@
+import { playwrightLauncher } from '@web/test-runner-playwright';
+
+export default {
+  files: 'test/**/*.test.js',
+  nodeResolve: true,
+  coverage: true,
+  coverageConfig: {
+    include: ['src/**/*.js'],
+  },
+  browserLogs: true,
+  browsers: [
+    playwrightLauncher({ product: 'chromium' }),
+    playwrightLauncher({ product: 'chromium', launchOptions: { channel: 'chrome' } }),
+    playwrightLauncher({ product: 'chromium', launchOptions: { channel: 'msedge' } }),
+    playwrightLauncher({ product: 'firefox' }),
+    playwrightLauncher({ product: 'webkit' }),
+  ],
+  testRunnerHtml: testFramework => `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
+        <script src="/src/decue.js"></script>
+      </head>
+      <body>
+        <script type="module" src="${testFramework}"></script>
+      </body>
+    </html>
+  `
+};

package/serve.sh

@@ -1,4 +0,0 @@
-#! /usr/bin/env nix-shell
-#! nix-shell -I channel:nixos-22.11-small -i bash -p nodejs-16_x
-
-npx serve

package/test/decue-tests.js

@@ -1,84 +0,0 @@
-var assert = chai.assert;
-
-describe("decue", function() {
-    beforeEach(function () {
-        clearWorkArea();
-    });
-
-    ['none', 'open', 'closed'].forEach(shadow => {
-        describe("shadowmode: " + shadow, function() {
-            it('shadowroot', function () {
-                make(`<my-element shadow="${shadow}"></my-element>`)
-                if (shadow === 'open') {
-                    assert.isNotNull(document.querySelector('my-element').shadowRoot);
-                } else {
-                    assert.isNull(document.querySelector('my-element').shadowRoot);
-                }
-            });
-
-            it('no-attributes', function () {
-                make(`<my-element></my-element>`)
-                assert.isDefined(document.querySelector('my-element'));
-            });
-
-            it('unknown attribute placeholder is not replaced', function () {
-                make(`<my-element></my-element>`)
-                assert.equal('Target: {target}', document.querySelector('my-element span').getAttribute('data-target'));
-            });
-
-            it('attribute placeholder is replaced', function () {
-                make(`<my-element target="World"></my-element>`)
-                assert.equal('Target: World', document.querySelector('my-element span').getAttribute('data-target'));
-            });
-
-            it('attribute with placeholder and functions updates asynchronously', function (done) {
-                make(`<my-element target="World"></my-element>`)
-                assert.equal('WORLD', document.querySelector('my-element span').getAttribute('data-method'));
-                document.querySelector('my-element').setAttribute('target', 'Universe');
-                setTimeout(() => {
-                    assert.equal('UNIVERSE', document.querySelector('my-element span').getAttribute('data-method'));
-                    done();
-                });
-            });
-
-            it('attribute with functions', function () {
-            });
-
-            it('attribute with method', function () {
-            });
-            
-            it('text content placeholder is replaced', function () {
-                make(`<my-element target="World"></my-element>`)
-                assert.equal('Hello World', document.querySelector('my-element span').innerText);
-            });
-
-            it('text content updates synchronously for predefined elements', function () {
-                make(`<my-predefined-element target="World"></my-predefined-element>`)
-                assert.equal('Hello World', document.querySelector('my-predefined-element span').innerText);
-                document.querySelector('my-predefined-element').setAttribute('target', 'Universe');
-                assert.equal('Hello Universe', document.querySelector('my-predefined-element span').innerText);
-            });
-
-            it('named slot with default value', function () {
-            });
-
-            it('named slot with given value', function () {
-            });
-
-            it('default slot with default value', function () {
-            });
-
-            it('default slot with given value', function () {
-            });
-
-            it('multiple named slots', function () {
-            });
-
-            it('multiple default slots', function () {
-            });
-
-            it('some form tests...?', function () {
-            });
-        });
-    });
-});

package/test/index.html

@@ -1,65 +0,0 @@
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <title>Mocha Tests</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
-    <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
-    <meta http-equiv="cache-control" content="max-age=0" />
-    <meta http-equiv="expires" content="0" />
-    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
-    <meta http-equiv="pragma" content="no-cache" />
-</head>
-<body style="padding:20px;font-family: sans-serif">
-
-<h1 style="margin-top: 40px">decue test suite</h1>
-
-<h2>Mocha Test Suite</h2>
-<a href="/test/">[ALL]</a>
-
-<script src="../node_modules/chai/chai.js"></script>
-<script src="../node_modules/mocha/mocha.js"></script>
-<script class="mocha-init">
-    mocha.setup('bdd');
-    mocha.checkLeaks();
-</script>
-
-<script src="util/util.js"></script>
-
-<script>
-    function toLower(str) {
-        str.toLowerCase();
-    }
-</script>
-
-<script src="../src/decue.js" elements="my-predefined-element my-predefined-element-with-attributes[target]"></script>
-<script src="decue-tests.js"></script>
-
-<div id="mocha"></div>
-
-<script class="mocha-exec">
-    mocha.run();
-</script>
-<em>Work Area</em>
-<hr/>
-<div id="work-area">
-</div>
-
-<template decue="nested-element">
-    nested
-</template>
-<template decue="my-element">
-    <span data-target="Target: {target}" data-method="{target|.toUpperCase}" data-function="{target|toLower}" data-piped="{target|.toUpperCase|toLower}">Hello {target}</span>
-    <slot name="slot1">slot1</slot>
-    <slot>default slot</slot>
-    <nested-element></nested-element>
-</template>
-<template decue="my-predefined-element">
-    <span>Hello {target}</span>
-</template>
-<template decue="my-predefined-element-with-attributes">
-    <span>Hello {target}</span>
-</template>
-
-</body>
-</html>

package/test/util/util.js

@@ -1,17 +0,0 @@
-
-function make(htmlStr) {
-    var range = document.createRange();
-    var fragment = range.createContextualFragment(htmlStr);
-    var wa = document.getElementById("work-area");
-    var child = null;
-    var children = fragment.children || fragment.childNodes; // IE
-    while(children.length > 0) {
-        child = children[0];
-        wa.appendChild(child);
-    }
-    return child;
-}
-
-function clearWorkArea() {
-    document.getElementById("work-area").innerHTML = "";
-}