@nyaruka/temba-components 0.126.0 → 0.128.0

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

@@ -1,3 +1,4 @@
+import '../temba-modules';
 import { html, fixture, expect } from '@open-wc/testing';
 import { EditorNode } from '../src/flow/EditorNode';
 import {
@@ -8,9 +9,7 @@ import {
   Router
 } from '../src/store/flow-definition.d';
 import { stub, restore } from 'sinon';
-
-// Register the component
-customElements.define('temba-editor-node', EditorNode);
+import { CustomEventType } from '../src/interfaces';
 
 describe('EditorNode', () => {
   let editorNode: EditorNode;
@@ -55,7 +54,7 @@ describe('EditorNode', () => {
         quick_replies: []
       };
 
-      const result = (editorNode as any).renderAction(mockNode, action);
+      const result = (editorNode as any).renderAction(mockNode, action, 0);
       expect(result).to.exist;
     });
 
@@ -71,7 +70,7 @@ describe('EditorNode', () => {
         uuid: 'action-1'
       };
 
-      const result = (editorNode as any).renderAction(mockNode, action);
+      const result = (editorNode as any).renderAction(mockNode, action, 1);
       expect(result).to.exist;
     });
   });
@@ -327,7 +326,8 @@ describe('EditorNode', () => {
       // Test renderAction
       const actionResult = (editorNode as any).renderAction(
         mockNode,
-        mockNode.actions[0]
+        mockNode.actions[0],
+        0
       );
       expect(actionResult).to.exist;
 
@@ -341,4 +341,320 @@ describe('EditorNode', () => {
       expect(mockNode.exits).to.have.length(1);
     });
   });
+
+  describe('drag and drop functionality', () => {
+    let editorNode: EditorNode;
+
+    beforeEach(() => {
+      editorNode = new EditorNode();
+    });
+
+    it('renders actions with sortable class and proper IDs', async () => {
+      const mockNode: Node = {
+        uuid: 'sortable-test-node',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'World',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      // Test that renderAction includes sortable class and proper ID
+      const result1 = (editorNode as any).renderAction(
+        mockNode,
+        mockNode.actions[0],
+        0
+      );
+      const result2 = (editorNode as any).renderAction(
+        mockNode,
+        mockNode.actions[1],
+        1
+      );
+
+      expect(result1).to.exist;
+      expect(result2).to.exist;
+
+      // Render the template to check the actual DOM
+      const container1 = await fixture(html`<div>${result1}</div>`);
+      const container2 = await fixture(html`<div>${result2}</div>`);
+
+      const actionElement1 = container1.querySelector('.action');
+      const actionElement2 = container2.querySelector('.action');
+
+      expect(actionElement1).to.exist;
+      expect(actionElement1?.classList.contains('sortable')).to.be.true;
+      expect(actionElement1?.id).to.equal('action-0');
+
+      expect(actionElement2).to.exist;
+      expect(actionElement2?.classList.contains('sortable')).to.be.true;
+      expect(actionElement2?.id).to.equal('action-1');
+    });
+
+    it('includes drag handle in rendered actions', async () => {
+      const mockNode: Node = {
+        uuid: 'drag-handle-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      let editorNode: EditorNode = await fixture(
+        html`<temba-flow-node
+          .node=${mockNode}
+          .ui=${{ position: { left: 0, top: 0 } }}
+        ></temba-flow-node>`
+      );
+
+      // No drag handle should be present if only one action
+      let dragHandle = editorNode.querySelector('.drag-handle');
+      expect(dragHandle).to.not.exist;
+
+      // Now add a second action to verify drag handle appears
+      mockNode.actions.push({
+        type: 'send_msg',
+        uuid: 'action-2',
+        text: 'World',
+        quick_replies: []
+      } as any);
+
+      editorNode = await fixture(
+        html`<temba-flow-node
+          .node=${mockNode}
+          .ui=${{ position: { left: 0, top: 0 } }}
+        ></temba-flow-node>`
+      );
+
+      dragHandle = editorNode.querySelector('.drag-handle');
+      expect(dragHandle).to.exist;
+    });
+
+    it('renders SortableList when actions are present', async () => {
+      const mockNode: Node = {
+        uuid: 'sortable-list-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'World',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'execute_actions'
+      };
+
+      // Set properties on the component
+      (editorNode as any).node = mockNode;
+      (editorNode as any).ui = mockUI;
+
+      const renderResult = editorNode.render();
+
+      // Render the template to check the actual DOM
+      const container = await fixture(html`<div>${renderResult}</div>`);
+
+      const sortableList = container.querySelector('temba-sortable-list');
+      expect(sortableList).to.exist;
+    });
+
+    it('does not render SortableList when no actions', async () => {
+      const mockNode: Node = {
+        uuid: 'no-actions-test',
+        actions: [],
+        exits: [{ uuid: 'exit-1' }]
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'execute_actions'
+      };
+
+      // Set properties on the component
+      (editorNode as any).node = mockNode;
+      (editorNode as any).ui = mockUI;
+
+      const renderResult = editorNode.render();
+
+      // Check that template does not include temba-sortable-list
+      expect(renderResult.strings.join('')).to.not.contain(
+        'temba-sortable-list'
+      );
+    });
+
+    it('handles order changed events correctly', async () => {
+      const mockNode: Node = {
+        uuid: 'order-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'First',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'Second',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-3',
+            text: 'Third',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      (editorNode as any).node = mockNode;
+
+      // Create a mock order changed event (swap first and last actions)
+      const orderChangedEvent = new CustomEvent(CustomEventType.OrderChanged, {
+        detail: { swap: [0, 2] }
+      });
+
+      // Call the handler directly
+      (editorNode as any).handleActionOrderChanged(orderChangedEvent);
+
+      // Verify the actions were reordered correctly
+      expect((editorNode as any).node.actions).to.have.length(3);
+      expect(((editorNode as any).node.actions[0] as any).text).to.equal(
+        'Second'
+      );
+      expect(((editorNode as any).node.actions[1] as any).text).to.equal(
+        'Third'
+      );
+      expect(((editorNode as any).node.actions[2] as any).text).to.equal(
+        'First'
+      );
+    });
+
+    it('preserves action data during reordering', () => {
+      const mockNode: Node = {
+        uuid: 'preserve-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Message 1',
+            quick_replies: ['Yes', 'No']
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'Message 2',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      (editorNode as any).node = mockNode;
+
+      // Swap the two actions
+      const orderChangedEvent = new CustomEvent(CustomEventType.OrderChanged, {
+        detail: { swap: [0, 1] }
+      });
+
+      (editorNode as any).handleActionOrderChanged(orderChangedEvent);
+
+      // Verify all action data is preserved
+      expect((editorNode as any).node.actions).to.have.length(2);
+      expect(((editorNode as any).node.actions[0] as any).text).to.equal(
+        'Message 2'
+      );
+      expect(
+        ((editorNode as any).node.actions[0] as any).quick_replies
+      ).to.deep.equal([]);
+      expect(((editorNode as any).node.actions[1] as any).text).to.equal(
+        'Message 1'
+      );
+      expect(
+        ((editorNode as any).node.actions[1] as any).quick_replies
+      ).to.deep.equal(['Yes', 'No']);
+    });
+
+    it('integrates with SortableList for full drag functionality', async () => {
+      const mockNode: Node = {
+        uuid: 'integration-drag-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'First Action',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'Second Action',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-3',
+            text: 'Third Action',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'execute_actions'
+      };
+
+      // Set properties on the component
+      (editorNode as any).node = mockNode;
+      (editorNode as any).ui = mockUI;
+
+      // Render the full component
+      const renderResult = editorNode.render();
+      const container = await fixture(html`<div>${renderResult}</div>`);
+
+      // Find the sortable list
+      const sortableList = container.querySelector('temba-sortable-list');
+      expect(sortableList).to.exist;
+
+      // Verify all actions are rendered as sortable items
+      const sortableItems = container.querySelectorAll('.sortable');
+      expect(sortableItems).to.have.length(3);
+
+      // Verify each action has correct ID and structure
+      expect(sortableItems[0].id).to.equal('action-0');
+      expect(sortableItems[1].id).to.equal('action-1');
+      expect(sortableItems[2].id).to.equal('action-2');
+
+      // Verify drag handles are present
+      const dragHandles = container.querySelectorAll('.drag-handle');
+      expect(dragHandles).to.have.length(3);
+    });
+  });
 });

package/test/temba-select.test.ts

@@ -5,12 +5,12 @@ import { Options } from '../src/options/Options';
 import { Select, SelectOption } from '../src/select/Select';
 import {
   assertScreenshot,
-  delay,
   getClip,
   getOptions,
   loadStore,
   openAndClick,
-  openSelect
+  openSelect,
+  waitForSelectPagination
 } from './utils.test';
 
 const colors = [
@@ -661,21 +661,9 @@ describe('temba-select', () => {
 
       await openSelect(clock, select);
 
-      // Wait for pagination to complete - keep checking until fetching is false
-      // and we have the expected number of results (15 = 3 pages * 5 items)
-      let attempts = 0;
-      const maxAttempts = 10;
-      while (select.fetching || select.visibleOptions.length < 15) {
-        if (attempts >= maxAttempts) {
-          throw new Error(
-            `Pagination did not complete after ${maxAttempts} attempts. fetching: ${select.fetching}, visibleOptions: ${select.visibleOptions.length}`
-          );
-        }
-        await select.updateComplete;
-        clock.runAll();
-        attempts++;
-        await delay(100);
-      }
+      // Wait for pagination to complete using our improved helper
+      // Use more attempts for this test since pagination can be slow in CI
+      await waitForSelectPagination(select, clock, 15, 50);
 
       // should have all three pages visible right away
       assert.equal(select.visibleOptions.length, 15);
@@ -694,13 +682,18 @@ describe('temba-select', () => {
 
       // wait for updates from fetching three pages
       await openSelect(clock, select);
+      await waitForSelectPagination(select, clock, 15, 50);
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen
       select.blur();
       await clock.tick(250);
+      // Ensure the select is properly closed before reopening
+      await select.updateComplete;
 
       await openSelect(clock, select);
+      // Cached results should be available immediately, but give some time for rendering
+      await waitForSelectPagination(select, clock, 15, 30);
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen once more (previous bug failed on third opening)

package/test/utils.test.ts

@@ -180,6 +180,26 @@ export const delay = (millis: number) => {
   });
 };
 
+// Enhanced wait utility for more robust testing
+export const waitForCondition = async (
+  predicate: () => boolean,
+  maxAttempts: number = 20,
+  delayMs: number = 50
+): Promise<void> => {
+  let attempts = 0;
+  while (!predicate() && attempts < maxAttempts) {
+    await delay(delayMs);
+    attempts++;
+  }
+  if (!predicate()) {
+    throw new Error(
+      `Condition not met after ${maxAttempts} attempts (${
+        maxAttempts * delayMs
+      }ms)`
+    );
+  }
+};
+
 export const assertScreenshot = async (
   filename: string,
   clip: Clip,
@@ -294,6 +314,31 @@ export const clickOption = async (
   index: number
 ) => {
   const options = getOptions(select);
+  if (!options) {
+    throw new Error('No options element found');
+  }
+
+  // Wait for the specific option to be available, but only if it's not already there
+  const existingOption = options.shadowRoot?.querySelector(
+    `[data-option-index="${index}"]`
+  );
+  if (!existingOption) {
+    try {
+      await waitForCondition(
+        () => {
+          const option = options.shadowRoot?.querySelector(
+            `[data-option-index="${index}"]`
+          );
+          return !!option;
+        },
+        10,
+        25
+      );
+    } catch (e) {
+      throw new Error(`Option at index ${index} not found after waiting`);
+    }
+  }
+
   const option = options.shadowRoot.querySelector(
     `[data-option-index="${index}"]`
   ) as HTMLDivElement;
@@ -318,6 +363,27 @@ export const openSelect = async (clock: any, select: Select<SelectOption>) => {
   // reduce wait time for options to become visible
   await waitFor(25);
   clock.runAll();
+
+  // For non-endpoint selects, options might be immediately available
+  // For endpoint selects, we need to wait for them to load
+  const hasEndpoint = select.getAttribute('endpoint');
+  if (hasEndpoint) {
+    try {
+      // Wait for options to be properly rendered and visible (but only for endpoint selects)
+      await waitForCondition(
+        () => {
+          const options = select.shadowRoot.querySelector(
+            'temba-options[visible]'
+          );
+          return options && options.isConnected;
+        },
+        10,
+        25
+      );
+    } catch (e) {
+      // If condition fails, continue - some tests might not need options to be visible immediately
+    }
+  }
 };
 
 export const openAndClick = async (
@@ -367,3 +433,35 @@ export const updateComponent = async (
 export const getValidText = () => {
   return 'sà-wàd-dee!';
 };
+
+// Helper for waiting for select pagination to complete
+export const waitForSelectPagination = async (
+  select: Select<SelectOption>,
+  clock: any,
+  expectedCount: number,
+  maxAttempts: number = 30
+): Promise<void> => {
+  let attempts = 0;
+  while (attempts < maxAttempts) {
+    // Ensure we're not still fetching
+    if (!select.fetching && select.visibleOptions.length >= expectedCount) {
+      return;
+    }
+
+    await select.updateComplete;
+    clock.runAll();
+
+    // Give more time between attempts for slow CI environments
+    await delay(75);
+
+    attempts++;
+  }
+
+  throw new Error(
+    `Pagination did not complete after ${maxAttempts} attempts (${
+      maxAttempts * 75
+    }ms). ` +
+      `Expected ${expectedCount} options, got ${select.visibleOptions.length}. ` +
+      `Fetching: ${select.fetching}`
+  );
+};

package/web-dev-server.config.mjs

@@ -15,30 +15,38 @@ export default {
     {
       name: 'flow-files',
       serve(context) {
-        if (context.request.method === 'POST') {
-          let body = '';
-          context.req.on('data', chunk => {
-            body += chunk.toString();
-          });
-
-          context.req.on('end', () => {
+        if (context.request.method === 'POST' && context.path.startsWith('/flow/revisions/')) {
+          return new Promise((resolve) => {
+            let body = '';
             const parts = context.path.split('/');
             const uuid = parts[3];
-
-            // read in the body
-            context.contentType = 'application/json';
-            if (body) {
-              fs.writeFileSync(
-                path.resolve(`./demo/data/flows/${uuid}.json`), JSON.stringify({ definition: JSON.parse(body) }, null, 2)
-              );
-
-              context.body = {
-                status: 'success',
-                message: `Flow ${uuid} saved successfully.`,
-              };
-            } else {
-              console.log(`No body received for flow ${uuid}.`);
-            }
+            context.req.on('data', chunk => {
+              body += chunk.toString();
+            });
+            context.req.on('end', () => {
+              context.contentType = 'application/json';
+              if (body) {
+                fs.writeFileSync(
+                  path.resolve(`./demo/data/flows/${uuid}.json`),
+                  JSON.stringify({ definition: JSON.parse(body) }, null, 2)
+                );
+                console.log(`Flow ${uuid} saved successfully.`);
+                context.body = {
+                  status: 'success',
+                  message: `Flow ${uuid} saved successfully.`,
+                  definition: JSON.parse(body),
+                };
+                context.status = 200;
+              } else {
+                console.log(`No body received for flow ${uuid}.`);
+                context.body = {
+                  status: 'error',
+                  message: `No body received for flow ${uuid}.`,
+                };
+                context.status = 400;
+              }
+              resolve();
+            });
           });
         }