@nyaruka/temba-components 0.138.6 → 0.140.0

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

@@ -30,8 +30,6 @@ describe('Editor', () => {
       expect(styles.cssText).to.contain('#editor');
       expect(styles.cssText).to.contain('#grid');
       expect(styles.cssText).to.contain('#canvas');
-      expect(styles.cssText).to.contain('.plumb-source');
-      expect(styles.cssText).to.contain('.plumb-target');
       expect(styles.cssText).to.contain('.plumb-connector');
     });
 

package/test/temba-flow-plumber-connections.test.ts

@@ -8,144 +8,144 @@ describe('Plumber - Connection Management', () => {
   let clock: SinonFakeTimers;
 
   beforeEach(() => {
-    // Use fake timers to control setTimeout
     clock = useFakeTimers();
 
-    // Create mock canvas and make getElementById return a mock element
     mockCanvas = document.createElement('div');
-    const mockElement = document.createElement('div');
-    stub(document, 'getElementById').returns(mockElement);
+    mockCanvas.id = 'canvas';
+    document.body.appendChild(mockCanvas);
 
-    // Create a mock editor with fireCustomEvent
     const mockEditor = { fireCustomEvent: stub() };
-
-    // Create a new plumber instance
     plumber = new Plumber(mockCanvas, mockEditor);
-
-    // Replace the internal jsPlumb instance with mocks
-    (plumber as any).jsPlumb = {
-      getConnections: stub().returns([]),
-      addClass: stub(),
-      removeClass: stub(),
-      batch: stub().callsFake((fn: any) => fn()),
-      addEndpoint: stub().returns({}),
-      revalidate: stub(),
-      connect: stub(),
-      getEndpoints: stub().returns([
-        { elementId: 'test-from', addClass: stub() }
-      ]),
-      select: stub().returns({
-        deleteAll: stub()
-      }),
-      selectEndpoints: stub().returns({
-        deleteAll: stub()
-      }),
-      deleteConnection: stub(),
-      removeAllEndpoints: stub(),
-      repaintEverything: stub()
-    };
   });
 
   afterEach(() => {
-    // Restore the original document.getElementById
-    (document.getElementById as any).restore?.();
+    mockCanvas.remove();
     clock.restore();
   });
 
   describe('setConnectionRemovingState', () => {
-    it('returns false when no connections are found', () => {
-      const result = plumber.setConnectionRemovingState('test-exit', true);
+    it('returns false when no connection exists for the exit', () => {
+      const result = plumber.setConnectionRemovingState('nonexistent', true);
       expect(result).to.be.false;
-      expect((plumber as any).jsPlumb.getConnections).to.have.been.called;
     });
 
-    it('sets removing class on connections when isRemoving is true', () => {
-      const mockConnections = [
-        { id: 'conn1', addClass: stub() },
-        { id: 'conn2', addClass: stub() }
-      ];
+    it('adds removing class when isRemoving is true', () => {
+      // Create mock elements for a connection
+      const exitEl = document.createElement('div');
+      exitEl.id = 'exit-1';
+      const targetEl = document.createElement('div');
+      targetEl.id = 'target-1';
+      mockCanvas.appendChild(exitEl);
+      mockCanvas.appendChild(targetEl);
 
-      (plumber as any).jsPlumb.getConnections = stub().returns(mockConnections);
+      // Create a connection
+      plumber.connectIds('node-1', 'exit-1', 'target-1');
+      clock.tick(16);
 
-      const result = plumber.setConnectionRemovingState('test-exit', true);
+      const result = plumber.setConnectionRemovingState('exit-1', true);
       expect(result).to.be.true;
-      expect(mockConnections[0].addClass).to.have.been.calledWith('removing');
-      expect(mockConnections[1].addClass).to.have.been.calledWith('removing');
+
+      const conn = (plumber as any).connections.get('exit-1');
+      expect(conn.svgEl.classList.contains('removing')).to.be.true;
+
+      exitEl.remove();
+      targetEl.remove();
     });
 
-    it('removes removing class from connections when isRemoving is false', () => {
-      const mockConnections = [
-        { id: 'conn1', removeClass: stub() },
-        { id: 'conn2', removeClass: stub() }
-      ];
+    it('removes removing class when isRemoving is false', () => {
+      const exitEl = document.createElement('div');
+      exitEl.id = 'exit-2';
+      const targetEl = document.createElement('div');
+      targetEl.id = 'target-2';
+      mockCanvas.appendChild(exitEl);
+      mockCanvas.appendChild(targetEl);
 
-      (plumber as any).jsPlumb.getConnections = stub().returns(mockConnections);
+      plumber.connectIds('node-1', 'exit-2', 'target-2');
+      clock.tick(16);
 
-      const result = plumber.setConnectionRemovingState('test-exit', false);
+      plumber.setConnectionRemovingState('exit-2', true);
+      plumber.setConnectionRemovingState('exit-2', false);
+
+      const conn = (plumber as any).connections.get('exit-2');
+      expect(conn.svgEl.classList.contains('removing')).to.be.false;
+
+      exitEl.remove();
+      targetEl.remove();
+    });
+  });
+
+  describe('removeExitConnection', () => {
+    it('removes a connection for an exit', () => {
+      const exitEl = document.createElement('div');
+      exitEl.id = 'exit-3';
+      const targetEl = document.createElement('div');
+      targetEl.id = 'target-3';
+      mockCanvas.appendChild(exitEl);
+      mockCanvas.appendChild(targetEl);
+
+      plumber.connectIds('node-1', 'exit-3', 'target-3');
+      clock.tick(16);
+
+      expect((plumber as any).connections.has('exit-3')).to.be.true;
+
+      const result = plumber.removeExitConnection('exit-3');
       expect(result).to.be.true;
-      expect(mockConnections[0].removeClass).to.have.been.calledWith(
-        'removing'
-      );
-      expect(mockConnections[1].removeClass).to.have.been.calledWith(
-        'removing'
-      );
+      expect((plumber as any).connections.has('exit-3')).to.be.false;
+
+      exitEl.remove();
+      targetEl.remove();
+    });
+
+    it('returns false when no connection exists', () => {
+      const result = plumber.removeExitConnection('nonexistent');
+      expect(result).to.be.false;
     });
   });
 
   describe('connectIds and processPendingConnections', () => {
     it('adds connection to pending connections', () => {
-      // Call connectIds which should add to pending connections
       plumber.connectIds('test-node', 'test-from', 'test-to');
-
-      // Verify pendingConnections has the new connection
       expect((plumber as any).pendingConnections.length).to.equal(1);
-
-      // Advance timer to trigger the timeout
-      clock.tick(51); // Just past the 50ms timeout
-
-      // Now the batch should have been called
-      expect((plumber as any).jsPlumb.batch).to.have.been.called;
-      expect((plumber as any).jsPlumb.addEndpoint).to.have.been.called;
-      expect((plumber as any).jsPlumb.connect).to.have.been.called;
     });
 
-    it('clears previous timeout when called multiple times', () => {
-      // Set up spies for window.setTimeout and window.clearTimeout instead of global
-      const clearTimeoutSpy = stub(window, 'clearTimeout');
-      const setTimeoutSpy = stub(window, 'setTimeout').returns(123 as any);
+    it('clears previous rAF when called multiple times', () => {
+      const cancelSpy = stub(window, 'cancelAnimationFrame');
+      const rafSpy = stub(window, 'requestAnimationFrame').returns(123 as any);
 
-      // Call twice
       plumber.processPendingConnections();
       plumber.processPendingConnections();
 
-      // Should have called clearTimeout once and setTimeout twice
-      expect(clearTimeoutSpy).to.have.been.calledOnce;
-      expect(setTimeoutSpy).to.have.been.calledTwice;
+      expect(cancelSpy).to.have.been.calledOnce;
+      expect(rafSpy).to.have.been.calledTwice;
 
-      // Clean up
-      clearTimeoutSpy.restore();
-      setTimeoutSpy.restore();
+      cancelSpy.restore();
+      rafSpy.restore();
     });
   });
 
-  describe('removeExitConnection', () => {
-    it('removes connections for an exit', () => {
-      const mockConnections = [{ id: 'conn1' }, { id: 'conn2' }];
-      (plumber as any).jsPlumb.getConnections = stub().returns(mockConnections);
-
-      const result = plumber.removeExitConnection('test-exit');
-
-      expect(result).to.be.true;
-      expect((plumber as any).jsPlumb.deleteConnection).to.have.been
-        .calledTwice;
-    });
-
-    it('returns false when no connections exist', () => {
-      (plumber as any).jsPlumb.getConnections = stub().returns([]);
-
-      const result = plumber.removeExitConnection('test-exit');
-
-      expect(result).to.be.false;
+  describe('removeNodeConnections', () => {
+    it('removes inbound and outbound connections for a node', () => {
+      const exitEl = document.createElement('div');
+      exitEl.id = 'exit-4';
+      exitEl.classList.add('exit');
+      const nodeEl = document.createElement('div');
+      nodeEl.id = 'node-1';
+      nodeEl.appendChild(exitEl);
+      const targetEl = document.createElement('div');
+      targetEl.id = 'target-4';
+      mockCanvas.appendChild(nodeEl);
+      mockCanvas.appendChild(targetEl);
+
+      plumber.connectIds('node-1', 'exit-4', 'target-4');
+      clock.tick(16);
+
+      expect((plumber as any).connections.size).to.equal(1);
+
+      plumber.removeNodeConnections('node-1', ['exit-4']);
+      expect((plumber as any).connections.size).to.equal(0);
+
+      nodeEl.remove();
+      targetEl.remove();
     });
   });
 });

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

@@ -1,60 +1,30 @@
 import { expect } from '@open-wc/testing';
-import { Plumber, SOURCE_DEFAULTS, TARGET_DEFAULTS } from '../src/flow/Plumber';
+import { Plumber, calculateFlowchartPath } from '../src/flow/Plumber';
 import { stub, useFakeTimers, SinonFakeTimers } from 'sinon';
 
 describe('Plumber', () => {
   let plumber: Plumber;
-  let mockJsPlumb: any;
   let mockCanvas: HTMLElement;
   let clock: SinonFakeTimers;
+  let mockElement: HTMLElement;
 
   beforeEach(() => {
-    // Use fake timers to control setTimeout
     clock = useFakeTimers();
 
-    // Create mock canvas and make getElementById return a mock element
     mockCanvas = document.createElement('div');
-    const mockElement = document.createElement('div');
-    stub(document, 'getElementById').returns(mockElement);
+    mockCanvas.id = 'canvas';
+    document.body.appendChild(mockCanvas);
 
-    // Create a mock editor with fireCustomEvent
-    const mockEditor = { fireCustomEvent: stub() };
+    mockElement = document.createElement('div');
+    mockElement.id = 'test-exit';
+    mockCanvas.appendChild(mockElement);
 
-    // Create a new plumber instance
+    const mockEditor = { fireCustomEvent: stub() };
     plumber = new Plumber(mockCanvas, mockEditor);
-
-    // Replace the internal jsPlumb instance with mocks
-    mockJsPlumb = {
-      getConnections: stub().returns([]),
-      addClass: stub(),
-      removeClass: stub(),
-      batch: stub().callsFake((fn) => fn()),
-      addEndpoint: stub().returns({}),
-      connect: stub(),
-      getEndpoints: stub().returns([
-        { elementId: 'test-from', addClass: stub() }
-      ]),
-      select: stub().returns({
-        deleteAll: stub()
-      }),
-      selectEndpoints: stub().returns({
-        deleteAll: stub()
-      }),
-      deleteConnection: stub(),
-      removeAllEndpoints: stub(),
-      repaintEverything: stub(),
-      revalidate: stub(),
-      bind: stub()
-    };
-
-    (plumber as any).jsPlumb = mockJsPlumb;
-    // Reset the connectionWait to avoid timing issues
-    (plumber as any).connectionWait = null;
   });
 
   afterEach(() => {
-    // Restore the original document.getElementById
-    (document.getElementById as any).restore?.();
+    mockCanvas.remove();
     clock.restore();
   });
 
@@ -64,98 +34,141 @@ describe('Plumber', () => {
     });
   });
 
-  describe('makeTarget', () => {
-    it('creates a target endpoint for the specified element', () => {
-      plumber.makeTarget('test-target');
-      expect(mockJsPlumb.addEndpoint).to.have.been.called;
+  describe('makeSource', () => {
+    it('registers a mousedown listener on the exit element', () => {
+      const exitEl = document.createElement('div');
+      exitEl.id = 'exit-1';
+      mockCanvas.appendChild(exitEl);
+
+      plumber.makeSource('exit-1');
+
+      // Source should be tracked
+      expect((plumber as any).sources.has('exit-1')).to.be.true;
+
+      exitEl.remove();
+    });
+
+    it('cleans up previous listener when called again', () => {
+      const exitEl = document.createElement('div');
+      exitEl.id = 'exit-2';
+      mockCanvas.appendChild(exitEl);
+
+      plumber.makeSource('exit-2');
+      plumber.makeSource('exit-2');
+
+      expect((plumber as any).sources.has('exit-2')).to.be.true;
+
+      exitEl.remove();
     });
   });
 
-  describe('makeSource', () => {
-    it('creates a source endpoint for the specified element', () => {
-      plumber.makeSource('test-source');
-      expect(mockJsPlumb.addEndpoint).to.have.been.called;
+  describe('makeTarget', () => {
+    it('is a no-op', () => {
+      // Should not throw
+      plumber.makeTarget('test-node');
     });
   });
 
   describe('connectIds', () => {
     it('adds connection to pending connections and processes them', () => {
       plumber.connectIds('test-node', 'test-from', 'test-to');
-
-      // Verify pendingConnections has the new connection
       expect((plumber as any).pendingConnections.length).to.equal(1);
-
-      // Advance timer to trigger the timeout
-      clock.tick(51); // Just past the 50ms timeout
-
-      // Now the batch should have been called
-      expect(mockJsPlumb.batch).to.have.been.called;
     });
   });
 
   describe('processPendingConnections', () => {
-    it('processes pending connections with timeout', () => {
-      // Add a connection to pending connections
-      plumber.connectIds('test-node', 'test-from', 'test-to');
-
-      // Fast-forward clock past the timeout
-      clock.tick(51); // Just past the 50ms timeout
+    it('clears existing rAF when called multiple times', () => {
+      const cancelSpy = stub(window, 'cancelAnimationFrame');
+      const rafSpy = stub(window, 'requestAnimationFrame').returns(123 as any);
 
-      expect(mockJsPlumb.batch).to.have.been.called;
-    });
+      plumber.processPendingConnections();
+      plumber.processPendingConnections();
 
-    it('creates endpoints and connections for pending connections', () => {
-      plumber.connectIds('test-node', 'test-from', 'test-to');
+      expect(cancelSpy).to.have.been.calledOnce;
+      expect(rafSpy).to.have.been.calledTwice;
 
-      // Fast-forward clock past the timeout
-      clock.tick(51); // Just past the 50ms timeout
+      cancelSpy.restore();
+      rafSpy.restore();
+    });
+  });
 
-      expect(mockJsPlumb.addEndpoint).to.have.been.called;
-      expect(mockJsPlumb.connect).to.have.been.called;
+  describe('event system', () => {
+    it('supports on/off/notify pattern', () => {
+      let received = null;
+      const handler = (info: any) => {
+        received = info;
+      };
+
+      plumber.on('test-event', handler);
+      (plumber as any).notifyListeners('test-event', { data: 'test' });
+      expect(received).to.deep.equal({ data: 'test' });
+
+      received = null;
+      plumber.off('test-event', handler);
+      (plumber as any).notifyListeners('test-event', { data: 'test2' });
+      expect(received).to.be.null;
     });
+  });
 
-    it('clears existing timeout when called multiple times', () => {
-      // Set up spies for window.setTimeout and window.clearTimeout
-      const clearTimeoutSpy = stub(window, 'clearTimeout');
-      const setTimeoutSpy = stub(window, 'setTimeout').returns(123 as any);
+  describe('reset', () => {
+    it('clears all state', () => {
+      plumber.connectIds('test-node', 'test-from', 'test-to');
+      plumber.reset();
 
-      // Call twice
-      plumber.processPendingConnections();
-      plumber.processPendingConnections();
+      expect((plumber as any).pendingConnections.length).to.equal(0);
+      expect((plumber as any).connections.size).to.equal(0);
+      expect((plumber as any).sources.size).to.equal(0);
+    });
+  });
+});
 
-      // Should have called clearTimeout once and setTimeout twice
-      expect(clearTimeoutSpy).to.have.been.calledOnce;
-      expect(setTimeoutSpy).to.have.been.calledTwice;
+describe('calculateFlowchartPath', () => {
+  it('generates a straight vertical path when source and target are aligned', () => {
+    const path = calculateFlowchartPath(100, 0, 100, 100);
+    expect(path).to.include('M 100 0');
+    expect(path).to.include('L 100 100');
+    // Should not contain Q (quadratic curve) for aligned points
+    expect(path).to.not.include('Q');
+  });
 
-      // Clean up
-      clearTimeoutSpy.restore();
-      setTimeoutSpy.restore();
-    });
+  it('generates a path with corners when source and target are offset', () => {
+    const path = calculateFlowchartPath(50, 0, 150, 200);
+    expect(path).to.include('M 50 0');
+    expect(path).to.include('Q'); // Should have rounded corners
+    expect(path).to.include('L 150 200');
+  });
 
-    it('handles empty pending connections', () => {
-      // Call without adding any connections
-      plumber.processPendingConnections();
+  it('handles custom stub and corner radius', () => {
+    const path = calculateFlowchartPath(0, 0, 100, 100, 30, 15, 10);
+    expect(path).to.include('M 0 0');
+    expect(path).to.include('L 100 100');
+  });
 
-      // Fast-forward clock past the timeout
-      clock.tick(51); // Just past the 50ms timeout
+  it('handles cases where vertical space is tight by using reduced-radius corners', () => {
+    // With stubs of 20+10=30, and only 35 total vertical space, there's only 5px for corners
+    const path = calculateFlowchartPath(50, 0, 150, 35);
+    expect(path).to.include('M 50 0');
+    // Should still use rounded corners (L-shape with curves)
+    expect(path).to.include('Q');
+  });
 
-      expect(mockJsPlumb.batch).to.have.been.called;
-    });
+  it('enforces midY is always below source exit for top face', () => {
+    // Target above source — midY should not go above sourceY + stubStart
+    const path = calculateFlowchartPath(50, 100, 150, 50);
+    expect(path).to.include('M 50 100');
+    // Should still exit downward with a curve at exitY (120)
+    expect(path).to.include('Q');
   });
 
-  describe('constants', () => {
-    it('has correct properties in SOURCE_DEFAULTS', () => {
-      expect(SOURCE_DEFAULTS).to.have.property('endpoint');
-      expect(SOURCE_DEFAULTS).to.have.property('anchors');
-      expect(SOURCE_DEFAULTS).to.have.property('maxConnections');
-      expect(SOURCE_DEFAULTS).to.have.property('source');
-    });
+  it('generates a path entering from the left face', () => {
+    const path = calculateFlowchartPath(50, 0, 150, 100, 20, 10, 5, 'left');
+    expect(path).to.include('M 50 0');
+    expect(path).to.include('L 150 100'); // ends at target
+  });
 
-    it('has correct properties in TARGET_DEFAULTS', () => {
-      expect(TARGET_DEFAULTS).to.have.property('endpoint');
-      expect(TARGET_DEFAULTS).to.have.property('anchor');
-      expect(TARGET_DEFAULTS).to.have.property('maxConnections');
-      expect(TARGET_DEFAULTS).to.have.property('target');
-    });
+  it('generates a path entering from the right face', () => {
+    const path = calculateFlowchartPath(150, 0, 50, 100, 20, 10, 5, 'right');
+    expect(path).to.include('M 150 0');
+    expect(path).to.include('L 50 100'); // ends at target
   });
 });

package/test/temba-node-type-selector.test.ts

@@ -163,9 +163,9 @@ describe('temba-node-type-selector', () => {
       item.textContent?.trim()
     );
 
-    // voice flow should have Say Message and Play Audio
+    // voice flow should have Say Message and Play Recording
     expect(titles).to.include('Say Message');
-    expect(titles).to.include('Play Audio');
+    expect(titles).to.include('Play Recording');
   });
 
   it('filters actions by flow type - message flow should not show voice-only actions', async () => {
@@ -181,9 +181,9 @@ describe('temba-node-type-selector', () => {
       item.textContent?.trim()
     );
 
-    // message flow should not have Say Message or Play Audio
+    // message flow should not have Say Message or Play Recording
     expect(titles).to.not.include('Say Message');
-    expect(titles).to.not.include('Play Audio');
+    expect(titles).to.not.include('Play Recording');
   });
 
   it('filters splits by flow type - message flow should show wait for response', async () => {
@@ -219,9 +219,9 @@ describe('temba-node-type-selector', () => {
     // voice flow should not have Wait for Response
     expect(titles).to.not.include('Wait for Response');
 
-    // but should have Wait for Digits and Wait for Menu Selection
+    // but should have Wait for Digits and Wait for Menu
     expect(titles).to.include('Wait for Digits');
-    expect(titles).to.include('Wait for Menu Selection');
+    expect(titles).to.include('Wait for Menu');
   });
 
   it('filters by features - AI feature enables AI splits', async () => {