@nyaruka/temba-components 0.131.1 → 0.131.3

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

@@ -10,6 +10,7 @@ import {
 } from '../src/store/flow-definition.d';
 import { stub, restore, useFakeTimers } from 'sinon';
 import { CustomEventType } from '../src/interfaces';
+import { ACTION_GROUPS } from '../src/flow/types';
 
 describe('EditorNode', () => {
   let editorNode: CanvasNode;
@@ -220,7 +221,7 @@ describe('EditorNode', () => {
     it('renders title with config color and name', async () => {
       const config = {
         name: 'Test Action',
-        color: '#ff0000'
+        group: ACTION_GROUPS.send // Uses 'send' group which has color '#3498db'
       };
 
       const mockAction: Action = {
@@ -236,7 +237,8 @@ describe('EditorNode', () => {
 
       const nameElement = title?.querySelector('.name');
       expect(nameElement?.textContent?.trim()).to.equal('Test Action');
-      expect(title?.getAttribute('style')).to.contain('background:#ff0000');
+      // The 'send' group has color '#3498db' from ACTION_GROUP_METADATA
+      expect(title?.getAttribute('style')).to.contain('background:#3498db');
     });
   });
 
@@ -1199,4 +1201,246 @@ 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: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any
+        ],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+
+      editorNode['node'] = mockNode;
+
+      let eventFired = false;
+      let eventDetail: any = null;
+
+      editorNode.addEventListener(CustomEventType.AddActionRequested, (e) => {
+        eventFired = true;
+        eventDetail = (e as CustomEvent).detail;
+      });
+
+      const mockEvent = {
+        preventDefault: stub(),
+        stopPropagation: stub()
+      } as any;
+
+      // Call the add action click handler
+      (editorNode as any).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: Node = {
+        uuid: 'test-node',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any
+        ],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }]
+      };
+
+      const mockUI: NodeUI = {
+        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: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: [{ uuid: 'exit-1', destination_uuid: null }],
+        router: {
+          type: 'switch',
+          categories: []
+        }
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 0, top: 0 },
+        type: 'wait_for_response'
+      };
+
+      editorNode['node'] = mockNode;
+      editorNode['ui'] = mockUI;
+
+      const rendered = editorNode.render();
+      expect(rendered).to.exist;
+    });
+  });
+
+  describe('router section graying', () => {
+    it('grays out split nodes when categories not included in translation', async () => {
+      const mockNode: Node = {
+        uuid: 'split-node-1',
+        actions: [],
+        exits: [
+          { uuid: 'exit-1', destination_uuid: null },
+          { uuid: 'exit-2', destination_uuid: null }
+        ],
+        router: {
+          type: 'switch',
+          result_name: 'Response',
+          categories: [
+            { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
+            { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
+          ]
+        }
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 0, top: 0 },
+        type: 'split_by_groups'
+      };
+
+      // Create node
+      const editorNode: CanvasNode = await fixture(
+        html`<temba-flow-node
+          .node=${mockNode}
+          .ui=${mockUI}
+        ></temba-flow-node>`
+      );
+
+      // Set fromStore properties directly
+      (editorNode as any).isTranslating = true;
+      (editorNode as any).includeCategoriesInTranslation = false;
+      (editorNode as any).languageCode = 'spa';
+
+      // Force re-render
+      editorNode.requestUpdate('isTranslating');
+      editorNode.requestUpdate('includeCategoriesInTranslation');
+      await editorNode.updateComplete;
+
+      // Find the node element
+      const nodeElement = editorNode.querySelector('.node');
+      expect(nodeElement).to.exist;
+
+      // Verify it has the non-localizable class
+      expect(nodeElement?.classList.contains('non-localizable')).to.be.true;
+    });
+
+    it('does not gray out split nodes when categories are included in translation', async () => {
+      const mockNode: Node = {
+        uuid: 'split-node-2',
+        actions: [],
+        exits: [
+          { uuid: 'exit-1', destination_uuid: null },
+          { uuid: 'exit-2', destination_uuid: null }
+        ],
+        router: {
+          type: 'switch',
+          result_name: 'Response',
+          categories: [
+            { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
+            { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
+          ]
+        }
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 0, top: 0 },
+        type: 'split_by_groups'
+      };
+
+      // Create node
+      const editorNode: CanvasNode = await fixture(
+        html`<temba-flow-node
+          .node=${mockNode}
+          .ui=${mockUI}
+        ></temba-flow-node>`
+      );
+
+      // Set fromStore properties directly
+      (editorNode as any).isTranslating = true;
+      (editorNode as any).includeCategoriesInTranslation = true;
+      (editorNode as any).languageCode = 'spa';
+
+      await editorNode.requestUpdate();
+      await editorNode.updateComplete;
+
+      // Find the node element
+      const nodeElement = editorNode.querySelector('.node');
+      expect(nodeElement).to.exist;
+
+      // Verify it does NOT have the non-localizable class
+      expect(nodeElement?.classList.contains('non-localizable')).to.be.false;
+    });
+
+    it('does not gray out split nodes when not translating', async () => {
+      const mockNode: Node = {
+        uuid: 'split-node-3',
+        actions: [],
+        exits: [
+          { uuid: 'exit-1', destination_uuid: null },
+          { uuid: 'exit-2', destination_uuid: null }
+        ],
+        router: {
+          type: 'switch',
+          result_name: 'Response',
+          categories: [
+            { uuid: 'cat-1', name: 'Category 1', exit_uuid: 'exit-1' },
+            { uuid: 'cat-2', name: 'Category 2', exit_uuid: 'exit-2' }
+          ]
+        }
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 0, top: 0 },
+        type: 'split_by_groups'
+      };
+
+      // Create node
+      const editorNode: CanvasNode = await fixture(
+        html`<temba-flow-node
+          .node=${mockNode}
+          .ui=${mockUI}
+        ></temba-flow-node>`
+      );
+
+      // Set fromStore properties directly
+      (editorNode as any).isTranslating = false;
+      (editorNode as any).languageCode = 'eng';
+
+      await editorNode.requestUpdate();
+      await editorNode.updateComplete;
+
+      // Find the node element
+      const nodeElement = editorNode.querySelector('.node');
+      expect(nodeElement).to.exist;
+
+      // Verify it does NOT have the non-localizable class
+      expect(nodeElement?.classList.contains('non-localizable')).to.be.false;
+    });
+  });
 });

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

@@ -412,12 +412,12 @@ describe('Editor', () => {
     });
   });
 
-  describe('double-click functionality', () => {
+  describe('canvas menu functionality', () => {
     afterEach(() => {
       restore();
     });
 
-    it('creates sticky note on canvas double-click', async () => {
+    it('has context menu handler set up', async () => {
       editor = await fixture(html`
         <temba-flow-editor>
           <div id="grid">
@@ -436,10 +436,9 @@ describe('Editor', () => {
       const canvas = editor.querySelector('#canvas') as HTMLElement;
       expect(canvas).to.exist;
 
-      // Check that the double-click event listener is set up
-      // We'll test this by checking if the boundCanvasDoubleClick method exists
-      expect((editor as any).boundCanvasDoubleClick).to.exist;
-      expect(typeof (editor as any).boundCanvasDoubleClick).to.equal(
+      // Check that the context menu event listener is set up
+      expect((editor as any).boundCanvasContextMenu).to.exist;
+      expect(typeof (editor as any).boundCanvasContextMenu).to.equal(
         'function'
       );
 
@@ -456,8 +455,8 @@ describe('Editor', () => {
       expect(snapToGrid(-10)).to.equal(0); // Should not go negative
     });
 
-    it('tests double-click handler logic independently', () => {
-      // Test the logic that would be in handleCanvasDoubleClick without the problematic getStore call
+    it('tests context menu handler logic independently', () => {
+      // Test the logic that would be in handleCanvasContextMenu
 
       // Mock event with canvas target
       const canvasTarget = { id: 'canvas' };