@nyaruka/temba-components 0.129.3 → 0.129.5

package/out-tsc/test/temba-node-editor.test.js

@@ -0,0 +1,283 @@
+import '../temba-modules';
+import { html, fixture, expect } from '@open-wc/testing';
+import { assertScreenshot, getClip } from './utils.test';
+const assertDialogScreenshot = async (el, screenshotName) => {
+    const dialog = el.shadowRoot
+        .querySelector('temba-dialog')
+        .shadowRoot.querySelector('.dialog-container');
+    await assertScreenshot(screenshotName, getClip(dialog));
+};
+describe('temba-node-editor', () => {
+    it('can be created', async () => {
+        const el = (await fixture(html `
+      <temba-node-editor .isOpen=${true}></temba-node-editor>
+    `));
+        expect(el).to.exist;
+        expect(el.tagName).to.equal('TEMBA-NODE-EDITOR');
+    });
+    it('renders send_msg action', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'send_msg',
+            text: 'Hello world',
+            quick_replies: []
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.action).to.equal(action);
+    });
+    it('renders set_run_result action', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'set_run_result',
+            name: 'result_name',
+            value: 'result_value'
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.action).to.equal(action);
+    });
+    it('renders set_contact_field action', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'set_contact_field',
+            field: { key: 'age', name: 'Age' },
+            value: '25'
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.action).to.equal(action);
+    });
+    it('renders add_contact_groups action', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'add_contact_groups',
+            groups: [{ uuid: 'group-1', name: 'Test Group' }]
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.action).to.equal(action);
+    });
+    it('renders enter_flow action', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'enter_flow',
+            flow: { uuid: 'flow-1', name: 'Sub Flow' }
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.action).to.equal(action);
+    });
+    it('renders node with router configuration', async () => {
+        const node = {
+            uuid: 'test-node-uuid',
+            actions: [],
+            exits: [{ uuid: 'exit-1', name: 'Default' }],
+            router: {
+                type: 'switch',
+                result_name: 'result',
+                categories: [{ uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' }]
+            }
+        };
+        const nodeUI = {
+            type: 'split_by_expression',
+            position: { left: 100, top: 100 }
+        };
+        const el = (await fixture(html `
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `));
+        await el.updateComplete;
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.node).to.equal(node);
+        expect(el.nodeUI).to.equal(nodeUI);
+        await assertDialogScreenshot(el, 'editor/router');
+    });
+    it('renders node with wait configuration', async () => {
+        const node = {
+            uuid: 'test-node-uuid',
+            actions: [],
+            exits: [{ uuid: 'exit-1', name: 'Default' }],
+            wait: {
+                type: 'msg'
+            }
+        };
+        const nodeUI = {
+            type: 'wait_for_response',
+            position: { left: 100, top: 100 }
+        };
+        const el = (await fixture(html `
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `));
+        await el.updateComplete;
+        expect(el.shadowRoot).to.not.be.null;
+        expect(el.node).to.equal(node);
+        expect(el.nodeUI).to.equal(nodeUI);
+        await assertDialogScreenshot(el, 'editor/wait');
+    });
+    it('handles different button actions', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'send_msg',
+            text: 'Hello world',
+            quick_replies: []
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        let saveEventFired = false;
+        let cancelEventFired = false;
+        el.addEventListener('temba-action-saved', () => {
+            saveEventFired = true;
+        });
+        el.addEventListener('temba-node-edit-cancelled', () => {
+            cancelEventFired = true;
+        });
+        // Get the dialog element inside the node editor
+        const dialog = el.shadowRoot.querySelector('temba-dialog');
+        expect(dialog).to.not.be.null;
+        // Test Save button by dispatching event on the dialog
+        const saveEvent = new CustomEvent('temba-button-clicked', {
+            detail: { button: { name: 'Save' } },
+            bubbles: true
+        });
+        dialog.dispatchEvent(saveEvent);
+        expect(saveEventFired).to.equal(true);
+        // Reset for cancel test
+        saveEventFired = false;
+        // Test Cancel button
+        const cancelEvent = new CustomEvent('temba-button-clicked', {
+            detail: { button: { name: 'Cancel' } },
+            bubbles: true
+        });
+        dialog.dispatchEvent(cancelEvent);
+        expect(cancelEventFired).to.equal(true);
+    });
+    it('handles property updates', async () => {
+        const el = (await fixture(html `
+      <temba-node-editor .isOpen=${true}></temba-node-editor>
+    `));
+        // Test action property update
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'send_msg',
+            text: 'Hello world',
+            quick_replies: []
+        };
+        el.action = action;
+        await el.updateComplete;
+        expect(el.action).to.equal(action);
+        // Test node property update
+        const node = {
+            uuid: 'test-node-uuid',
+            actions: [],
+            exits: []
+        };
+        el.node = node;
+        await el.updateComplete;
+        expect(el.node).to.equal(node);
+        // Test nodeUI property update
+        const nodeUI = {
+            type: 'execute_actions',
+            position: { left: 100, top: 100 }
+        };
+        el.nodeUI = nodeUI;
+        await el.updateComplete;
+        expect(el.nodeUI).to.equal(nodeUI);
+    });
+    it('handles form submission events', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'send_msg',
+            text: 'Hello world',
+            quick_replies: []
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        // Since the form submission handling is complex and involves internal components,
+        // we'll just verify the component renders without errors and has the expected structure
+        const shadowRoot = el.shadowRoot;
+        expect(shadowRoot).to.not.be.null;
+        // Verify dialog is present
+        const dialog = shadowRoot.querySelector('temba-dialog');
+        expect(dialog).to.not.be.null;
+    });
+    it('handles form validation', async () => {
+        const action = {
+            uuid: 'test-action-uuid',
+            type: 'send_msg',
+            text: 'Hello world',
+            quick_replies: []
+        };
+        const el = (await fixture(html `
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `));
+        await el.updateComplete;
+        // Test that the component renders form elements
+        const shadowRoot = el.shadowRoot;
+        expect(shadowRoot).to.not.be.null;
+    });
+    it('renders different action types correctly', async () => {
+        const actionTypes = [
+            {
+                type: 'send_msg',
+                data: { text: 'Message', quick_replies: [] }
+            },
+            {
+                type: 'set_run_result',
+                data: { name: 'result', value: 'value' }
+            },
+            {
+                type: 'set_contact_name',
+                data: { name: 'John Doe' }
+            },
+            {
+                type: 'set_contact_language',
+                data: { language: 'eng' }
+            }
+        ];
+        for (const actionType of actionTypes) {
+            const action = {
+                uuid: `test-${actionType.type}`,
+                type: actionType.type,
+                ...actionType.data
+            };
+            const el = (await fixture(html `
+        <temba-node-editor
+          .action=${action}
+          .isOpen=${true}
+        ></temba-node-editor>
+      `));
+            await el.updateComplete;
+            expect(el.shadowRoot).to.not.be.null;
+            expect(el.action.type).to.equal(actionType.type);
+            await assertDialogScreenshot(el, `editor/${actionType.type}`);
+        }
+    });
+});
+//# sourceMappingURL=temba-node-editor.test.js.map

package/out-tsc/test/temba-node-editor.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-node-editor.test.js","sourceRoot":"","sources":["../../test/temba-node-editor.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../temba-modules';\nimport { html, fixture, expect } from '@open-wc/testing';\nimport { assertScreenshot, getClip } from './utils.test';\n\n// Define interface for NodeEditor component\ninterface NodeEditorElement extends HTMLElement {\n  action?: any;\n  node?: any;\n  nodeUI?: any;\n  isOpen?: boolean;\n  updateComplete: Promise<boolean>;\n}\n\nconst assertDialogScreenshot = async (\n  el: NodeEditorElement,\n  screenshotName: string\n) => {\n  const dialog = el.shadowRoot\n    .querySelector('temba-dialog')\n    .shadowRoot.querySelector('.dialog-container') as HTMLElement;\n  await assertScreenshot(screenshotName, getClip(dialog));\n};\n\ndescribe('temba-node-editor', () => {\n  it('can be created', async () => {\n    const el = (await fixture(html`\n      <temba-node-editor .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    expect(el).to.exist;\n    expect(el.tagName).to.equal('TEMBA-NODE-EDITOR');\n  });\n\n  it('renders send_msg action', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'send_msg',\n      text: 'Hello world',\n      quick_replies: []\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n    expect(el.shadowRoot).to.not.be.null;\n    expect(el.action).to.equal(action);\n  });\n\n  it('renders set_run_result action', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'set_run_result',\n      name: 'result_name',\n      value: 'result_value'\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n    expect(el.shadowRoot).to.not.be.null;\n    expect(el.action).to.equal(action);\n  });\n\n  it('renders set_contact_field action', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'set_contact_field',\n      field: { key: 'age', name: 'Age' },\n      value: '25'\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n    expect(el.shadowRoot).to.not.be.null;\n    expect(el.action).to.equal(action);\n  });\n\n  it('renders add_contact_groups action', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'add_contact_groups',\n      groups: [{ uuid: 'group-1', name: 'Test Group' }]\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n    expect(el.shadowRoot).to.not.be.null;\n    expect(el.action).to.equal(action);\n  });\n\n  it('renders enter_flow action', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'enter_flow',\n      flow: { uuid: 'flow-1', name: 'Sub Flow' }\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n    expect(el.shadowRoot).to.not.be.null;\n    expect(el.action).to.equal(action);\n  });\n\n  it('renders node with router configuration', async () => {\n    const node = {\n      uuid: 'test-node-uuid',\n      actions: [],\n      exits: [{ uuid: 'exit-1', name: 'Default' }],\n      router: {\n        type: 'switch',\n        result_name: 'result',\n        categories: [{ uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' }]\n      }\n    };\n\n    const nodeUI = {\n      type: 'split_by_expression',\n      position: { left: 100, top: 100 }\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor\n        .node=${node}\n        .nodeUI=${nodeUI}\n        .isOpen=${true}\n      ></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n    expect(el.shadowRoot).to.not.be.null;\n    expect(el.node).to.equal(node);\n    expect(el.nodeUI).to.equal(nodeUI);\n\n    await assertDialogScreenshot(el, 'editor/router');\n  });\n\n  it('renders node with wait configuration', async () => {\n    const node = {\n      uuid: 'test-node-uuid',\n      actions: [],\n      exits: [{ uuid: 'exit-1', name: 'Default' }],\n      wait: {\n        type: 'msg'\n      }\n    };\n\n    const nodeUI = {\n      type: 'wait_for_response',\n      position: { left: 100, top: 100 }\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor\n        .node=${node}\n        .nodeUI=${nodeUI}\n        .isOpen=${true}\n      ></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n    expect(el.shadowRoot).to.not.be.null;\n    expect(el.node).to.equal(node);\n    expect(el.nodeUI).to.equal(nodeUI);\n\n    await assertDialogScreenshot(el, 'editor/wait');\n  });\n\n  it('handles different button actions', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'send_msg',\n      text: 'Hello world',\n      quick_replies: []\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n\n    let saveEventFired = false;\n    let cancelEventFired = false;\n\n    el.addEventListener('temba-action-saved', () => {\n      saveEventFired = true;\n    });\n\n    el.addEventListener('temba-node-edit-cancelled', () => {\n      cancelEventFired = true;\n    });\n\n    // Get the dialog element inside the node editor\n    const dialog = el.shadowRoot!.querySelector('temba-dialog');\n    expect(dialog).to.not.be.null;\n\n    // Test Save button by dispatching event on the dialog\n    const saveEvent = new CustomEvent('temba-button-clicked', {\n      detail: { button: { name: 'Save' } },\n      bubbles: true\n    });\n    dialog!.dispatchEvent(saveEvent);\n    expect(saveEventFired).to.equal(true);\n\n    // Reset for cancel test\n    saveEventFired = false;\n\n    // Test Cancel button\n    const cancelEvent = new CustomEvent('temba-button-clicked', {\n      detail: { button: { name: 'Cancel' } },\n      bubbles: true\n    });\n    dialog!.dispatchEvent(cancelEvent);\n    expect(cancelEventFired).to.equal(true);\n  });\n\n  it('handles property updates', async () => {\n    const el = (await fixture(html`\n      <temba-node-editor .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    // Test action property update\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'send_msg',\n      text: 'Hello world',\n      quick_replies: []\n    };\n\n    el.action = action;\n    await el.updateComplete;\n    expect(el.action).to.equal(action);\n\n    // Test node property update\n    const node = {\n      uuid: 'test-node-uuid',\n      actions: [],\n      exits: []\n    };\n\n    el.node = node;\n    await el.updateComplete;\n    expect(el.node).to.equal(node);\n\n    // Test nodeUI property update\n    const nodeUI = {\n      type: 'execute_actions',\n      position: { left: 100, top: 100 }\n    };\n\n    el.nodeUI = nodeUI;\n    await el.updateComplete;\n    expect(el.nodeUI).to.equal(nodeUI);\n  });\n\n  it('handles form submission events', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'send_msg',\n      text: 'Hello world',\n      quick_replies: []\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n\n    // Since the form submission handling is complex and involves internal components,\n    // we'll just verify the component renders without errors and has the expected structure\n    const shadowRoot = el.shadowRoot;\n    expect(shadowRoot).to.not.be.null;\n\n    // Verify dialog is present\n    const dialog = shadowRoot!.querySelector('temba-dialog');\n    expect(dialog).to.not.be.null;\n  });\n\n  it('handles form validation', async () => {\n    const action = {\n      uuid: 'test-action-uuid',\n      type: 'send_msg',\n      text: 'Hello world',\n      quick_replies: []\n    };\n\n    const el = (await fixture(html`\n      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>\n    `)) as NodeEditorElement;\n\n    await el.updateComplete;\n\n    // Test that the component renders form elements\n    const shadowRoot = el.shadowRoot;\n    expect(shadowRoot).to.not.be.null;\n  });\n\n  it('renders different action types correctly', async () => {\n    const actionTypes = [\n      {\n        type: 'send_msg',\n        data: { text: 'Message', quick_replies: [] }\n      },\n      {\n        type: 'set_run_result',\n        data: { name: 'result', value: 'value' }\n      },\n      {\n        type: 'set_contact_name',\n        data: { name: 'John Doe' }\n      },\n      {\n        type: 'set_contact_language',\n        data: { language: 'eng' }\n      }\n    ];\n\n    for (const actionType of actionTypes) {\n      const action = {\n        uuid: `test-${actionType.type}`,\n        type: actionType.type,\n        ...actionType.data\n      };\n\n      const el = (await fixture(html`\n        <temba-node-editor\n          .action=${action}\n          .isOpen=${true}\n        ></temba-node-editor>\n      `)) as NodeEditorElement;\n\n      await el.updateComplete;\n      expect(el.shadowRoot).to.not.be.null;\n      expect(el.action.type).to.equal(actionType.type);\n\n      await assertDialogScreenshot(el, `editor/${actionType.type}`);\n    }\n  });\n});\n"]}

package/out-tsc/test/temba-select.test.js

@@ -393,6 +393,91 @@ describe('temba-select', () => {
             expect(itemText).to.not.contain('Red');
         });
     });
+    describe('emails functionality', () => {
+        it('only allows valid email addresses as options', async () => {
+            const select = await createSelect(clock, getSelectHTML([], {
+                placeholder: 'Enter email addresses',
+                searchable: true,
+                emails: true
+            }));
+            // Try typing an invalid email - should not show as option
+            await typeInto('temba-select', 'invalid-email', false, false);
+            await clock.runAll();
+            await select.updateComplete;
+            let visibleOptions = select.shadowRoot.querySelectorAll('.option:not(.header)');
+            expect(visibleOptions.length).to.equal(0);
+            // Clear input
+            select.input = '';
+            await select.updateComplete;
+            // Try typing a valid email - should show as option
+            await typeInto('temba-select', 'test@example.com', false, false);
+            await clock.runAll();
+            await select.updateComplete;
+            await openSelect(clock, select);
+            const optionsComponent = select.shadowRoot.querySelector('temba-options');
+            visibleOptions = optionsComponent.shadowRoot.querySelectorAll('.option:not(.header)');
+            expect(visibleOptions.length).to.equal(1);
+            expect(visibleOptions[0].textContent).to.contain('test@example.com');
+        });
+        it('behaves as multi-select when emails is true', async () => {
+            const select = await createSelect(clock, getSelectHTML([], {
+                placeholder: 'Enter email addresses',
+                searchable: true,
+                emails: true
+            }));
+            // Add first email
+            await typeInto('temba-select', 'first@example.com', false, false);
+            await clock.runAll();
+            await select.updateComplete;
+            // Click on the first option to select it using the standard helper
+            await openAndClick(clock, select, 0);
+            expect(select.values.length).to.equal(1);
+            expect(select.values[0].value).to.equal('first@example.com');
+            // Add second email
+            await typeInto('temba-select', 'second@example.com', false, false);
+            await clock.runAll();
+            await select.updateComplete;
+            // Click on the second option to select it using the standard helper
+            await openAndClick(clock, select, 0);
+            // Should have both emails selected (multi-select behavior)
+            expect(select.values.length).to.equal(2);
+            expect(select.values[0].value).to.equal('first@example.com');
+            expect(select.values[1].value).to.equal('second@example.com');
+        });
+        it('validates email format correctly', async () => {
+            const select = await createSelect(clock, getSelectHTML([], {
+                placeholder: 'Enter email addresses',
+                searchable: true,
+                emails: true
+            }));
+            // Test various email formats
+            const testCases = [
+                { email: 'valid@example.com', shouldBeValid: true },
+                { email: 'user.name+tag@example.co.uk', shouldBeValid: true },
+                { email: 'invalid-email', shouldBeValid: false },
+                { email: '@example.com', shouldBeValid: false },
+                { email: 'user@', shouldBeValid: false },
+                { email: 'user name@example.com', shouldBeValid: false }, // space not allowed
+                { email: 'user@example', shouldBeValid: false } // no domain extension
+            ];
+            for (const testCase of testCases) {
+                select.input = '';
+                await select.updateComplete;
+                await typeInto('temba-select', testCase.email, false, false);
+                await clock.runAll();
+                await select.updateComplete;
+                await openSelect(clock, select);
+                const optionsComponent = select.shadowRoot.querySelector('temba-options');
+                const visibleOptions = optionsComponent.shadowRoot.querySelectorAll('.option:not(.header)');
+                if (testCase.shouldBeValid) {
+                    expect(visibleOptions.length, `${testCase.email} should be valid`).to.equal(1);
+                }
+                else {
+                    expect(visibleOptions.length, `${testCase.email} should be invalid`).to.equal(0);
+                }
+            }
+        });
+    });
     describe('static options', () => {
         it('accepts an initial value', async () => {
             const select = await createSelect(clock, getSelectHTML(colors, { value: '1' }));
@@ -404,6 +489,79 @@ describe('temba-select', () => {
             expect(select.values[0].name).to.equal('Green');
             await assertScreenshot('select/static-initial-via-selected', getClip(select));
         });
+        it('fires change event when static option sets initial value', async () => {
+            const changeEvent = sinon.spy();
+            // Create a basic select element with manual HTML
+            const parentNode = document.createElement('div');
+            parentNode.innerHTML = `<temba-select name="test">
+        <temba-option name="Red" value="0"></temba-option>
+        <temba-option name="Green" value="1" selected></temba-option>
+        <temba-option name="Blue" value="2"></temba-option>
+      </temba-select>`;
+            const select = parentNode.querySelector('temba-select');
+            document.body.appendChild(parentNode);
+            // Add event listener before triggering initialization
+            select.addEventListener('change', changeEvent);
+            // Manually trigger slot change to process the selected attribute
+            select.handleSlotChange();
+            clock.runAll();
+            await select.updateComplete;
+            // The change event should have been fired when the initial value was set
+            assert(changeEvent.called, 'change event should fire when static option sets initial value');
+            expect(select.values[0].name).to.equal('Green');
+            document.body.removeChild(parentNode);
+        });
+        it('fires change event when static option sets initial value via value attribute', async () => {
+            const changeEvent = sinon.spy();
+            // Create a basic select element with value attribute
+            const parentNode = document.createElement('div');
+            parentNode.innerHTML = `<temba-select name="test" value="1">
+        <temba-option name="Red" value="0"></temba-option>
+        <temba-option name="Green" value="1"></temba-option>
+        <temba-option name="Blue" value="2"></temba-option>
+      </temba-select>`;
+            const select = parentNode.querySelector('temba-select');
+            document.body.appendChild(parentNode);
+            // Add event listener before triggering initialization
+            select.addEventListener('change', changeEvent);
+            // First process the static options
+            select.handleSlotChange();
+            // Then check for selected option based on value attribute
+            select.setSelectedValue(select.getAttribute('value'));
+            clock.runAll();
+            await select.updateComplete;
+            // The change event should have been fired when the initial value was set
+            assert(changeEvent.called, 'change event should fire when value attribute sets initial value');
+            expect(select.values[0].name).to.equal('Green');
+            document.body.removeChild(parentNode);
+        });
+        it('creates proper form inputs for static options', async () => {
+            // Create a form with a select that has static options
+            const form = document.createElement('form');
+            form.innerHTML = `<temba-select name="color" value="1">
+        <temba-option name="Red" value="0"></temba-option>
+        <temba-option name="Green" value="1"></temba-option>
+        <temba-option name="Blue" value="2"></temba-option>
+      </temba-select>`;
+            document.body.appendChild(form);
+            const select = form.querySelector('temba-select');
+            // Wait for component to be ready
+            await select.updateComplete;
+            // Process the static options and set initial value
+            select.handleSlotChange();
+            select.setSelectedValue(select.getAttribute('value'));
+            clock.runAll();
+            await select.updateComplete;
+            // Check that the select has the correct value
+            expect(select.values[0].name).to.equal('Green');
+            expect(select.values[0].value).to.equal('1');
+            // For single-mode selects, check the value property
+            expect(select.value).to.equal('1');
+            // Test FormData - it should include the select's value
+            const formData = new FormData(form);
+            expect(formData.get('color')).to.equal('1');
+            document.body.removeChild(form);
+        });
     });
     describe('endpoints', () => {
         it('can load from an endpoint', async () => {