@nyaruka/temba-components 0.129.3 → 0.129.4

package/test/actions/send_msg.test.ts

@@ -0,0 +1,130 @@
+import { expect } from '@open-wc/testing';
+import { send_msg } from '../../src/flow/actions/send_msg';
+import { SendMsg } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the send_msg action configuration.
+ */
+describe('send_msg action config', () => {
+  const helper = new ActionTest(send_msg, 'send_msg');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(send_msg.name).to.equal('Send Message');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'send_msg',
+        text: 'Hello world!',
+        quick_replies: []
+      } as SendMsg,
+      'simple-text'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'send_msg',
+        text: 'Hello\nworld!\nHow are you?',
+        quick_replies: []
+      } as SendMsg,
+      'text-with-linebreaks'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'send_msg',
+        text: 'Choose an option:',
+        quick_replies: ['Yes', 'No', 'Maybe']
+      } as SendMsg,
+      'text-with-quick-replies'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'send_msg',
+        text: 'Rate our service:',
+        quick_replies: [
+          '⭐',
+          '⭐⭐',
+          '⭐⭐⭐',
+          '⭐⭐⭐⭐',
+          '⭐⭐⭐⭐⭐',
+          'Not applicable'
+        ]
+      } as SendMsg,
+      'text-with-many-quick-replies'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-5',
+        type: 'send_msg',
+        text: 'Welcome to our service!\n\nPlease choose from the following options:\n- Option A: Basic plan\n- Option B: Premium plan\n- Option C: Enterprise plan',
+        quick_replies: ['Basic', 'Premium', 'Enterprise']
+      } as SendMsg,
+      'multiline-text-with-replies'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-6',
+        type: 'send_msg',
+        text: 'Which department would you like to contact?',
+        quick_replies: [
+          'Customer Support Department',
+          'Technical Support Team',
+          'Billing and Accounts Department',
+          'Sales and Marketing Division'
+        ]
+      } as SendMsg,
+      'long-quick-replies'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-7',
+        type: 'send_msg',
+        text: 'This action definition is missing quick_replies altogether.'
+      } as SendMsg,
+      'text-without-quick-replies'
+    );
+  });
+
+  describe('validation edge cases', () => {
+    it('fails validation for empty text', () => {
+      const action: SendMsg = {
+        uuid: 'test-action',
+        type: 'send_msg',
+        text: '',
+        quick_replies: []
+      };
+
+      const result = send_msg.validate(action);
+      expect(result.valid).to.be.false;
+      expect(result.errors.text).to.equal('Message text is required');
+    });
+
+    it('fails validation for whitespace-only text', () => {
+      const action: SendMsg = {
+        uuid: 'test-action',
+        type: 'send_msg',
+        text: '   \n\t  ',
+        quick_replies: []
+      };
+
+      const result = send_msg.validate(action);
+      expect(result.valid).to.be.false;
+      expect(result.errors.text).to.equal('Message text is required');
+    });
+  });
+});

package/test/temba-action-editing-integration.test.ts

@@ -0,0 +1,240 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { CanvasNode } from '../src/flow/CanvasNode';
+import { SendMsg, Node } from '../src/store/flow-definition';
+import { CustomEventType } from '../src/interfaces';
+import '../temba-modules';
+
+describe('Action Editing Integration', () => {
+  it('should handle complete action editing workflow', async () => {
+    // Create a test node with a send_msg action
+    const testNode: Node = {
+      uuid: 'test-node',
+      actions: [
+        {
+          type: 'send_msg',
+          uuid: 'test-action',
+          text: 'Hello world',
+          quick_replies: []
+        } as SendMsg
+      ],
+      exits: []
+    };
+
+    // Create EditorNode
+    const editorNode: CanvasNode = await fixture(html`
+      <temba-flow-node
+        .node=${testNode}
+        .ui=${{ position: { left: 0, top: 0 } }}
+      ></temba-flow-node>
+    `);
+
+    await editorNode.updateComplete;
+
+    // Verify action is rendered
+    const actionElement = editorNode.querySelector('.action');
+    expect(actionElement).to.exist;
+
+    // Set up event listener to catch ActionEditRequested event
+    let editRequestedEvent: CustomEvent | null = null;
+    editorNode.addEventListener(
+      CustomEventType.ActionEditRequested,
+      (event: CustomEvent) => {
+        editRequestedEvent = event;
+      }
+    );
+
+    // Simulate clicking on the action content (not the remove button)
+    const actionContent = editorNode.querySelector(
+      '.action-content'
+    ) as HTMLElement;
+    expect(actionContent).to.exist;
+
+    // Simulate a click (mousedown followed by mouseup at same position)
+    const mouseDownEvent = new MouseEvent('mousedown', {
+      clientX: 100,
+      clientY: 100,
+      bubbles: true
+    });
+    const mouseUpEvent = new MouseEvent('mouseup', {
+      clientX: 100,
+      clientY: 100,
+      bubbles: true
+    });
+
+    actionContent.dispatchEvent(mouseDownEvent);
+    actionContent.dispatchEvent(mouseUpEvent);
+
+    // Verify event was fired
+    expect(editRequestedEvent).to.exist;
+    expect(editRequestedEvent!.detail.action).to.deep.equal(
+      testNode.actions[0]
+    );
+    expect(editRequestedEvent!.detail.nodeUuid).to.equal('test-node');
+  });
+
+  it('should ignore clicks on remove button', async () => {
+    // Create a test node with a send_msg action
+    const testNode: Node = {
+      uuid: 'test-node',
+      actions: [
+        {
+          type: 'send_msg',
+          uuid: 'test-action',
+          text: 'Hello world',
+          quick_replies: []
+        } as SendMsg
+      ],
+      exits: []
+    };
+
+    // Create EditorNode
+    const editorNode: CanvasNode = await fixture(html`
+      <temba-flow-node
+        .node=${testNode}
+        .ui=${{ position: { left: 0, top: 0 } }}
+      ></temba-flow-node>
+    `);
+
+    await editorNode.updateComplete;
+
+    // Set up event listener to catch ActionEditRequested event
+    let editRequestedEvent: CustomEvent | null = null;
+    editorNode.addEventListener(
+      CustomEventType.ActionEditRequested,
+      (event: CustomEvent) => {
+        editRequestedEvent = event;
+      }
+    );
+
+    // Simulate clicking on the remove button
+    const removeButton = editorNode.querySelector(
+      '.remove-button'
+    ) as HTMLElement;
+    expect(removeButton).to.exist;
+
+    removeButton.click();
+
+    // Verify NO ActionEditRequested event was fired (only remove action handling)
+    expect(editRequestedEvent).to.be.null;
+  });
+
+  it('should not open action editor when dragging beyond threshold', async () => {
+    // Create a test node with a send_msg action
+    const testNode: Node = {
+      uuid: 'test-node',
+      actions: [
+        {
+          type: 'send_msg',
+          uuid: 'test-action',
+          text: 'Hello world',
+          quick_replies: []
+        } as SendMsg
+      ],
+      exits: []
+    };
+
+    // Create EditorNode
+    const editorNode: CanvasNode = await fixture(html`
+      <temba-flow-node
+        .node=${testNode}
+        .ui=${{ position: { left: 0, top: 0 } }}
+      ></temba-flow-node>
+    `);
+
+    await editorNode.updateComplete;
+
+    // Set up event listener to catch ActionEditRequested event
+    let editRequestedEvent: CustomEvent | null = null;
+    editorNode.addEventListener(
+      CustomEventType.ActionEditRequested,
+      (event: CustomEvent) => {
+        editRequestedEvent = event;
+      }
+    );
+
+    // Simulate a drag operation (mousedown followed by mouseup at different position beyond threshold)
+    const actionContent = editorNode.querySelector(
+      '.action-content'
+    ) as HTMLElement;
+    expect(actionContent).to.exist;
+
+    const mouseDownEvent = new MouseEvent('mousedown', {
+      clientX: 100,
+      clientY: 100,
+      bubbles: true
+    });
+    const mouseUpEvent = new MouseEvent('mouseup', {
+      clientX: 110, // 10 pixels away, beyond the 5 pixel threshold
+      clientY: 100,
+      bubbles: true
+    });
+
+    actionContent.dispatchEvent(mouseDownEvent);
+    actionContent.dispatchEvent(mouseUpEvent);
+
+    // Verify NO ActionEditRequested event was fired because we dragged beyond threshold
+    expect(editRequestedEvent).to.be.null;
+  });
+
+  it('should open action editor when clicking within threshold', async () => {
+    // Create a test node with a send_msg action
+    const testNode: Node = {
+      uuid: 'test-node',
+      actions: [
+        {
+          type: 'send_msg',
+          uuid: 'test-action',
+          text: 'Hello world',
+          quick_replies: []
+        } as SendMsg
+      ],
+      exits: []
+    };
+
+    // Create EditorNode
+    const editorNode: CanvasNode = await fixture(html`
+      <temba-flow-node
+        .node=${testNode}
+        .ui=${{ position: { left: 0, top: 0 } }}
+      ></temba-flow-node>
+    `);
+
+    await editorNode.updateComplete;
+
+    // Set up event listener to catch ActionEditRequested event
+    let editRequestedEvent: CustomEvent | null = null;
+    editorNode.addEventListener(
+      CustomEventType.ActionEditRequested,
+      (event: CustomEvent) => {
+        editRequestedEvent = event;
+      }
+    );
+
+    // Simulate a small movement (mousedown followed by mouseup at position within threshold)
+    const actionContent = editorNode.querySelector(
+      '.action-content'
+    ) as HTMLElement;
+    expect(actionContent).to.exist;
+
+    const mouseDownEvent = new MouseEvent('mousedown', {
+      clientX: 100,
+      clientY: 100,
+      bubbles: true
+    });
+    const mouseUpEvent = new MouseEvent('mouseup', {
+      clientX: 103, // 3 pixels away, within the 5 pixel threshold
+      clientY: 102, // 2 pixels away
+      bubbles: true
+    });
+
+    actionContent.dispatchEvent(mouseDownEvent);
+    actionContent.dispatchEvent(mouseUpEvent);
+
+    // Verify ActionEditRequested event was fired because we stayed within threshold
+    expect(editRequestedEvent).to.exist;
+    expect(editRequestedEvent!.detail.action).to.deep.equal(
+      testNode.actions[0]
+    );
+    expect(editRequestedEvent!.detail.nodeUuid).to.equal('test-node');
+  });
+});

package/test/temba-checkbox.test.ts

@@ -71,7 +71,7 @@ describe('temba-checkbox', () => {
     const el: Checkbox = await fixture(html`
       <temba-checkbox name="My Checkbox"></temba-checkbox>
     `);
-    expect(el.label).to.equal(null);
+    expect(el.label).to.equal(undefined);
     //the ".wrapper.label" style results in the background hover effect
     const wrapperDivEl = el.shadowRoot.querySelector(
       'div.wrapper.label'

package/test/temba-field-config.test.ts

@@ -0,0 +1,152 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/form/KeyValueEditor';
+import '../src/form/ArrayEditor';
+
+describe('Field Configuration System', () => {
+  describe('KeyValueEditor', () => {
+    it('should render with empty value and always show one empty row', async () => {
+      const el = await fixture(html`
+        <temba-key-value-editor></temba-key-value-editor>
+      `);
+
+      expect(el).to.exist;
+      // Should always have at least one row (empty row)
+      const rows = el.shadowRoot?.querySelectorAll('.row');
+      expect(rows?.length).to.equal(1);
+      // Should not have add button anymore
+      expect(el.shadowRoot?.querySelector('.add-btn')).to.not.exist;
+    });
+
+    it('should render with initial values and maintain empty row', async () => {
+      const initialValue = {
+        'Content-Type': 'application/json',
+        Authorization: 'Bearer token123'
+      };
+
+      const el = await fixture(html`
+        <temba-key-value-editor .value=${initialValue}></temba-key-value-editor>
+      `);
+
+      expect(el).to.exist;
+      // Should have 2 data rows + 1 empty row = 3 total
+      const rows = el.shadowRoot?.querySelectorAll('.row');
+      expect(rows?.length).to.equal(3);
+    });
+
+    it('should emit clean values without empty rows', async () => {
+      const el = await fixture(html`
+        <temba-key-value-editor></temba-key-value-editor>
+      `);
+
+      let changeEvent: any = null;
+      el.addEventListener('change', (e) => {
+        changeEvent = e;
+      });
+
+      // Trigger a field change that should cause an update
+      const keyInput = el.shadowRoot?.querySelector('temba-textinput') as any;
+      if (keyInput) {
+        keyInput.value = 'test-key';
+        keyInput.dispatchEvent(new Event('change'));
+      }
+
+      await (el as any).updateComplete;
+
+      expect(changeEvent).to.exist;
+      // Should emit the array format with key-value pairs
+      expect(changeEvent.detail.value).to.be.an('array');
+      expect(changeEvent.detail.value).to.deep.include({
+        key: 'test-key',
+        value: ''
+      });
+    });
+
+    it('should hide remove button for empty rows', async () => {
+      const initialValue = {
+        'Content-Type': 'application/json'
+      };
+
+      const el = await fixture(html`
+        <temba-key-value-editor .value=${initialValue}></temba-key-value-editor>
+      `);
+
+      expect(el).to.exist;
+      const rows = el.shadowRoot?.querySelectorAll('.row');
+      expect(rows?.length).to.equal(2); // 1 data row + 1 empty row
+
+      // First row (with data) should have remove button
+      const firstRowRemoveBtn = rows?.[0]?.querySelector('.remove-btn');
+      expect(firstRowRemoveBtn).to.exist;
+
+      // Second row (empty) should have spacer instead of remove button
+      const secondRowRemoveBtn = rows?.[1]?.querySelector('.remove-btn');
+      const secondRowSpacer = rows?.[1]?.querySelector('.remove-btn-spacer');
+      expect(secondRowRemoveBtn).to.not.exist;
+      expect(secondRowSpacer).to.exist;
+    });
+
+    it('should show remove button when empty row gets content', async () => {
+      const el = await fixture(html`
+        <temba-key-value-editor></temba-key-value-editor>
+      `);
+
+      // Initially should have no remove button (empty row)
+      let rows = el.shadowRoot?.querySelectorAll('.row');
+      expect(rows?.[0]?.querySelector('.remove-btn')).to.not.exist;
+      expect(rows?.[0]?.querySelector('.remove-btn-spacer')).to.exist;
+
+      // Simulate adding content by setting value and triggering update
+      (el as any).value = { 'test-key': '' };
+      (el as any).requestUpdate();
+      await (el as any).updateComplete;
+
+      // Now should have remove button for the row with content
+      rows = el.shadowRoot?.querySelectorAll('.row');
+      expect(rows?.length).to.equal(2); // row with content + empty row
+      expect(rows?.[0]?.querySelector('.remove-btn')).to.exist;
+      expect(rows?.[1]?.querySelector('.remove-btn-spacer')).to.exist;
+    });
+  });
+
+  describe('ArrayEditor', () => {
+    it('should render with empty array', async () => {
+      const itemConfig = {
+        name: { type: 'text', label: 'Name', required: true },
+        value: { type: 'text', label: 'Value' }
+      };
+
+      const el = await fixture(html`
+        <temba-array-editor .itemConfig=${itemConfig}></temba-array-editor>
+      `);
+
+      await (el as any).updateComplete;
+
+      expect(el).to.exist;
+      expect(el.shadowRoot?.querySelector('.add-btn')).to.exist;
+    });
+
+    it('should render with initial items', async () => {
+      const itemConfig = {
+        operator: { type: 'text', label: 'Operator' },
+        value: { type: 'text', label: 'Value' }
+      };
+
+      const initialValue = [
+        { operator: 'equals', value: 'test' },
+        { operator: 'contains', value: 'example' }
+      ];
+
+      const el = await fixture(html`
+        <temba-array-editor
+          .value=${initialValue}
+          .itemConfig=${itemConfig}
+          itemLabel="Rule"
+        ></temba-array-editor>
+      `);
+
+      expect(el).to.exist;
+      const items = el.shadowRoot?.querySelectorAll('.array-item');
+      expect(items?.length).to.equal(2);
+    });
+  });
+});

package/test/temba-flow-editor-node.test.ts

@@ -1,6 +1,6 @@
 import '../temba-modules';
 import { html, fixture, expect } from '@open-wc/testing';
-import { EditorNode } from '../src/flow/EditorNode';
+import { CanvasNode } from '../src/flow/CanvasNode';
 import {
   Node,
   NodeUI,
@@ -12,7 +12,7 @@ import { stub, restore, useFakeTimers } from 'sinon';
 import { CustomEventType } from '../src/interfaces';
 
 describe('EditorNode', () => {
-  let editorNode: EditorNode;
+  let editorNode: CanvasNode;
   let mockPlumber: any;
 
   beforeEach(async () => {
@@ -30,14 +30,14 @@ describe('EditorNode', () => {
 
   describe('basic functionality', () => {
     it('creates render root as element itself', () => {
-      const editorNode = new EditorNode();
+      const editorNode = new CanvasNode();
       expect(editorNode.createRenderRoot()).to.equal(editorNode);
     });
   });
 
   describe('renderAction', () => {
     beforeEach(() => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
     });
 
     it('renders action with known config', () => {
@@ -77,7 +77,7 @@ describe('EditorNode', () => {
 
   describe('renderRouter', () => {
     beforeEach(() => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
     });
 
     it('renders router with result name', () => {
@@ -129,7 +129,7 @@ describe('EditorNode', () => {
 
   describe('renderCategories', () => {
     beforeEach(() => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
     });
 
     it('returns null when no router', () => {
@@ -179,7 +179,7 @@ describe('EditorNode', () => {
 
   describe('renderExit', () => {
     beforeEach(() => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
     });
 
     it('renders exit with connected class when destination exists', async () => {
@@ -214,7 +214,7 @@ describe('EditorNode', () => {
 
   describe('renderTitle', () => {
     beforeEach(() => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
     });
 
     it('renders title with config color and name', async () => {
@@ -235,7 +235,7 @@ describe('EditorNode', () => {
 
   describe('updated lifecycle', () => {
     it('handles updated without node changes', () => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
       (editorNode as any).plumber = mockPlumber;
 
       const changes = new Map();
@@ -250,12 +250,12 @@ describe('EditorNode', () => {
     });
 
     it('verifies updated method exists', () => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
       expect(typeof (editorNode as any).updated).to.equal('function');
     });
 
     it('processes node changes and calls plumber methods', () => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
       (editorNode as any).plumber = mockPlumber;
 
       const mockNode: Node = {
@@ -321,7 +321,7 @@ describe('EditorNode', () => {
       };
 
       // Test individual render methods work
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
 
       // Test renderAction
       const actionResult = (editorNode as any).renderAction(
@@ -343,10 +343,10 @@ describe('EditorNode', () => {
   });
 
   describe('drag and drop functionality', () => {
-    let editorNode: EditorNode;
+    let editorNode: CanvasNode;
 
     beforeEach(() => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
     });
 
     it('renders actions with sortable class and proper IDs', async () => {
@@ -414,7 +414,7 @@ describe('EditorNode', () => {
         exits: []
       };
 
-      let editorNode: EditorNode = await fixture(
+      let editorNode: CanvasNode = await fixture(
         html`<temba-flow-node
           .node=${mockNode}
           .ui=${{ position: { left: 0, top: 0 } }}
@@ -681,7 +681,7 @@ describe('EditorNode', () => {
 
       (window as any).getStore = () => mockStore;
 
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
       (editorNode as any).plumber = mockPlumber;
     });
 
@@ -814,12 +814,12 @@ describe('EditorNode', () => {
   });
 
   describe('action removal', () => {
-    let editorNode: EditorNode;
+    let editorNode: CanvasNode;
     let mockPlumber: any;
     let getStoreStub: any;
 
     beforeEach(() => {
-      editorNode = new EditorNode();
+      editorNode = new CanvasNode();
 
       // Mock plumber
       mockPlumber = {