@nyaruka/temba-components 0.129.2 → 0.129.4

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

@@ -0,0 +1,563 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { Editor } from '../src/flow/Editor';
+import { Plumber } from '../src/flow/Plumber';
+import { stub, restore } from 'sinon';
+
+// Register the component
+customElements.define('temba-flow-editor', Editor);
+
+describe('Editor', () => {
+  let editor: Editor;
+
+  beforeEach(() => {
+    // Reset any stubs
+    restore();
+  });
+
+  afterEach(() => {
+    restore();
+  });
+
+  describe('basic functionality', () => {
+    it('creates render root as element itself', () => {
+      const editor = new Editor();
+      expect(editor.createRenderRoot()).to.equal(editor);
+    });
+
+    it('has correct CSS styles defined', () => {
+      const styles = Editor.styles;
+      expect(styles).to.exist;
+      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');
+    });
+
+    it('creates with default properties', () => {
+      editor = new Editor();
+      expect(editor.flow).to.be.undefined;
+      expect(editor.version).to.be.undefined;
+    });
+
+    it('accepts flow and version properties without getStore call', async () => {
+      editor = document.createElement('temba-flow-editor') as Editor;
+      editor.flow = 'test-flow-uuid';
+      editor.version = '1.0';
+
+      expect(editor.flow).to.equal('test-flow-uuid');
+      expect(editor.version).to.equal('1.0');
+    });
+  });
+
+  describe('lifecycle methods', () => {
+    it('calls firstUpdated and initializes plumber', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Verify that plumber is initialized
+      expect((editor as any).plumber).to.be.instanceOf(Plumber);
+    });
+
+    it('verifies firstUpdated method exists and can be called', () => {
+      editor = new Editor();
+
+      // Mock canvas element
+      const mockCanvas = document.createElement('div');
+      mockCanvas.id = 'canvas';
+
+      // Mock querySelector to return our mock canvas
+      stub(editor, 'querySelector').returns(mockCanvas);
+
+      // Verify firstUpdated method exists
+      expect(typeof (editor as any).firstUpdated).to.equal('function');
+
+      // Test that calling firstUpdated doesn't throw (without getStore)
+      expect(() => {
+        // Only test the plumber initialization part
+        (editor as any).plumber = new Plumber(mockCanvas);
+      }).to.not.throw();
+    });
+
+    it('handles updated with canvasSize changes', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Simulate canvasSize change
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      const changes = new Map();
+      changes.set('canvasSize', true);
+
+      (editor as any).updated(changes);
+
+      // Verify the canvasSize was set correctly
+      expect((editor as any).canvasSize).to.deep.equal({
+        width: 800,
+        height: 600
+      });
+    });
+
+    it('handles updated without canvasSize changes', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      const consoleStub = stub(console, 'log');
+
+      const changes = new Map();
+      changes.set('other', true);
+
+      (editor as any).updated(changes);
+
+      expect(consoleStub).to.not.have.been.called;
+
+      consoleStub.restore();
+    });
+  });
+
+  describe('render method', () => {
+    it('renders loading when no definition', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Set canvas size to avoid undefined errors
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      await editor.updateComplete;
+
+      const loadingElement = editor.querySelector('temba-loading');
+      expect(loadingElement).to.exist;
+    });
+
+    it('renders nodes when definition exists', async () => {
+      const mockDefinition = {
+        nodes: [
+          {
+            uuid: 'node-1',
+            actions: [],
+            exits: []
+          },
+          {
+            uuid: 'node-2',
+            actions: [],
+            exits: []
+          }
+        ],
+        _ui: {
+          nodes: {
+            'node-1': { position: { left: 100, top: 200 } },
+            'node-2': { position: { left: 300, top: 400 } }
+          }
+        }
+      };
+
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Set properties
+      (editor as any).definition = mockDefinition;
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      await editor.updateComplete;
+
+      const flowNodes = editor.querySelectorAll('temba-flow-node');
+      expect(flowNodes).to.have.length(2);
+    });
+
+    it('includes style elements in light DOM', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Set canvas size
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      await editor.updateComplete;
+
+      const styleElements = editor.querySelectorAll('style');
+      expect(styleElements.length).to.be.greaterThan(0);
+    });
+
+    it('renders with correct grid dimensions', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Set canvas size to specific dimensions
+      (editor as any).canvasSize = { width: 1200, height: 900 };
+      await editor.updateComplete;
+
+      const gridElement = editor.querySelector('#grid');
+      expect(gridElement).to.exist;
+
+      // Check that grid has correct dimensions
+      const gridStyle = gridElement.getAttribute('style');
+      expect(gridStyle).to.contain('width:1200px');
+      expect(gridStyle).to.contain('height:900px');
+    });
+  });
+
+  describe('multi-selection functionality', () => {
+    let mockDefinition: any;
+
+    beforeEach(() => {
+      mockDefinition = {
+        nodes: [
+          {
+            uuid: 'node-1',
+            actions: [],
+            exits: []
+          },
+          {
+            uuid: 'node-2', 
+            actions: [],
+            exits: []
+          }
+        ],
+        _ui: {
+          nodes: {
+            'node-1': { position: { left: 100, top: 200 } },
+            'node-2': { position: { left: 300, top: 400 } }
+          },
+          stickies: {
+            'sticky-1': { 
+              position: { left: 200, top: 100 },
+              title: 'Test Sticky',
+              body: 'Test content',
+              color: 'yellow'
+            }
+          }
+        }
+      };
+    });
+
+    it('initializes with empty selection', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      expect((editor as any).selectedItems.size).to.equal(0);
+      expect((editor as any).isSelecting).to.be.false;
+      expect((editor as any).selectionBox).to.be.null;
+    });
+
+    it('adds visual selection styling to selected items', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Set up mock definition and selection
+      (editor as any).definition = mockDefinition;
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      (editor as any).selectedItems = new Set(['node-1']);
+      await editor.updateComplete;
+
+      const selectedNode = editor.querySelector('temba-flow-node[uuid="node-1"]');
+      expect(selectedNode).to.exist;
+      expect(selectedNode.classList.contains('selected')).to.be.true;
+    });
+
+    it('renders selection box when selecting', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Set up selection state
+      (editor as any).definition = mockDefinition;
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      (editor as any).isSelecting = true;
+      (editor as any).selectionBox = {
+        startX: 50,
+        startY: 50,
+        endX: 150,
+        endY: 150
+      };
+      await editor.updateComplete;
+
+      const selectionBox = editor.querySelector('.selection-box');
+      expect(selectionBox).to.exist;
+      
+      const style = selectionBox.getAttribute('style');
+      expect(style).to.contain('left: 50px');
+      expect(style).to.contain('top: 50px');
+      expect(style).to.contain('width: 100px');
+      expect(style).to.contain('height: 100px');
+    });
+
+    it('does not render selection box when not selecting', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).definition = mockDefinition;
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      (editor as any).isSelecting = false;
+      await editor.updateComplete;
+
+      const selectionBox = editor.querySelector('.selection-box');
+      expect(selectionBox).to.not.exist;
+    });
+
+    it('handles canvas mouse down for selection start', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).definition = mockDefinition;
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      
+      // Pre-select an item
+      (editor as any).selectedItems.add('node-1');
+      await editor.updateComplete;
+
+      const canvas = editor.querySelector('#canvas');
+      const mockEvent = new MouseEvent('mousedown', {
+        clientX: 100,
+        clientY: 100,
+        bubbles: true
+      });
+
+      // Mock getBoundingClientRect for canvas
+      stub(canvas, 'getBoundingClientRect').returns({
+        left: 0,
+        top: 0,
+        width: 800,
+        height: 600
+      } as DOMRect);
+
+      // Set event target to canvas
+      Object.defineProperty(mockEvent, 'target', {
+        value: canvas,
+        writable: false
+      });
+
+      (editor as any).handleCanvasMouseDown(mockEvent);
+
+      // Should clear selection and start selection box
+      expect((editor as any).selectedItems.size).to.equal(0);
+      expect((editor as any).canvasMouseDown).to.be.true;
+      expect((editor as any).selectionBox).to.not.be.null;
+    });
+
+    it('handles keyboard delete key with confirmation', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Mock window.confirm
+      const confirmStub = stub(window, 'confirm');
+      confirmStub.returns(true);
+
+      // Set up selection
+      (editor as any).selectedItems.add('node-1');
+      
+      const mockEvent = new KeyboardEvent('keydown', { key: 'Delete' });
+      (editor as any).handleKeyDown(mockEvent);
+
+      expect(confirmStub).to.have.been.calledWith('Are you sure you want to delete 1 item?');
+      
+      confirmStub.restore();
+    });
+
+    it('handles escape key to clear selection', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Set up selection
+      (editor as any).selectedItems.add('node-1');
+      (editor as any).selectedItems.add('node-2');
+
+      const mockEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+      (editor as any).handleKeyDown(mockEvent);
+
+      expect((editor as any).selectedItems.size).to.equal(0);
+    });
+
+    it('updates selection box coordinates during mouse move', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      const canvas = editor.querySelector('#canvas');
+      
+      // Mock getBoundingClientRect
+      stub(canvas, 'getBoundingClientRect').returns({
+        left: 0,
+        top: 0,
+        width: 800,
+        height: 600
+      } as DOMRect);
+
+      // Set up initial selection state
+      (editor as any).canvasMouseDown = true;
+      (editor as any).selectionBox = {
+        startX: 50,
+        startY: 50,
+        endX: 50,
+        endY: 50
+      };
+      (editor as any).definition = mockDefinition;
+
+      const mockEvent = new MouseEvent('mousemove', {
+        clientX: 150,
+        clientY: 150
+      });
+
+      (editor as any).updateSelectionBox(mockEvent);
+
+      expect((editor as any).selectionBox.endX).to.equal(150);
+      expect((editor as any).selectionBox.endY).to.equal(150);
+    });
+
+    it('calculates intersections correctly for node selection', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).definition = mockDefinition;
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      await editor.updateComplete;
+
+      // Mock node element and its bounding rect
+      const nodeElement = editor.querySelector('temba-flow-node[uuid="node-1"]');
+      stub(nodeElement, 'getBoundingClientRect').returns({
+        width: 200,
+        height: 100
+      } as DOMRect);
+
+      // Set selection box that intersects with node-1 (position: left: 100, top: 200)
+      (editor as any).selectionBox = {
+        startX: 50,   // Selection box from 50,150 to 250,250
+        startY: 150,  // This should intersect node-1 at 100,200 with size 200x100
+        endX: 250,
+        endY: 250
+      };
+
+      (editor as any).updateSelectedItemsFromBox();
+
+      expect((editor as any).selectedItems.has('node-1')).to.be.true;
+    });
+  });
+
+  describe('canvas initialization', () => {
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      (editor as any).canvasSize = { width: 800, height: 600 };
+      await editor.updateComplete;
+
+      const editorElement = editor.querySelector('#editor');
+      expect(editorElement).to.exist;
+
+      const gridElement = editor.querySelector('#grid');
+      expect(gridElement).to.exist;
+
+      const canvasElement = editor.querySelector('#canvas');
+      expect(canvasElement).to.exist;
+    });
+  });
+
+  describe('property handling', () => {
+    it('handles flow property change', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      // Change flow property
+      editor.flow = 'new-flow-uuid';
+      await editor.updateComplete;
+
+      expect(editor.flow).to.equal('new-flow-uuid');
+    });
+
+    it('handles version property change', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      editor.version = '2.0';
+      await editor.updateComplete;
+
+      expect(editor.version).to.equal('2.0');
+    });
+  });
+
+  describe('store integration', () => {
+    it('has fromStore decorators for definition and canvasSize', () => {
+      editor = new Editor();
+
+      // Check that the properties exist (they are private but we can verify they exist)
+      expect(editor).to.have.property('definition');
+      expect(editor).to.have.property('canvasSize');
+    });
+  });
+
+  describe('constructor behavior', () => {
+    it('calls super in constructor', () => {
+      // This mainly verifies the constructor doesn't throw
+      expect(() => {
+        new Editor();
+      }).to.not.throw();
+    });
+  });
+
+  describe('canvas initialization', () => {
+    it('initializes plumber with canvas element', async () => {
+      editor = await fixture(html`
+        <temba-flow-editor>
+          <div id="canvas"></div>
+        </temba-flow-editor>
+      `);
+
+      const plumber = (editor as any).plumber;
+      expect(plumber).to.be.instanceOf(Plumber);
+    });
+
+    it('handles missing canvas element gracefully', async () => {
+      editor = await fixture(html`<temba-flow-editor></temba-flow-editor>`);
+
+      // Should not throw even without canvas
+      expect((editor as any).plumber).to.be.instanceOf(Plumber);
+    });
+  });
+});

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

@@ -0,0 +1,142 @@
+import { expect } from '@open-wc/testing';
+import { stub, useFakeTimers, SinonFakeTimers } from 'sinon';
+import { Plumber } from '../src/flow/Plumber';
+
+describe('Plumber - Connection Management', () => {
+  let plumber: Plumber;
+  let mockCanvas: HTMLElement;
+  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);
+
+    // Create a new plumber instance
+    plumber = new Plumber(mockCanvas);
+
+    // 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({}),
+      connect: stub(),
+      selectEndpoints: stub().returns({
+        deleteAll: stub()
+      }),
+      deleteConnection: stub(),
+      removeAllEndpoints: stub(),
+      repaintEverything: stub()
+    };
+  });
+
+  afterEach(() => {
+    // Restore the original document.getElementById
+    (document.getElementById as any).restore?.();
+    clock.restore();
+  });
+
+  describe('setConnectionRemovingState', () => {
+    it('returns false when no connections are found', () => {
+      const result = plumber.setConnectionRemovingState('test-exit', 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() }
+      ];
+
+      (plumber as any).jsPlumb.getConnections = stub().returns(mockConnections);
+
+      const result = plumber.setConnectionRemovingState('test-exit', true);
+      expect(result).to.be.true;
+      expect(mockConnections[0].addClass).to.have.been.calledWith('removing');
+      expect(mockConnections[1].addClass).to.have.been.calledWith('removing');
+    });
+
+    it('removes removing class from connections when isRemoving is false', () => {
+      const mockConnections = [
+        { id: 'conn1', removeClass: stub() },
+        { id: 'conn2', removeClass: stub() }
+      ];
+
+      (plumber as any).jsPlumb.getConnections = stub().returns(mockConnections);
+
+      const result = plumber.setConnectionRemovingState('test-exit', false);
+      expect(result).to.be.true;
+      expect(mockConnections[0].removeClass).to.have.been.calledWith(
+        'removing'
+      );
+      expect(mockConnections[1].removeClass).to.have.been.calledWith(
+        'removing'
+      );
+    });
+  });
+
+  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);
+
+      // 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;
+
+      // Clean up
+      clearTimeoutSpy.restore();
+      setTimeoutSpy.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;
+      expect((plumber as any).jsPlumb.removeAllEndpoints).to.have.been.called;
+    });
+
+    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;
+    });
+  });
+});