@nyaruka/temba-components 0.129.1 → 0.129.3

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>'
+      );
+    });
+  });
+});

package/test/temba-menu.test.ts

@@ -2,7 +2,7 @@ import { assert, expect } from '@open-wc/testing';
 
 import { TembaMenu } from '../src/list/TembaMenu';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
-import { extractInitials } from '../src/utils/index';
+import { extractInitials } from '../src/utils';
 
 const TAG = 'temba-menu';
 const getMenu = async (attrs: any = {}, width = 0) => {

package/test/temba-modax.test.ts

@@ -1,7 +1,7 @@
 import { fixture, expect, assert } from '@open-wc/testing';
 import { useFakeTimers } from 'sinon';
-import { Button } from '../src/button/Button';
-import { Modax } from '../src/dialog/Modax';
+import { Button } from '../src/display/Button';
+import { Modax } from '../src/layout/Modax';
 import { CustomEventType } from '../src/interfaces';
 import { assertScreenshot, getClip, mockPOST } from './utils.test';
 

package/test/temba-modules.test.ts

@@ -0,0 +1,56 @@
+import { expect } from '@open-wc/testing';
+import { addCustomElement } from '../temba-modules';
+
+describe('temba-modules', () => {
+  describe('addCustomElement', () => {
+    it('defines a custom element when not already defined', () => {
+      // Create a mock component class
+      class TestComponent extends HTMLElement {}
+
+      // Ensure the element is not already defined
+      const elementName = 'test-custom-element-' + Date.now();
+      expect(window.customElements.get(elementName)).to.be.undefined;
+
+      // Define the element
+      addCustomElement(elementName, TestComponent);
+
+      // Verify it's now defined
+      expect(window.customElements.get(elementName)).to.equal(TestComponent);
+    });
+
+    it('does not redefine a custom element when already defined', () => {
+      // Create mock component classes
+      class FirstComponent extends HTMLElement {}
+      class SecondComponent extends HTMLElement {}
+
+      const elementName = 'test-existing-element-' + Date.now();
+
+      // Define the element first time
+      addCustomElement(elementName, FirstComponent);
+      expect(window.customElements.get(elementName)).to.equal(FirstComponent);
+
+      // Try to define again with different component
+      addCustomElement(elementName, SecondComponent);
+
+      // Should still be the first component
+      expect(window.customElements.get(elementName)).to.equal(FirstComponent);
+      expect(window.customElements.get(elementName)).to.not.equal(
+        SecondComponent
+      );
+    });
+
+    it('handles multiple different elements', () => {
+      class ComponentA extends HTMLElement {}
+      class ComponentB extends HTMLElement {}
+
+      const elementA = 'test-element-a-' + Date.now();
+      const elementB = 'test-element-b-' + Date.now();
+
+      addCustomElement(elementA, ComponentA);
+      addCustomElement(elementB, ComponentB);
+
+      expect(window.customElements.get(elementA)).to.equal(ComponentA);
+      expect(window.customElements.get(elementB)).to.equal(ComponentB);
+    });
+  });
+});

package/test/temba-omnibox.test.ts

@@ -1,5 +1,5 @@
 import { fixture, assert } from '@open-wc/testing';
-import { Omnibox } from '../src/omnibox/Omnibox';
+import { Omnibox } from '../src/form/select/Omnibox';
 import { assertScreenshot, getClip, openAndClick } from './utils.test';
 import { useFakeTimers, spy } from 'sinon';
 

package/test/temba-options.test.ts

@@ -1,5 +1,5 @@
 import { fixture } from '@open-wc/testing';
-import { Options } from '../src/options/Options';
+import { Options } from '../src/display/Options';
 import { assertScreenshot, getClip, getHTML } from './utils.test';
 
 const colors = [

package/test/temba-range-picker.test.ts

@@ -1,7 +1,13 @@
 import { fixture, expect, assert } from '@open-wc/testing';
-import { RangePicker } from '../src/datepicker/RangePicker';
-import { assertScreenshot, getAttributes, getClip } from './utils.test';
+import { RangePicker } from '../src/form/RangePicker';
+import {
+  assertScreenshot,
+  getAttributes,
+  getClip,
+  mockNow
+} from './utils.test';
 import { DateTime } from 'luxon';
+import { SinonStub } from 'sinon';
 
 export const getRangePickerHTML = (attrs: any = {}) => {
   return `<temba-range-picker ${getAttributes(attrs)}></temba-range-picker>`;
@@ -16,6 +22,15 @@ export const createRangePicker = async (def: string) => {
 };
 
 describe('temba-range-picker', () => {
+  let mockedNow: SinonStub;
+  beforeEach(() => {
+    mockedNow = mockNow('2022-12-02T21:00:00.000000');
+  });
+
+  afterEach(() => {
+    mockedNow.restore();
+  });
+
   it('can create a range picker', async () => {
     const picker: RangePicker = await createRangePicker(getRangePickerHTML());
     assert.instanceOf(picker, RangePicker);