@nyaruka/temba-components 0.129.2 → 0.129.4

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

@@ -1,41 +1,52 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { expect } from '@open-wc/testing';
 import { Plumber, SOURCE_DEFAULTS, TARGET_DEFAULTS } from '../src/flow/Plumber';
-import { stub, restore } from 'sinon';
+import { stub, useFakeTimers, SinonFakeTimers } from 'sinon';
 
 describe('Plumber', () => {
   let plumber: Plumber;
   let mockJsPlumb: any;
-  let container: HTMLElement;
-
-  beforeEach(async () => {
-    // Create a container with mock elements
-    container = await fixture(html`
-      <div>
-        <div id="test-canvas"></div>
-        <div id="test-source">Source Element</div>
-        <div id="test-target">Target Element</div>
-        <div id="test-from">From Element</div>
-        <div id="test-to">To Element</div>
-      </div>
-    `);
-
-    const canvas = container.querySelector('#test-canvas') as HTMLElement;
-
-    // Mock jsPlumb functionality
+  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
     mockJsPlumb = {
-      addEndpoint: stub().returns({ uuid: 'mock-endpoint' }),
+      getConnections: stub().returns([]),
+      addClass: stub(),
+      removeClass: stub(),
+      batch: stub().callsFake((fn) => fn()),
+      addEndpoint: stub().returns({}),
       connect: stub(),
-      batch: stub().callsFake((fn: () => void) => fn())
+      selectEndpoints: stub().returns({
+        deleteAll: stub()
+      }),
+      deleteConnection: stub(),
+      removeAllEndpoints: stub(),
+      repaintEverything: stub(),
+      revalidate: stub(),
+      bind: stub()
     };
 
-    // Create plumber instance and replace jsPlumb
-    plumber = new Plumber(canvas);
-    // Access private property for testing
     (plumber as any).jsPlumb = mockJsPlumb;
+    // Reset the connectionWait to avoid timing issues
+    (plumber as any).connectionWait = null;
   });
 
   afterEach(() => {
-    restore();
+    // Restore the original document.getElementById
+    (document.getElementById as any).restore?.();
+    clock.restore();
   });
 
   describe('constructor', () => {
@@ -47,143 +58,95 @@ describe('Plumber', () => {
   describe('makeTarget', () => {
     it('creates a target endpoint for the specified element', () => {
       plumber.makeTarget('test-target');
-
-      expect(mockJsPlumb.addEndpoint).to.have.been.calledWith(
-        container.querySelector('#test-target'),
-        TARGET_DEFAULTS
-      );
-    });
-
-    it('handles non-existent elements gracefully', () => {
-      plumber.makeTarget('non-existent');
-
-      expect(mockJsPlumb.addEndpoint).to.have.been.calledWith(
-        null,
-        TARGET_DEFAULTS
-      );
+      expect(mockJsPlumb.addEndpoint).to.have.been.called;
     });
   });
 
   describe('makeSource', () => {
     it('creates a source endpoint for the specified element', () => {
       plumber.makeSource('test-source');
-
-      expect(mockJsPlumb.addEndpoint).to.have.been.calledWith(
-        container.querySelector('#test-source'),
-        SOURCE_DEFAULTS
-      );
-    });
-
-    it('handles non-existent elements gracefully', () => {
-      plumber.makeSource('non-existent');
-
-      expect(mockJsPlumb.addEndpoint).to.have.been.calledWith(
-        null,
-        SOURCE_DEFAULTS
-      );
+      expect(mockJsPlumb.addEndpoint).to.have.been.called;
     });
   });
 
   describe('connectIds', () => {
     it('adds connection to pending connections and processes them', () => {
-      plumber.connectIds('test-from', 'test-to');
+      plumber.connectIds('test-node', 'test-from', 'test-to');
+
+      // Verify pendingConnections has the new connection
+      expect((plumber as any).pendingConnections.length).to.equal(1);
 
-      // Verify that the method doesn't throw and plumber exists
-      expect(plumber).to.exist;
+      // 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', (done) => {
+    it('processes pending connections with timeout', () => {
       // Add a connection to pending connections
-      plumber.connectIds('test-from', 'test-to');
+      plumber.connectIds('test-node', 'test-from', 'test-to');
+
+      // Fast-forward clock past the timeout
+      clock.tick(51); // Just past the 50ms timeout
 
-      // Wait for the debounced timeout
-      setTimeout(() => {
-        expect(mockJsPlumb.batch).to.have.been.called;
-        done();
-      }, 60); // Wait longer than the 50ms timeout
+      expect(mockJsPlumb.batch).to.have.been.called;
     });
 
-    it('creates endpoints and connections for pending connections', (done) => {
-      plumber.connectIds('test-from', 'test-to');
+    it('creates endpoints and connections for pending connections', () => {
+      plumber.connectIds('test-node', 'test-from', 'test-to');
+
+      // Fast-forward clock past the timeout
+      clock.tick(51); // Just past the 50ms timeout
 
-      setTimeout(() => {
-        expect(mockJsPlumb.addEndpoint).to.have.been.called;
-        expect(mockJsPlumb.connect).to.have.been.called;
-        done();
-      }, 60);
+      expect(mockJsPlumb.addEndpoint).to.have.been.called;
+      expect(mockJsPlumb.connect).to.have.been.called;
     });
 
     it('clears existing timeout when called multiple times', () => {
-      // Call processPendingConnections directly
+      // Set up spies for window.setTimeout and window.clearTimeout
+      const clearTimeoutSpy = stub(window, 'clearTimeout');
+      const setTimeoutSpy = stub(window, 'setTimeout').returns(123 as any);
+
+      // Call twice
       plumber.processPendingConnections();
       plumber.processPendingConnections();
 
-      // This mainly tests that no errors are thrown
-      expect(plumber).to.exist;
+      // 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();
     });
 
-    it('handles empty pending connections', (done) => {
+    it('handles empty pending connections', () => {
       // Call without adding any connections
       plumber.processPendingConnections();
 
-      setTimeout(() => {
-        expect(mockJsPlumb.batch).to.have.been.called;
-        done();
-      }, 60);
+      // Fast-forward clock past the timeout
+      clock.tick(51); // Just past the 50ms timeout
+
+      expect(mockJsPlumb.batch).to.have.been.called;
     });
   });
 
   describe('constants', () => {
-    it('exports SOURCE_DEFAULTS with correct structure', () => {
+    it('has correct properties in SOURCE_DEFAULTS', () => {
       expect(SOURCE_DEFAULTS).to.have.property('endpoint');
-      expect(SOURCE_DEFAULTS.endpoint).to.have.property('type');
-      expect(SOURCE_DEFAULTS.endpoint).to.have.property('options');
       expect(SOURCE_DEFAULTS).to.have.property('anchors');
-      expect(SOURCE_DEFAULTS).to.have.property('maxConnections', 1);
-      expect(SOURCE_DEFAULTS).to.have.property('isSource', true);
-      expect(SOURCE_DEFAULTS).to.have.property('dragAllowedWhenFull', false);
-      expect(SOURCE_DEFAULTS).to.have.property('deleteEndpointsOnEmpty', true);
+      expect(SOURCE_DEFAULTS).to.have.property('maxConnections');
+      expect(SOURCE_DEFAULTS).to.have.property('source');
     });
 
-    it('exports TARGET_DEFAULTS with correct structure', () => {
+    it('has correct properties in TARGET_DEFAULTS', () => {
       expect(TARGET_DEFAULTS).to.have.property('endpoint');
-      expect(TARGET_DEFAULTS.endpoint).to.have.property('type');
-      expect(TARGET_DEFAULTS.endpoint).to.have.property('options');
       expect(TARGET_DEFAULTS).to.have.property('anchor');
-      expect(TARGET_DEFAULTS).to.have.property('isTarget', true);
-      expect(TARGET_DEFAULTS).to.have.property('dragAllowedWhenFull', false);
-      expect(TARGET_DEFAULTS).to.have.property('deleteEndpointsOnEmpty', true);
-    });
-
-    it('has correct SOURCE_DEFAULTS endpoint options', () => {
-      const options = SOURCE_DEFAULTS.endpoint.options;
-      expect(options).to.have.property('radius', 6);
-      expect(options).to.have.property('cssClass', 'plumb-source');
-      expect(options).to.have.property('hoverClass', 'plumb-source-hover');
-      expect(options).to.have.property('connectedClass', 'plumb-connected');
-    });
-
-    it('has correct TARGET_DEFAULTS endpoint options', () => {
-      const options = TARGET_DEFAULTS.endpoint.options;
-      expect(options).to.have.property('width', 23);
-      expect(options).to.have.property('height', 23);
-      expect(options).to.have.property('cssClass', 'plumb-target');
-      expect(options).to.have.property('hoverClass', 'plumb-target-hover');
-    });
-
-    it('has correct TARGET_DEFAULTS anchor options', () => {
-      const anchor = TARGET_DEFAULTS.anchor;
-      expect(anchor).to.have.property('type', 'Continuous');
-      expect(anchor.options).to.have.property('faces');
-      expect(anchor.options.faces).to.include('top');
-      expect(anchor.options.faces).to.include('left');
-      expect(anchor.options.faces).to.include('right');
-      expect(anchor.options).to.have.property(
-        'cssClass',
-        'continuos plumb-target-anchor'
-      );
+      expect(TARGET_DEFAULTS).to.have.property('maxConnections');
+      expect(TARGET_DEFAULTS).to.have.property('target');
     });
   });
 });

package/test/temba-flow-self-routing.test.ts

@@ -0,0 +1,215 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { stub, restore, useFakeTimers, SinonFakeTimers } from 'sinon';
+import { Editor } from '../src/flow/Editor';
+import { FlowDefinition } from '../src/store/flow-definition';
+
+// Register the component
+customElements.define('temba-flow-editor-test', Editor);
+
+describe('Flow Editor Self-Routing Prevention', () => {
+  let editor: Editor;
+  let mockDefinition: FlowDefinition;
+  let clock: SinonFakeTimers;
+
+  beforeEach(() => {
+    restore();
+
+    // Use fake timers to control any async operations
+    clock = useFakeTimers({
+      shouldAdvanceTime: true,
+      advanceTimeDelta: 10
+    });
+
+    // Create a mock flow definition with test nodes and exits
+    mockDefinition = {
+      uuid: 'test-flow',
+      name: 'Test Flow',
+      nodes: [
+        {
+          uuid: 'node-1',
+          actions: [],
+          exits: [
+            { uuid: 'exit-1a', destination_uuid: undefined },
+            { uuid: 'exit-1b', destination_uuid: 'node-2' }
+          ]
+        },
+        {
+          uuid: 'node-2',
+          actions: [],
+          exits: [{ uuid: 'exit-2a', destination_uuid: undefined }]
+        }
+      ],
+      localization: {},
+      language: 'eng',
+      type: 'messaging',
+      revision: 1,
+      spec_version: '13.1.0',
+      _ui: {
+        nodes: {
+          'node-1': { position: { left: 100, top: 100 } },
+          'node-2': { position: { left: 300, top: 100 } }
+        },
+        languages: []
+      }
+    };
+  });
+
+  afterEach(() => {
+    restore();
+    if (clock) {
+      clock.restore();
+    }
+  });
+
+  describe('connection dragging behavior', () => {
+    let mockPlumber: any;
+
+    beforeEach(async () => {
+      editor = (await fixture(
+        html`<temba-flow-editor-test></temba-flow-editor-test>`
+      )) as Editor;
+
+      // Wait for element to be fully initialized
+      await editor.updateComplete;
+
+      // Mock the plumber
+      mockPlumber = {
+        connectionDragging: false,
+        on: stub(),
+        connectIds: stub(),
+        repaintEverything: stub()
+      };
+
+      // Set up editor state
+      (editor as any).plumber = mockPlumber;
+      (editor as any).definition = mockDefinition;
+    });
+
+    it('prevents connection when targeting same node', () => {
+      // Set up connection drag state
+      (editor as any).sourceId = 'exit-1a';
+      (editor as any).sourceNodeId = 'node-1';
+      (editor as any).targetId = 'node-1'; // Same node as source
+      (editor as any).isValidTarget = false;
+
+      // Test the validation logic directly without makeConnection
+      const shouldConnect =
+        (editor as any).sourceId &&
+        (editor as any).targetId &&
+        (editor as any).isValidTarget;
+
+      expect(shouldConnect).to.be.false;
+    });
+
+    it('allows connection when targeting different node', () => {
+      // Set up connection drag state
+      (editor as any).sourceId = 'exit-1a';
+      (editor as any).sourceNodeId = 'node-1';
+      (editor as any).targetId = 'node-2'; // Different node
+      (editor as any).isValidTarget = true;
+
+      // Test the validation logic directly without makeConnection
+      const shouldConnect =
+        (editor as any).sourceId &&
+        (editor as any).targetId &&
+        (editor as any).isValidTarget;
+
+      expect(shouldConnect).to.be.true;
+    });
+  });
+
+  describe('visual feedback during connection dragging', () => {
+    let mockTargetNode: HTMLElement;
+
+    beforeEach(async () => {
+      editor = (await fixture(
+        html`<temba-flow-editor-test></temba-flow-editor-test>`
+      )) as Editor;
+
+      // Wait for element to be fully initialized
+      await editor.updateComplete;
+
+      // Create mock target node
+      mockTargetNode = document.createElement('temba-flow-node');
+      mockTargetNode.setAttribute('uuid', 'node-2');
+      document.body.appendChild(mockTargetNode);
+
+      // Mock querySelector to return our mock node
+      stub(document, 'querySelector')
+        .withArgs('temba-flow-node:hover')
+        .returns(mockTargetNode);
+      stub(document, 'querySelectorAll')
+        .withArgs('temba-flow-node')
+        .returns({
+          forEach: (callback: (node: Element) => void) =>
+            callback(mockTargetNode)
+        } as any);
+
+      // Set up editor state
+      (editor as any).plumber = { connectionDragging: true };
+      (editor as any).definition = mockDefinition;
+      (editor as any).sourceId = 'exit-1a';
+      (editor as any).sourceNodeId = 'node-1';
+      (editor as any).dragFromNodeId = 'node-1'; // This is the key property used in validation
+    });
+
+    afterEach(() => {
+      if (document.body.contains(mockTargetNode)) {
+        document.body.removeChild(mockTargetNode);
+      }
+    });
+
+    it('adds valid target class when hovering over different node', async () => {
+      // Make sure other properties on the editor are correctly set up
+      (editor as any).targetId = 'node-2';
+      (editor as any).isValidTarget = true;
+
+      // Simulate mouse move over different node
+      (editor as any).handleMouseMove(new MouseEvent('mousemove'));
+      await editor.updateComplete;
+
+      // Allow time for DOM updates
+      clock.tick(50);
+
+      expect(mockTargetNode.classList.contains('connection-target-valid')).to.be
+        .true;
+      expect(mockTargetNode.classList.contains('connection-target-invalid')).to
+        .be.false;
+    });
+
+    it('adds invalid target class when hovering over same node', async () => {
+      // Change target to same node as source
+      mockTargetNode.setAttribute('uuid', 'node-1');
+
+      // Make sure other properties on the editor are correctly set up
+      (editor as any).targetId = 'node-1';
+      (editor as any).isValidTarget = false;
+
+      // Simulate mouse move over same node
+      (editor as any).handleMouseMove(new MouseEvent('mousemove'));
+      await editor.updateComplete;
+
+      // Allow time for DOM updates
+      clock.tick(50);
+
+      expect(mockTargetNode.classList.contains('connection-target-invalid')).to
+        .be.true;
+      expect(mockTargetNode.classList.contains('connection-target-valid')).to.be
+        .false;
+    });
+
+    it('cleans up visual feedback after connection attempt', async () => {
+      // Add classes to simulate active state
+      mockTargetNode.classList.add('connection-target-valid');
+
+      // Make connection (which should clean up)
+      (editor as any).makeConnection();
+      await editor.updateComplete;
+
+      expect(mockTargetNode.classList.contains('connection-target-valid')).to.be
+        .false;
+      expect(mockTargetNode.classList.contains('connection-target-invalid')).to
+        .be.false;
+    });
+  });
+});

package/test/temba-formfield.test.ts

@@ -1,5 +1,5 @@
 import { html, fixture, expect } from '@open-wc/testing';
-import { FormField } from '../src/formfield/FormField';
+import { FormField } from '../src/form/FormField';
 import { assertScreenshot, getClip } from './utils.test';
 
 describe('temba-field', () => {

package/test/temba-icon.test.ts

@@ -1,5 +1,5 @@
 import { assert } from '@open-wc/testing';
-import { VectorIcon } from '../src/vectoricon/VectorIcon';
+import { VectorIcon } from '../src/display/Icon';
 import { getComponent } from './utils.test';
 
 const TAG = 'temba-icon';

package/test/temba-integration-markdown.test.ts

@@ -1,5 +1,5 @@
 import { html, fixture, expect } from '@open-wc/testing';
-import { Checkbox } from '../src/checkbox/Checkbox';
+import { Checkbox } from '../src/form/Checkbox';
 import { assertScreenshot, getClip } from './utils.test';
 
 describe('FormElement markdown integration', () => {

package/test/temba-label.test.ts

@@ -1,5 +1,5 @@
 import { assert } from '@open-wc/testing';
-import Label from '../src/label/Label';
+import Label from '../src/display/Label';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 
 const TAG = 'temba-label';

package/test/temba-lightbox.test.ts

@@ -1,5 +1,5 @@
 import { fixture, assert } from '@open-wc/testing';
-import { Lightbox } from '../src/lightbox/Lightbox';
+import { Lightbox } from '../src/display/Lightbox';
 import { assertScreenshot } from './utils.test';
 
 export const getHTML = () => {

package/test/temba-markdown.test.ts

@@ -0,0 +1,162 @@
+import { expect } from '@open-wc/testing';
+import { html, render } from 'lit';
+import { markdown, renderMarkdown, RenderMarkdown } from '../src/markdown';
+import { PartType } from 'lit/directive.js';
+
+describe('markdown', () => {
+  describe('markdown instance', () => {
+    it('exports a Remarkable instance', () => {
+      expect(markdown).to.exist;
+      expect(typeof markdown.render).to.equal('function');
+    });
+
+    it('renders basic markdown', () => {
+      const result = markdown.render('# Hello World');
+      expect(result).to.include('<h1>Hello World</h1>');
+    });
+
+    it('renders markdown with emphasis', () => {
+      const result = markdown.render('**bold** and *italic*');
+      expect(result).to.include('<strong>bold</strong>');
+      expect(result).to.include('<em>italic</em>');
+    });
+
+    it('renders markdown lists', () => {
+      const result = markdown.render('- Item 1\n- Item 2');
+      expect(result).to.include('<ul>');
+      expect(result).to.include('<li>Item 1</li>');
+      expect(result).to.include('<li>Item 2</li>');
+    });
+
+    it('renders markdown links', () => {
+      const result = markdown.render('[Link](https://example.com)');
+      expect(result).to.include('<a href="https://example.com">Link</a>');
+    });
+  });
+
+  describe('RenderMarkdown directive', () => {
+    it('throws error for non-child part types', () => {
+      const invalidPartInfo = {
+        type: PartType.ATTRIBUTE
+      };
+
+      expect(() => new RenderMarkdown(invalidPartInfo as any)).to.throw(
+        'renderMarkdown only supports child expressions'
+      );
+    });
+
+    it('creates directive for child part type', () => {
+      const validPartInfo = {
+        type: PartType.CHILD
+      };
+
+      expect(() => new RenderMarkdown(validPartInfo as any)).to.not.throw;
+    });
+
+    it('renders markdown content', () => {
+      const validPartInfo = {
+        type: PartType.CHILD
+      };
+
+      const directive = new RenderMarkdown(validPartInfo as any);
+      const result = directive.render('# Test Header');
+
+      // The result should be a TemplateResult
+      expect(result).to.exist;
+      expect(result.strings).to.exist;
+    });
+
+    it('updates correctly', () => {
+      const validPartInfo = {
+        type: PartType.CHILD
+      };
+
+      const directive = new RenderMarkdown(validPartInfo as any);
+      const mockPart = {} as any;
+
+      const result = directive.update(mockPart, ['# Updated Content']);
+
+      // Should return the same as render
+      expect(result).to.exist;
+      expect(result.strings).to.exist;
+    });
+  });
+
+  describe('renderMarkdown function', () => {
+    it('creates a directive that can be used in templates', () => {
+      const template = html`${renderMarkdown('# Test')}`;
+
+      // Should create a valid template
+      expect(template).to.exist;
+      expect(template.strings).to.exist;
+    });
+
+    it('renders markdown when used in a template', () => {
+      const container = document.createElement('div');
+      const template = html`${renderMarkdown('# Hello World')}`;
+
+      render(template, container);
+
+      // Check that the markdown was rendered to HTML
+      expect(container.innerHTML).to.include('<h1>Hello World</h1>');
+    });
+
+    it('handles empty markdown', () => {
+      const container = document.createElement('div');
+      const template = html`${renderMarkdown('')}`;
+
+      render(template, container);
+
+      // Should not throw - Lit may add HTML comments for template placeholders
+      expect(() => render(template, container)).to.not.throw;
+    });
+
+    it('handles markdown with special characters', () => {
+      const container = document.createElement('div');
+      const markdownWithSpecialChars =
+        '**Bold** text with <script>alert("xss")</script>';
+      const template = html`${renderMarkdown(markdownWithSpecialChars)}`;
+
+      render(template, container);
+
+      // Should render the markdown but the script tag should be escaped/handled
+      expect(container.innerHTML).to.include('<strong>Bold</strong>');
+      // The script tag should be rendered as text or escaped
+      expect(container.innerHTML).to.include('script');
+    });
+
+    it('renders complex markdown structures', () => {
+      const complexMarkdown = `
+# Main Header
+
+## Sub Header
+
+This is a paragraph with **bold** and *italic* text.
+
+- List item 1
+- List item 2
+  - Nested item
+
+[A link](https://example.com)
+
+\`\`\`
+code block
+\`\`\`
+`;
+
+      const container = document.createElement('div');
+      const template = html`${renderMarkdown(complexMarkdown)}`;
+
+      render(template, container);
+
+      expect(container.innerHTML).to.include('<h1>Main Header</h1>');
+      expect(container.innerHTML).to.include('<h2>Sub Header</h2>');
+      expect(container.innerHTML).to.include('<strong>bold</strong>');
+      expect(container.innerHTML).to.include('<em>italic</em>');
+      expect(container.innerHTML).to.include('<ul>');
+      expect(container.innerHTML).to.include(
+        '<a href="https://example.com">A link</a>'
+      );
+    });
+  });
+});