@nyaruka/temba-components 0.131.0 → 0.131.2

package/test/nodes/split_by_subflow.test.ts

@@ -0,0 +1,381 @@
+import { expect } from '@open-wc/testing';
+import { split_by_subflow } from '../../src/flow/nodes/split_by_subflow';
+import { Node } from '../../src/store/flow-definition';
+import { NodeTest } from '../NodeHelper';
+
+/**
+ * Test suite for the split_by_subflow node configuration.
+ */
+describe('split_by_subflow node config', () => {
+  const helper = new NodeTest(split_by_subflow, 'split_by_subflow');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(split_by_subflow.name).to.equal('Enter a Flow');
+    });
+
+    it('has correct type', () => {
+      expect(split_by_subflow.type).to.equal('split_by_subflow');
+    });
+
+    it('has showAsAction set to true', () => {
+      expect(split_by_subflow.showAsAction).to.be.true;
+    });
+
+    it('has form configuration', () => {
+      expect(split_by_subflow.form).to.exist;
+      expect(split_by_subflow.form.flow).to.exist;
+      expect(split_by_subflow.form.flow.type).to.equal('select');
+      expect(split_by_subflow.form.flow.required).to.be.true;
+    });
+
+    it('has layout configuration', () => {
+      expect(split_by_subflow.layout).to.exist;
+      expect(split_by_subflow.layout).to.deep.equal(['flow']);
+    });
+  });
+
+  describe('toFormData', () => {
+    it('extracts data from node with enter_flow action', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            uuid: 'test-action',
+            type: 'enter_flow',
+            flow: { uuid: 'flow-123', name: 'Registration Flow' }
+          } as any
+        ],
+        router: {
+          type: 'switch',
+          operand: '@child.status',
+          cases: [
+            {
+              uuid: 'case-1',
+              type: 'has_only_text',
+              arguments: ['completed'],
+              category_uuid: 'cat-1'
+            }
+          ],
+          categories: [
+            { uuid: 'cat-1', name: 'Complete', exit_uuid: 'exit-1' },
+            { uuid: 'cat-2', name: 'Expired', exit_uuid: 'exit-2' }
+          ],
+          default_category_uuid: 'cat-2'
+        },
+        exits: [
+          { uuid: 'exit-1', destination_uuid: null },
+          { uuid: 'exit-2', destination_uuid: null }
+        ]
+      };
+
+      const formData = split_by_subflow.toFormData(node);
+
+      expect(formData.uuid).to.equal('test-node');
+      expect(formData.flow).to.be.an('array');
+      expect(formData.flow).to.have.lengthOf(1);
+      expect(formData.flow[0]).to.deep.equal({
+        uuid: 'flow-123',
+        name: 'Registration Flow'
+      });
+    });
+
+    it('handles empty node', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const formData = split_by_subflow.toFormData(node);
+
+      expect(formData.uuid).to.equal('test-node');
+      expect(formData.flow).to.be.an('array');
+      expect(formData.flow).to.have.lengthOf(0);
+    });
+  });
+
+  describe('fromFormData', () => {
+    it('creates node with enter_flow action and router from form data', () => {
+      const formData = {
+        uuid: 'test-node',
+        flow: [{ uuid: 'flow-123', name: 'Registration Flow' }]
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const node = split_by_subflow.fromFormData(formData, originalNode);
+
+      // Check node structure
+      expect(node.uuid).to.equal('test-node');
+      expect(node.actions).to.have.length(1);
+      expect(node.actions[0].type).to.equal('enter_flow');
+
+      // Check enter_flow action has properly formatted flow
+      const enterFlowAction = node.actions[0] as any;
+      expect(enterFlowAction.flow).to.exist;
+      expect(enterFlowAction.flow.uuid).to.equal('flow-123');
+      expect(enterFlowAction.flow.name).to.equal('Registration Flow');
+
+      // Check router
+      expect(node.router).to.exist;
+      expect(node.router.type).to.equal('switch');
+      expect(node.router.operand).to.equal('@child.status');
+      expect(node.router.categories).to.have.length(2);
+      expect(node.router.categories[0].name).to.equal('Complete');
+      expect(node.router.categories[1].name).to.equal('Expired');
+
+      // Check exits
+      expect(node.exits).to.have.length(2);
+    });
+
+    it('handles empty flow selection', () => {
+      const formData = {
+        uuid: 'test-node',
+        flow: []
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: []
+      };
+
+      const node = split_by_subflow.fromFormData(formData, originalNode);
+
+      // Should still create the node structure
+      expect(node.actions).to.have.length(1);
+      const enterFlowAction = node.actions[0] as any;
+      expect(enterFlowAction.flow.uuid).to.equal('');
+      expect(enterFlowAction.flow.name).to.equal('');
+    });
+
+    it('preserves UUIDs when editing existing node', () => {
+      const existingNode: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            uuid: 'existing-action-uuid',
+            type: 'enter_flow',
+            flow: { uuid: 'flow-old', name: 'Old Flow' }
+          } as any
+        ],
+        router: {
+          type: 'switch',
+          operand: '@child.status',
+          cases: [
+            {
+              uuid: 'existing-case-uuid',
+              type: 'has_only_text',
+              arguments: ['completed'],
+              category_uuid: 'existing-cat-1'
+            }
+          ],
+          categories: [
+            {
+              uuid: 'existing-cat-1',
+              name: 'Complete',
+              exit_uuid: 'existing-exit-1'
+            },
+            {
+              uuid: 'existing-cat-2',
+              name: 'Expired',
+              exit_uuid: 'existing-exit-2'
+            }
+          ],
+          default_category_uuid: 'existing-cat-2'
+        },
+        exits: [
+          { uuid: 'existing-exit-1', destination_uuid: null },
+          { uuid: 'existing-exit-2', destination_uuid: null }
+        ]
+      };
+
+      const formData = {
+        uuid: 'test-node',
+        flow: [{ uuid: 'flow-new', name: 'New Flow' }]
+      };
+
+      const node = split_by_subflow.fromFormData(formData, existingNode);
+
+      // Should preserve action UUID
+      expect(node.actions[0].uuid).to.equal('existing-action-uuid');
+
+      // Should preserve router structure UUIDs
+      expect(node.router.categories[0].uuid).to.equal('existing-cat-1');
+      expect(node.router.categories[1].uuid).to.equal('existing-cat-2');
+      expect(node.exits[0].uuid).to.equal('existing-exit-1');
+      expect(node.exits[1].uuid).to.equal('existing-exit-2');
+
+      // But should update the flow
+      const enterFlowAction = node.actions[0] as any;
+      expect(enterFlowAction.flow.uuid).to.equal('flow-new');
+      expect(enterFlowAction.flow.name).to.equal('New Flow');
+    });
+  });
+
+  describe('round-trip transformation', () => {
+    it('should preserve node structure through toFormData -> fromFormData', () => {
+      const originalNode: Node = {
+        uuid: 'test-node-uuid',
+        actions: [
+          {
+            uuid: 'action-uuid',
+            type: 'enter_flow',
+            flow: { uuid: 'flow-456', name: 'My Subflow' }
+          } as any
+        ],
+        router: {
+          type: 'switch',
+          operand: '@child.status',
+          cases: [
+            {
+              uuid: 'case-uuid',
+              type: 'has_only_text',
+              arguments: ['completed'],
+              category_uuid: 'cat-complete'
+            }
+          ],
+          categories: [
+            {
+              uuid: 'cat-complete',
+              name: 'Complete',
+              exit_uuid: 'exit-complete'
+            },
+            {
+              uuid: 'cat-expired',
+              name: 'Expired',
+              exit_uuid: 'exit-expired'
+            }
+          ],
+          default_category_uuid: 'cat-expired'
+        },
+        exits: [
+          { uuid: 'exit-complete', destination_uuid: null },
+          { uuid: 'exit-expired', destination_uuid: null }
+        ]
+      };
+
+      // Convert to form data
+      const formData = split_by_subflow.toFormData(originalNode);
+
+      // Convert back to node
+      const resultNode = split_by_subflow.fromFormData(formData, originalNode);
+
+      // Should match the original structure
+      expect(resultNode).to.deep.equal(originalNode);
+    });
+  });
+
+  describe('NodeEditor integration', () => {
+    it('should properly use node fromFormData when formDataToNode is called', async () => {
+      // This test simulates the bug where node.fromFormData should be used
+      // to create the entire node (including actions), not action.fromFormData
+
+      const { fixture, html } = await import('@open-wc/testing');
+      await import('../../temba-modules');
+
+      const originalNode: Node = {
+        uuid: 'test-node-uuid',
+        actions: [
+          {
+            uuid: 'action-uuid',
+            type: 'enter_flow',
+            flow: { uuid: 'flow-old', name: 'Old Flow' }
+          } as any
+        ],
+        router: {
+          type: 'switch',
+          operand: '@child.status',
+          cases: [
+            {
+              uuid: 'case-uuid',
+              type: 'has_only_text',
+              arguments: ['completed'],
+              category_uuid: 'cat-complete'
+            }
+          ],
+          categories: [
+            {
+              uuid: 'cat-complete',
+              name: 'Complete',
+              exit_uuid: 'exit-complete'
+            },
+            {
+              uuid: 'cat-expired',
+              name: 'Expired',
+              exit_uuid: 'exit-expired'
+            }
+          ],
+          default_category_uuid: 'cat-expired'
+        },
+        exits: [
+          { uuid: 'exit-complete', destination_uuid: null },
+          { uuid: 'exit-expired', destination_uuid: null }
+        ]
+      };
+
+      const nodeUI = {
+        type: 'split_by_subflow',
+        position: { left: 50, top: 50 }
+      };
+
+      // Create the node editor
+      const nodeEditor = (await fixture(html`
+        <temba-node-editor
+          .node=${originalNode}
+          .nodeUI=${nodeUI}
+          .action=${originalNode.actions[0]}
+          .isOpen=${true}
+        ></temba-node-editor>
+      `)) as any;
+
+      await nodeEditor.updateComplete;
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      await nodeEditor.updateComplete;
+
+      // Get the initial formData to verify toFormData was called
+      const initialFormData = nodeEditor.formData;
+      expect(initialFormData.flow).to.exist;
+      expect(initialFormData.flow).to.have.lengthOf(1);
+      expect(initialFormData.flow[0].uuid).to.equal('flow-old');
+
+      // Simulate changing the flow selection
+      const newFormData = {
+        ...initialFormData,
+        flow: [{ uuid: 'flow-new', name: 'New Flow' }]
+      };
+
+      // Call formDataToNode directly to test the transformation
+      const resultNode = nodeEditor.formDataToNode(newFormData);
+
+      // Verify that the result node has the new flow properly formatted
+      expect(resultNode).to.exist;
+      expect(resultNode.actions).to.have.length(1);
+
+      const enterFlowAction = resultNode.actions[0] as any;
+      expect(enterFlowAction.type).to.equal('enter_flow');
+
+      // This is the key assertion - the flow should be properly formatted
+      // as created by node's fromFormData, not by action's fromFormData
+      expect(enterFlowAction.flow).to.exist;
+      expect(enterFlowAction.flow.uuid).to.equal('flow-new');
+      expect(enterFlowAction.flow.name).to.equal('New Flow');
+
+      // The flow should NOT have extra properties that might come from the select component
+      expect(enterFlowAction.flow).to.not.have.property('value');
+
+      // Verify router structure was also created properly by node's fromFormData
+      expect(resultNode.router).to.exist;
+      expect(resultNode.router.type).to.equal('switch');
+      expect(resultNode.router.categories).to.have.length(2);
+      expect(resultNode.exits).to.have.length(2);
+    });
+  });
+});

package/test/nodes/wait_for_digits.test.ts

@@ -20,8 +20,8 @@ describe('wait_for_digits node config', () => {
       expect(wait_for_digits.type).to.equal('wait_for_digits');
     });
 
-    it('has correct color', () => {
-      expect(wait_for_digits.color).to.exist;
+    it('has correct group', () => {
+      expect(wait_for_digits.group).to.exist;
     });
 
     it('is a simple node config without form or layout', () => {

package/test/nodes/wait_for_response.test.ts

@@ -375,7 +375,8 @@ describe('wait_for_response node config', () => {
       const result = wait_for_response.fromFormData!(formData, originalNode);
 
       expect(result.uuid).to.equal('test-node');
-      expect(result.router?.result_name).to.equal('response');
+      // When no result_name is provided, it should not be set
+      expect(result.router?.result_name).to.be.undefined;
     });
 
     it('handles operators with no operands correctly', () => {

package/test/temba-action-drag-between-nodes.test.ts

@@ -0,0 +1,301 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { CanvasNode } from '../src/flow/CanvasNode';
+import { Node, NodeUI, SendMsg } from '../src/store/flow-definition';
+import '../temba-modules';
+
+describe('Drag actions between nodes', () => {
+  let node1: Node;
+  let node1UI: NodeUI;
+  let node2: Node;
+  let node2UI: NodeUI;
+
+  beforeEach(() => {
+    // Create test nodes
+    node1 = {
+      uuid: 'node-1',
+      actions: [
+        {
+          type: 'send_msg',
+          uuid: 'action-1',
+          text: 'First message',
+          quick_replies: []
+        } as SendMsg,
+        {
+          type: 'send_msg',
+          uuid: 'action-2',
+          text: 'Second message',
+          quick_replies: []
+        } as SendMsg
+      ],
+      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: []
+        } as SendMsg
+      ],
+      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<CanvasNode>(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<CanvasNode>(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<CanvasNode>(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 as any).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<CanvasNode>(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'
+    ) as HTMLElement;
+    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 as any).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 as any).externalDragInfo;
+    expect(externalDragInfo.dropIndex).to.equal(1);
+  });
+
+  it('should not accept drops from the same node', async () => {
+    const node1Element = await fixture<CanvasNode>(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 as any).externalDragInfo;
+    expect(externalDragInfo).to.be.null;
+  });
+
+  it('should clear external drag state and hide placeholder', async () => {
+    const node2Element = await fixture<CanvasNode>(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 as any).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<CanvasNode>(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: NodeUI = {
+      position: { left: 100, top: 100 },
+      type: 'split_by_expression', // Not execute_actions
+      config: {}
+    };
+
+    const routerNode: Node = {
+      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<CanvasNode>(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 as any).externalDragInfo;
+    expect(externalDragInfo).to.be.null;
+  });
+});