@nyaruka/temba-components 0.131.0 → 0.131.2

package/out-tsc/test/temba-action-drag-between-nodes.test.js

@@ -0,0 +1,252 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import '../temba-modules';
+describe('Drag actions between nodes', () => {
+    let node1;
+    let node1UI;
+    let node2;
+    let node2UI;
+    beforeEach(() => {
+        // Create test nodes
+        node1 = {
+            uuid: 'node-1',
+            actions: [
+                {
+                    type: 'send_msg',
+                    uuid: 'action-1',
+                    text: 'First message',
+                    quick_replies: []
+                },
+                {
+                    type: 'send_msg',
+                    uuid: 'action-2',
+                    text: 'Second message',
+                    quick_replies: []
+                }
+            ],
+            exits: [{ uuid: 'exit-1', destination_uuid: null }]
+        };
+        node1UI = {
+            position: { left: 100, top: 100 },
+            type: 'execute_actions',
+            config: {}
+        };
+        node2 = {
+            uuid: 'node-2',
+            actions: [
+                {
+                    type: 'send_msg',
+                    uuid: 'action-3',
+                    text: 'Third message',
+                    quick_replies: []
+                }
+            ],
+            exits: [{ uuid: 'exit-2', destination_uuid: null }]
+        };
+        node2UI = {
+            position: { left: 400, top: 100 },
+            type: 'execute_actions',
+            config: {}
+        };
+    });
+    it('should render execute_actions node with sortable list', async () => {
+        const node1Element = await fixture(html `
+      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>
+    `);
+        await node1Element.updateComplete;
+        // Verify node renders with sortable list
+        const sortableList = node1Element.querySelector('temba-sortable-list');
+        expect(sortableList).to.exist;
+        // Verify actions are rendered
+        const actions = node1Element.querySelectorAll('.action.sortable');
+        expect(actions.length).to.equal(2);
+    });
+    it('should show placeholder in target node during drag', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Simulate action-drag-over event from Editor
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEvent);
+        await node2Element.updateComplete;
+        // Check that placeholder is rendered
+        const placeholder = node2Element.querySelector('.drop-placeholder');
+        expect(placeholder).to.exist;
+    });
+    it('should handle drag-over event and store external drag info', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Simulate drag over
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEvent);
+        await node2Element.updateComplete;
+        // Verify that external drag info is stored (check internal state)
+        const externalDragInfo = node2Element.externalDragInfo;
+        expect(externalDragInfo).to.exist;
+        expect(externalDragInfo.action.uuid).to.equal('action-1');
+        expect(externalDragInfo.sourceNodeUuid).to.equal('node-1');
+    });
+    it('should calculate correct drop index based on mouse position', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Get action element bounds to calculate positions
+        const actionElement = node2Element.querySelector('.action.sortable');
+        expect(actionElement).to.exist;
+        const rect = actionElement.getBoundingClientRect();
+        const topY = rect.top + 5; // Near top of first action
+        const bottomY = rect.bottom + 5; // Below first action
+        // Drag over at top
+        const dragOverEventTop = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: topY
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEventTop);
+        await node2Element.updateComplete;
+        // Check drop index is at beginning
+        let externalDragInfo = node2Element.externalDragInfo;
+        expect(externalDragInfo.dropIndex).to.equal(0);
+        // Drag over at bottom
+        const dragOverEventBottom = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: bottomY
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEventBottom);
+        await node2Element.updateComplete;
+        // Check drop index is at end
+        externalDragInfo = node2Element.externalDragInfo;
+        expect(externalDragInfo.dropIndex).to.equal(1);
+    });
+    it('should not accept drops from the same node', async () => {
+        const node1Element = await fixture(html `
+      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>
+    `);
+        await node1Element.updateComplete;
+        // Try to drop action from node-1 onto node-1
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1', // Same as target
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node1Element.dispatchEvent(dragOverEvent);
+        await node1Element.updateComplete;
+        // Verify external drag info was NOT stored (rejected due to same source)
+        const externalDragInfo = node1Element.externalDragInfo;
+        expect(externalDragInfo).to.be.null;
+    });
+    it('should clear external drag state and hide placeholder', async () => {
+        const node2Element = await fixture(html `
+      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>
+    `);
+        await node2Element.updateComplete;
+        // Simulate drag over
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        node2Element.dispatchEvent(dragOverEvent);
+        await node2Element.updateComplete;
+        // Verify placeholder exists
+        let placeholder = node2Element.querySelector('.drop-placeholder');
+        expect(placeholder).to.exist;
+        // Clear the external drag state (simulating drag leaving the node)
+        node2Element.externalDragInfo = null;
+        // Trigger re-render
+        node2Element.requestUpdate();
+        await node2Element.updateComplete;
+        // Verify placeholder is gone
+        placeholder = node2Element.querySelector('.drop-placeholder');
+        expect(placeholder).to.not.exist;
+    });
+    it('should have sortable list for internal drag support', async () => {
+        const node1Element = await fixture(html `
+      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>
+    `);
+        await node1Element.updateComplete;
+        // Verify sortable list exists for internal drag (reordering within same node)
+        const sortableList = node1Element.querySelector('temba-sortable-list');
+        expect(sortableList).to.exist;
+        // Verify it has external drag enabled
+        expect(sortableList.hasAttribute('externaldrag')).to.be.true;
+    });
+    it('should only accept drops on execute_actions nodes', async () => {
+        const routerNodeUI = {
+            position: { left: 100, top: 100 },
+            type: 'split_by_expression', // Not execute_actions
+            config: {}
+        };
+        const routerNode = {
+            uuid: 'router-node',
+            actions: [],
+            exits: [{ uuid: 'exit-1', destination_uuid: null }],
+            router: {
+                type: 'switch',
+                operand: '@input',
+                cases: [],
+                categories: [],
+                default_category_uuid: 'cat-1'
+            }
+        };
+        const routerElement = await fixture(html `
+      <temba-flow-node
+        .node=${routerNode}
+        .ui=${routerNodeUI}
+      ></temba-flow-node>
+    `);
+        await routerElement.updateComplete;
+        // Try to drag over a non-execute_actions node
+        const dragOverEvent = new CustomEvent('action-drag-over', {
+            detail: {
+                action: node1.actions[0],
+                sourceNodeUuid: 'node-1',
+                actionIndex: 0,
+                mouseY: 150
+            },
+            bubbles: false
+        });
+        routerElement.dispatchEvent(dragOverEvent);
+        await routerElement.updateComplete;
+        // Verify external drag info was NOT stored (rejected due to wrong node type)
+        const externalDragInfo = routerElement.externalDragInfo;
+        expect(externalDragInfo).to.be.null;
+    });
+});
+//# sourceMappingURL=temba-action-drag-between-nodes.test.js.map

package/out-tsc/test/temba-action-drag-between-nodes.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-action-drag-between-nodes.test.js","sourceRoot":"","sources":["../../test/temba-action-drag-between-nodes.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing';\nimport { CanvasNode } from '../src/flow/CanvasNode';\nimport { Node, NodeUI, SendMsg } from '../src/store/flow-definition';\nimport '../temba-modules';\n\ndescribe('Drag actions between nodes', () => {\n  let node1: Node;\n  let node1UI: NodeUI;\n  let node2: Node;\n  let node2UI: NodeUI;\n\n  beforeEach(() => {\n    // Create test nodes\n    node1 = {\n      uuid: 'node-1',\n      actions: [\n        {\n          type: 'send_msg',\n          uuid: 'action-1',\n          text: 'First message',\n          quick_replies: []\n        } as SendMsg,\n        {\n          type: 'send_msg',\n          uuid: 'action-2',\n          text: 'Second message',\n          quick_replies: []\n        } as SendMsg\n      ],\n      exits: [{ uuid: 'exit-1', destination_uuid: null }]\n    };\n\n    node1UI = {\n      position: { left: 100, top: 100 },\n      type: 'execute_actions',\n      config: {}\n    };\n\n    node2 = {\n      uuid: 'node-2',\n      actions: [\n        {\n          type: 'send_msg',\n          uuid: 'action-3',\n          text: 'Third message',\n          quick_replies: []\n        } as SendMsg\n      ],\n      exits: [{ uuid: 'exit-2', destination_uuid: null }]\n    };\n\n    node2UI = {\n      position: { left: 400, top: 100 },\n      type: 'execute_actions',\n      config: {}\n    };\n  });\n\n  it('should render execute_actions node with sortable list', async () => {\n    const node1Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>\n    `);\n\n    await node1Element.updateComplete;\n\n    // Verify node renders with sortable list\n    const sortableList = node1Element.querySelector('temba-sortable-list');\n    expect(sortableList).to.exist;\n\n    // Verify actions are rendered\n    const actions = node1Element.querySelectorAll('.action.sortable');\n    expect(actions.length).to.equal(2);\n  });\n\n  it('should show placeholder in target node during drag', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Simulate action-drag-over event from Editor\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n\n    node2Element.dispatchEvent(dragOverEvent);\n    await node2Element.updateComplete;\n\n    // Check that placeholder is rendered\n    const placeholder = node2Element.querySelector('.drop-placeholder');\n    expect(placeholder).to.exist;\n  });\n\n  it('should handle drag-over event and store external drag info', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Simulate drag over\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEvent);\n    await node2Element.updateComplete;\n\n    // Verify that external drag info is stored (check internal state)\n    const externalDragInfo = (node2Element as any).externalDragInfo;\n    expect(externalDragInfo).to.exist;\n    expect(externalDragInfo.action.uuid).to.equal('action-1');\n    expect(externalDragInfo.sourceNodeUuid).to.equal('node-1');\n  });\n\n  it('should calculate correct drop index based on mouse position', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Get action element bounds to calculate positions\n    const actionElement = node2Element.querySelector(\n      '.action.sortable'\n    ) as HTMLElement;\n    expect(actionElement).to.exist;\n\n    const rect = actionElement.getBoundingClientRect();\n    const topY = rect.top + 5; // Near top of first action\n    const bottomY = rect.bottom + 5; // Below first action\n\n    // Drag over at top\n    const dragOverEventTop = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: topY\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEventTop);\n    await node2Element.updateComplete;\n\n    // Check drop index is at beginning\n    let externalDragInfo = (node2Element as any).externalDragInfo;\n    expect(externalDragInfo.dropIndex).to.equal(0);\n\n    // Drag over at bottom\n    const dragOverEventBottom = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: bottomY\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEventBottom);\n    await node2Element.updateComplete;\n\n    // Check drop index is at end\n    externalDragInfo = (node2Element as any).externalDragInfo;\n    expect(externalDragInfo.dropIndex).to.equal(1);\n  });\n\n  it('should not accept drops from the same node', async () => {\n    const node1Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>\n    `);\n\n    await node1Element.updateComplete;\n\n    // Try to drop action from node-1 onto node-1\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1', // Same as target\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    node1Element.dispatchEvent(dragOverEvent);\n    await node1Element.updateComplete;\n\n    // Verify external drag info was NOT stored (rejected due to same source)\n    const externalDragInfo = (node1Element as any).externalDragInfo;\n    expect(externalDragInfo).to.be.null;\n  });\n\n  it('should clear external drag state and hide placeholder', async () => {\n    const node2Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node2} .ui=${node2UI}></temba-flow-node>\n    `);\n\n    await node2Element.updateComplete;\n\n    // Simulate drag over\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    node2Element.dispatchEvent(dragOverEvent);\n    await node2Element.updateComplete;\n\n    // Verify placeholder exists\n    let placeholder = node2Element.querySelector('.drop-placeholder');\n    expect(placeholder).to.exist;\n\n    // Clear the external drag state (simulating drag leaving the node)\n    (node2Element as any).externalDragInfo = null;\n    // Trigger re-render\n    node2Element.requestUpdate();\n    await node2Element.updateComplete;\n\n    // Verify placeholder is gone\n    placeholder = node2Element.querySelector('.drop-placeholder');\n    expect(placeholder).to.not.exist;\n  });\n\n  it('should have sortable list for internal drag support', async () => {\n    const node1Element = await fixture<CanvasNode>(html`\n      <temba-flow-node .node=${node1} .ui=${node1UI}></temba-flow-node>\n    `);\n\n    await node1Element.updateComplete;\n\n    // Verify sortable list exists for internal drag (reordering within same node)\n    const sortableList = node1Element.querySelector('temba-sortable-list');\n    expect(sortableList).to.exist;\n\n    // Verify it has external drag enabled\n    expect(sortableList.hasAttribute('externaldrag')).to.be.true;\n  });\n\n  it('should only accept drops on execute_actions nodes', async () => {\n    const routerNodeUI: NodeUI = {\n      position: { left: 100, top: 100 },\n      type: 'split_by_expression', // Not execute_actions\n      config: {}\n    };\n\n    const routerNode: Node = {\n      uuid: 'router-node',\n      actions: [],\n      exits: [{ uuid: 'exit-1', destination_uuid: null }],\n      router: {\n        type: 'switch',\n        operand: '@input',\n        cases: [],\n        categories: [],\n        default_category_uuid: 'cat-1'\n      }\n    };\n\n    const routerElement = await fixture<CanvasNode>(html`\n      <temba-flow-node\n        .node=${routerNode}\n        .ui=${routerNodeUI}\n      ></temba-flow-node>\n    `);\n\n    await routerElement.updateComplete;\n\n    // Try to drag over a non-execute_actions node\n    const dragOverEvent = new CustomEvent('action-drag-over', {\n      detail: {\n        action: node1.actions[0],\n        sourceNodeUuid: 'node-1',\n        actionIndex: 0,\n        mouseY: 150\n      },\n      bubbles: false\n    });\n    routerElement.dispatchEvent(dragOverEvent);\n    await routerElement.updateComplete;\n\n    // Verify external drag info was NOT stored (rejected due to wrong node type)\n    const externalDragInfo = (routerElement as any).externalDragInfo;\n    expect(externalDragInfo).to.be.null;\n  });\n});\n"]}

package/out-tsc/test/temba-canvas-menu.test.js

@@ -0,0 +1,122 @@
+import { expect, assert } from '@open-wc/testing';
+import { CanvasMenu } from '../src/flow/CanvasMenu';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+describe('temba-canvas-menu', () => {
+    const createCanvasMenu = async () => {
+        const component = (await getComponent('temba-canvas-menu', {}, '', 250, 250));
+        await component.updateComplete;
+        return component;
+    };
+    it('can be created', async () => {
+        const menu = await createCanvasMenu();
+        assert.instanceOf(menu, CanvasMenu);
+        expect(menu.open).to.be.false;
+    });
+    it('is not visible when closed', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        expect(menu.open).to.be.false;
+        // verify no menu is rendered
+        const menuElement = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
+        expect(menuElement).to.be.null;
+    });
+    it('shows menu when opened', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        // open the menu
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        expect(menu.open).to.be.true;
+        expect(menu.x).to.equal(100);
+        expect(menu.y).to.equal(100);
+        // verify menu is rendered
+        const menuElement = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
+        expect(menuElement).to.not.be.null;
+        await assertScreenshot('canvas-menu/open', getClip(menu));
+    });
+    it('has three menu items', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        const menuItems = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.menu-item');
+        expect(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length).to.equal(3);
+        // check menu item titles
+        const titles = Array.from(menuItems || []).map((item) => { var _a; return (_a = item.querySelector('.menu-item-title')) === null || _a === void 0 ? void 0 : _a.textContent; });
+        expect(titles).to.deep.equal([
+            'Add Action',
+            'Add Split',
+            'Add Sticky Note'
+        ]);
+    });
+    it('closes when close() is called', async () => {
+        const menu = await createCanvasMenu();
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        expect(menu.open).to.be.true;
+        menu.close();
+        await menu.updateComplete;
+        expect(menu.open).to.be.false;
+    });
+    it('fires selection event when menu item is clicked', async () => {
+        var _a;
+        const menu = await createCanvasMenu();
+        menu.show(100, 100, { x: 50, y: 50 });
+        await menu.updateComplete;
+        let selectionFired = false;
+        let selectionDetail = null;
+        menu.addEventListener('temba-selection', (event) => {
+            selectionFired = true;
+            selectionDetail = event.detail;
+        });
+        // click on sticky note option (now the third item)
+        const menuItems = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.menu-item');
+        const stickyItem = menuItems === null || menuItems === void 0 ? void 0 : menuItems[2];
+        stickyItem.click();
+        await menu.updateComplete;
+        expect(selectionFired).to.be.true;
+        expect(selectionDetail).to.deep.equal({
+            action: 'sticky',
+            position: { x: 50, y: 50 }
+        });
+        expect(menu.open).to.be.false;
+    });
+    it('adjusts position to stay within viewport bounds', async () => {
+        var _a, _b;
+        const menu = await createCanvasMenu();
+        // open menu at position that would go off screen
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const margin = 10; // matches the margin in CanvasMenu
+        // position that would go off the right and bottom edges
+        menu.show(viewportWidth - 50, viewportHeight - 50, {
+            x: 100,
+            y: 100
+        });
+        await menu.updateComplete;
+        // wait for position adjustment
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        await menu.updateComplete;
+        const menuElement = (_a = menu.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
+        expect(menuElement).to.not.be.null;
+        const menuRect = menuElement.getBoundingClientRect();
+        // verify menu stays within viewport with margin
+        expect(menuRect.right).to.be.at.most(viewportWidth - margin);
+        expect(menuRect.bottom).to.be.at.most(viewportHeight - margin);
+        // verify click position is preserved (not adjusted)
+        let selectionFired = false;
+        let selectionDetail = null;
+        menu.addEventListener('temba-selection', (event) => {
+            selectionFired = true;
+            selectionDetail = event.detail;
+        });
+        const menuItems = (_b = menu.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.menu-item');
+        const actionItem = menuItems === null || menuItems === void 0 ? void 0 : menuItems[0];
+        actionItem.click();
+        await menu.updateComplete;
+        expect(selectionFired).to.be.true;
+        // click position should remain unchanged
+        expect(selectionDetail.position).to.deep.equal({ x: 100, y: 100 });
+    });
+});
+//# sourceMappingURL=temba-canvas-menu.test.js.map

package/out-tsc/test/temba-canvas-menu.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-canvas-menu.test.js","sourceRoot":"","sources":["../../test/temba-canvas-menu.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, assert } from '@open-wc/testing';\nimport { CanvasMenu } from '../src/flow/CanvasMenu';\nimport { assertScreenshot, getClip, getComponent } from './utils.test';\n\ndescribe('temba-canvas-menu', () => {\n  const createCanvasMenu = async () => {\n    const component = (await getComponent(\n      'temba-canvas-menu',\n      {},\n      '',\n      250,\n      250\n    )) as CanvasMenu;\n    await component.updateComplete;\n    return component;\n  };\n\n  it('can be created', async () => {\n    const menu = await createCanvasMenu();\n    assert.instanceOf(menu, CanvasMenu);\n    expect(menu.open).to.be.false;\n  });\n\n  it('is not visible when closed', async () => {\n    const menu = await createCanvasMenu();\n    expect(menu.open).to.be.false;\n\n    // verify no menu is rendered\n    const menuElement = menu.shadowRoot?.querySelector('.menu');\n    expect(menuElement).to.be.null;\n  });\n\n  it('shows menu when opened', async () => {\n    const menu = await createCanvasMenu();\n\n    // open the menu\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    expect(menu.open).to.be.true;\n    expect(menu.x).to.equal(100);\n    expect(menu.y).to.equal(100);\n\n    // verify menu is rendered\n    const menuElement = menu.shadowRoot?.querySelector('.menu');\n    expect(menuElement).to.not.be.null;\n\n    await assertScreenshot('canvas-menu/open', getClip(menu));\n  });\n\n  it('has three menu items', async () => {\n    const menu = await createCanvasMenu();\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');\n    expect(menuItems?.length).to.equal(3);\n\n    // check menu item titles\n    const titles = Array.from(menuItems || []).map(\n      (item) => item.querySelector('.menu-item-title')?.textContent\n    );\n    expect(titles).to.deep.equal([\n      'Add Action',\n      'Add Split',\n      'Add Sticky Note'\n    ]);\n  });\n\n  it('closes when close() is called', async () => {\n    const menu = await createCanvasMenu();\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    expect(menu.open).to.be.true;\n\n    menu.close();\n    await menu.updateComplete;\n\n    expect(menu.open).to.be.false;\n  });\n\n  it('fires selection event when menu item is clicked', async () => {\n    const menu = await createCanvasMenu();\n    menu.show(100, 100, { x: 50, y: 50 });\n    await menu.updateComplete;\n\n    let selectionFired = false;\n    let selectionDetail = null;\n\n    menu.addEventListener('temba-selection', (event: any) => {\n      selectionFired = true;\n      selectionDetail = event.detail;\n    });\n\n    // click on sticky note option (now the third item)\n    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');\n    const stickyItem = menuItems?.[2] as HTMLElement;\n    stickyItem.click();\n    await menu.updateComplete;\n\n    expect(selectionFired).to.be.true;\n    expect(selectionDetail).to.deep.equal({\n      action: 'sticky',\n      position: { x: 50, y: 50 }\n    });\n    expect(menu.open).to.be.false;\n  });\n\n  it('adjusts position to stay within viewport bounds', async () => {\n    const menu = await createCanvasMenu();\n\n    // open menu at position that would go off screen\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const margin = 10; // matches the margin in CanvasMenu\n\n    // position that would go off the right and bottom edges\n    menu.show(viewportWidth - 50, viewportHeight - 50, {\n      x: 100,\n      y: 100\n    });\n    await menu.updateComplete;\n\n    // wait for position adjustment\n    await new Promise((resolve) => setTimeout(resolve, 100));\n    await menu.updateComplete;\n\n    const menuElement = menu.shadowRoot?.querySelector('.menu') as HTMLElement;\n    expect(menuElement).to.not.be.null;\n\n    const menuRect = menuElement.getBoundingClientRect();\n\n    // verify menu stays within viewport with margin\n    expect(menuRect.right).to.be.at.most(viewportWidth - margin);\n    expect(menuRect.bottom).to.be.at.most(viewportHeight - margin);\n\n    // verify click position is preserved (not adjusted)\n    let selectionFired = false;\n    let selectionDetail = null;\n\n    menu.addEventListener('temba-selection', (event: any) => {\n      selectionFired = true;\n      selectionDetail = event.detail;\n    });\n\n    const menuItems = menu.shadowRoot?.querySelectorAll('.menu-item');\n    const actionItem = menuItems?.[0] as HTMLElement;\n    actionItem.click();\n    await menu.updateComplete;\n\n    expect(selectionFired).to.be.true;\n    // click position should remain unchanged\n    expect(selectionDetail.position).to.deep.equal({ x: 100, y: 100 });\n  });\n});\n"]}

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

@@ -3,6 +3,7 @@ import { html, fixture, expect } from '@open-wc/testing';
 import { CanvasNode } from '../src/flow/CanvasNode';
 import { stub, restore, useFakeTimers } from 'sinon';
 import { CustomEventType } from '../src/interfaces';
+import { ACTION_GROUPS } from '../src/flow/types';
 describe('EditorNode', () => {
     let editorNode;
     let mockPlumber;
@@ -177,7 +178,7 @@ describe('EditorNode', () => {
             var _a;
             const config = {
                 name: 'Test Action',
-                color: '#ff0000'
+                group: ACTION_GROUPS.send // Uses 'send' group which has color '#3498db'
             };
             const mockAction = {
                 type: 'send_msg',
@@ -189,7 +190,8 @@ describe('EditorNode', () => {
             expect(title).to.exist;
             const nameElement = title === null || title === void 0 ? void 0 : title.querySelector('.name');
             expect((_a = nameElement === null || nameElement === void 0 ? void 0 : nameElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()).to.equal('Test Action');
-            expect(title === null || title === void 0 ? void 0 : title.getAttribute('style')).to.contain('background:#ff0000');
+            // The 'send' group has color '#3498db' from ACTION_GROUP_METADATA
+            expect(title === null || title === void 0 ? void 0 : title.getAttribute('style')).to.contain('background:#3498db');
         });
     });
     describe('updated lifecycle', () => {
@@ -931,5 +933,86 @@ describe('EditorNode', () => {
             // This sequence ensures JSPlumb visuals stay in sync with the flow definition
         });
     });
+    describe('add action button', () => {
+        beforeEach(async () => {
+            editorNode = new CanvasNode();
+            editorNode['plumber'] = mockPlumber;
+        });
+        it('handleAddActionClick fires AddActionRequested event', () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: [{ uuid: 'exit-1', destination_uuid: null }]
+            };
+            editorNode['node'] = mockNode;
+            let eventFired = false;
+            let eventDetail = null;
+            editorNode.addEventListener(CustomEventType.AddActionRequested, (e) => {
+                eventFired = true;
+                eventDetail = e.detail;
+            });
+            const mockEvent = {
+                preventDefault: stub(),
+                stopPropagation: stub()
+            };
+            // Call the add action click handler
+            editorNode.handleAddActionClick(mockEvent);
+            // Verify the event was fired with correct detail
+            expect(eventFired).to.be.true;
+            expect(eventDetail).to.exist;
+            expect(eventDetail.nodeUuid).to.equal('test-node');
+            // Verify event handlers were called
+            expect(mockEvent.preventDefault).to.have.been.called;
+            expect(mockEvent.stopPropagation).to.have.been.called;
+        });
+        it('renders add action button for execute_actions nodes', () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: [{ uuid: 'exit-1', destination_uuid: null }]
+            };
+            const mockUI = {
+                position: { left: 0, top: 0 },
+                type: 'execute_actions'
+            };
+            editorNode['node'] = mockNode;
+            editorNode['ui'] = mockUI;
+            const rendered = editorNode.render();
+            expect(rendered).to.exist;
+        });
+        it('renders correctly for non-execute_actions nodes', () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [],
+                exits: [{ uuid: 'exit-1', destination_uuid: null }],
+                router: {
+                    type: 'switch',
+                    categories: []
+                }
+            };
+            const mockUI = {
+                position: { left: 0, top: 0 },
+                type: 'wait_for_response'
+            };
+            editorNode['node'] = mockNode;
+            editorNode['ui'] = mockUI;
+            const rendered = editorNode.render();
+            expect(rendered).to.exist;
+        });
+    });
 });
 //# sourceMappingURL=temba-flow-editor-node.test.js.map