@nyaruka/temba-components 0.129.8 → 0.129.10

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

@@ -1,563 +0,0 @@
-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-formfield.test.ts

@@ -1,121 +0,0 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import { FormField } from '../src/form/FormField';
-import { assertScreenshot, getClip } from './utils.test';
-
-describe('temba-field', () => {
-  it('renders field with plain text errors', async () => {
-    const formField: FormField = await fixture(html`
-      <temba-field
-        label="Test Field"
-        name="test"
-        .errors=${['This is a plain text error', 'Another error message']}
-      >
-        <input type="text" />
-      </temba-field>
-    `);
-
-    await formField.updateComplete;
-
-    // Check that errors are rendered
-    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-    expect(errorElements.length).to.equal(2);
-    expect(errorElements[0].textContent.trim()).to.equal(
-      'This is a plain text error'
-    );
-    expect(errorElements[1].textContent.trim()).to.equal(
-      'Another error message'
-    );
-
-    await assertScreenshot('formfield/plain-text-errors', getClip(formField));
-  });
-
-  it('renders field with markdown errors', async () => {
-    const formField: FormField = await fixture(html`
-      <temba-field
-        label="Test Field"
-        name="test"
-        .errors=${[
-          'This is **bold** text',
-          'This has a [link](https://example.com)',
-          'This is *italic* and **bold** with a [link](https://example.com)'
-        ]}
-      >
-        <input type="text" />
-      </temba-field>
-    `);
-
-    await formField.updateComplete;
-
-    // Check that errors are rendered
-    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-    expect(errorElements.length).to.equal(3);
-
-    // First error should have bold text
-    const firstError = errorElements[0];
-    const boldElement = firstError.querySelector('strong');
-    expect(boldElement).to.not.be.null;
-    expect(boldElement.textContent).to.equal('bold');
-
-    // Second error should have a link
-    const secondError = errorElements[1];
-    const linkElement = secondError.querySelector('a');
-    expect(linkElement).to.not.be.null;
-    expect(linkElement.getAttribute('href')).to.equal('https://example.com');
-    expect(linkElement.textContent).to.equal('link');
-
-    // Third error should have both bold, italic, and link
-    const thirdError = errorElements[2];
-    const thirdBoldElement = thirdError.querySelector('strong');
-    const thirdItalicElement = thirdError.querySelector('em');
-    const thirdLinkElement = thirdError.querySelector('a');
-    expect(thirdBoldElement).to.not.be.null;
-    expect(thirdItalicElement).to.not.be.null;
-    expect(thirdLinkElement).to.not.be.null;
-
-    await assertScreenshot('formfield/markdown-errors', getClip(formField));
-  });
-
-  it('renders field without errors', async () => {
-    const formField: FormField = await fixture(html`
-      <temba-field label="Test Field" name="test">
-        <input type="text" />
-      </temba-field>
-    `);
-
-    await formField.updateComplete;
-
-    // Check that no errors are rendered
-    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-    expect(errorElements.length).to.equal(0);
-
-    await assertScreenshot('formfield/no-errors', getClip(formField));
-  });
-
-  it('renders in widget-only mode with errors', async () => {
-    const formField: FormField = await fixture(html`
-      <temba-field
-        widget_only
-        .errors=${['Widget only **error** with [link](https://example.com)']}
-      >
-        <input type="text" />
-      </temba-field>
-    `);
-
-    await formField.updateComplete;
-
-    // Check that error is rendered in widget-only mode
-    const errorElements = formField.shadowRoot.querySelectorAll('.alert-error');
-    expect(errorElements.length).to.equal(1);
-
-    const errorElement = errorElements[0];
-    const boldElement = errorElement.querySelector('strong');
-    const linkElement = errorElement.querySelector('a');
-    expect(boldElement).to.not.be.null;
-    expect(linkElement).to.not.be.null;
-
-    await assertScreenshot(
-      'formfield/widget-only-markdown-errors',
-      getClip(formField)
-    );
-  });
-});