@nyaruka/temba-components 0.129.7 → 0.129.8

package/stress-test.js

@@ -0,0 +1,138 @@
+#!/usr/bin/env node
+
+import { execSync } from 'child_process';
+import { performance } from 'perf_hooks';
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+let testFile = '';
+let maxRuns = 10;
+
+// Parse arguments
+for (let i = 0; i < args.length; i++) {
+  const arg = args[i];
+  
+  if (arg.startsWith('--runs=')) {
+    maxRuns = parseInt(arg.split('=')[1]);
+    if (isNaN(maxRuns) || maxRuns <= 0) {
+      console.error('❌ Invalid runs value. Must be a positive integer.');
+      process.exit(1);
+    }
+  } else if (arg.startsWith('test/') && arg.endsWith('.test.ts')) {
+    testFile = arg;
+  } else if (!arg.startsWith('--')) {
+    testFile = arg;
+  }
+}
+
+// Validate test file
+if (!testFile) {
+  console.error('❌ Usage: yarn stress-test <test-file> [--runs=N]');
+  console.error('   Example: yarn stress-test test/temba-webchat.test.ts --runs=100');
+  process.exit(1);
+}
+
+if (!testFile.startsWith('test/') || !testFile.endsWith('.test.ts')) {
+  console.error('❌ Test file must be in the test/ directory and end with .test.ts');
+  process.exit(1);
+}
+
+console.log(`🧪 Stress testing: ${testFile}`);
+console.log(`🔄 Running up to ${maxRuns} times (or until failure)`);
+console.log('');
+
+let run = 1;
+let totalTime = 0;
+const runTimes = [];
+let failures = 0;
+
+const startTime = performance.now();
+
+try {
+  while (run <= maxRuns) {
+    const runStartTime = performance.now();
+    
+    process.stdout.write(`Run ${run.toString().padStart(3)}/${maxRuns}: `);
+    
+    try {
+      // Run the test with minimal output
+      const result = execSync(`yarn test ${testFile}`, { 
+        encoding: 'utf-8',
+        stdio: ['pipe', 'pipe', 'pipe']
+      });
+      
+      const runEndTime = performance.now();
+      const runTime = runEndTime - runStartTime;
+      runTimes.push(runTime);
+      totalTime += runTime;
+      
+      // Check if the test actually passed by looking for success indicators
+      if (result.includes('all tests passed') || result.includes('0 failed')) {
+        console.log(`✅ PASS (${(runTime / 1000).toFixed(2)}s)`);
+      } else {
+        console.log(`❌ FAIL (unexpected output)`);
+        console.log('Output:', result);
+        failures++;
+        break;
+      }
+      
+    } catch (error) {
+      const runEndTime = performance.now();
+      const runTime = runEndTime - runStartTime;
+      
+      console.log(`❌ FAIL (${(runTime / 1000).toFixed(2)}s)`);
+      console.log('');
+      console.log('💥 Test failed on run', run);
+      console.log('');
+      console.log('Error output:');
+      console.log(error.stdout || error.message);
+      if (error.stderr) {
+        console.log('');
+        console.log('Error details:');
+        console.log(error.stderr);
+      }
+      failures++;
+      break;
+    }
+    
+    run++;
+  }
+} catch (error) {
+  console.log('');
+  console.log('💥 Unexpected error:', error.message);
+  process.exit(1);
+}
+
+const endTime = performance.now();
+const totalTestTime = endTime - startTime;
+
+console.log('');
+console.log('📊 Results Summary');
+console.log('==================');
+console.log(`Test file: ${testFile}`);
+console.log(`Completed runs: ${run - 1}/${maxRuns}`);
+console.log(`Failures: ${failures}`);
+console.log(`Success rate: ${(((run - 1 - failures) / (run - 1)) * 100).toFixed(1)}%`);
+console.log('');
+
+if (runTimes.length > 0) {
+  const avgTime = runTimes.reduce((a, b) => a + b, 0) / runTimes.length;
+  const minTime = Math.min(...runTimes);
+  const maxTime = Math.max(...runTimes);
+  
+  console.log('⏱️  Timing Statistics');
+  console.log('=====================');
+  console.log(`Total time: ${(totalTestTime / 1000).toFixed(2)}s`);
+  console.log(`Average run time: ${(avgTime / 1000).toFixed(2)}s`);
+  console.log(`Fastest run: ${(minTime / 1000).toFixed(2)}s`);
+  console.log(`Slowest run: ${(maxTime / 1000).toFixed(2)}s`);
+  console.log('');
+}
+
+if (failures === 0) {
+  console.log(`🎉 All ${run - 1} runs passed successfully!`);
+  process.exit(0);
+} else {
+  console.log(`💥 Test failed after ${run - 1} runs`);
+  process.exit(1);
+}

package/temba-modules.ts

@@ -70,6 +70,7 @@ import { RangePicker } from './src/form/RangePicker';
 import { NodeEditor } from './src/flow/NodeEditor';
 import { KeyValueEditor } from './src/form/KeyValueEditor';
 import { TembaArrayEditor } from './src/form/ArrayEditor';
+import { MessageEditor } from './src/form/MessageEditor';
 import './src/form/BaseListEditor'; // Import base class
 
 export function addCustomElement(name: string, comp: any) {
@@ -151,3 +152,4 @@ addCustomElement('temba-workspace-select', WorkspaceSelect);
 addCustomElement('temba-chart', TembaChart);
 addCustomElement('temba-key-value-editor', KeyValueEditor);
 addCustomElement('temba-array-editor', TembaArrayEditor);
+addCustomElement('temba-message-editor', MessageEditor);

package/test/temba-field-config.test.ts

@@ -122,7 +122,8 @@ describe('Field Configuration System', () => {
       await (el as any).updateComplete;
 
       expect(el).to.exist;
-      expect(el.shadowRoot?.querySelector('.add-btn')).to.exist;
+      // ArrayEditor with maintainEmptyItem=true doesn't show add button
+      expect(el.shadowRoot?.querySelector('.add-btn')).to.not.exist;
     });
 
     it('should render with initial items', async () => {
@@ -146,7 +147,8 @@ describe('Field Configuration System', () => {
 
       expect(el).to.exist;
       const items = el.shadowRoot?.querySelectorAll('.array-item');
-      expect(items?.length).to.equal(2);
+      // Expects 3 items: 2 initial items + 1 auto-generated empty item
+      expect(items?.length).to.equal(3);
     });
   });
 });

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

@@ -0,0 +1,300 @@
+import { fixture, assert, expect } from '@open-wc/testing';
+import { MessageEditor } from '../src/form/MessageEditor';
+import { assertScreenshot, getClip, getComponent } from './utils.test';
+
+export const getHTML = (options: any = {}) => {
+  const attrs = Object.keys(options)
+    .map((key) => `${key}="${options[key]}"`)
+    .join(' ');
+  return `<temba-message-editor ${attrs}></temba-message-editor>`;
+};
+
+describe('temba-message-editor', () => {
+  it('can be created', async () => {
+    const editor: MessageEditor = await fixture(getHTML());
+    assert.instanceOf(editor, MessageEditor);
+  });
+
+  it('has default properties', async () => {
+    const editor = (await getComponent(
+      'temba-message-editor'
+    )) as MessageEditor;
+
+    expect(editor.name).to.equal('');
+    expect(editor.value).to.equal('');
+    expect(editor.placeholder).to.equal('');
+    expect(editor.textarea).to.be.true;
+    expect(editor.autogrow).to.be.true;
+    expect(editor.minHeight).to.equal(60);
+    expect(editor.attachments).to.deep.equal([]);
+    expect(editor.maxAttachments).to.equal(3);
+
+    await assertScreenshot(
+      'message-editor/default',
+      getClip(editor as HTMLElement)
+    );
+  });
+
+  it('can set properties', async () => {
+    const editor = (await getComponent('temba-message-editor', {
+      name: 'message',
+      value: 'Hello world',
+      placeholder: 'Type your message...',
+      'max-attachments': '5'
+    })) as MessageEditor;
+
+    expect(editor.name).to.equal('message');
+    expect(editor.value).to.equal('Hello world');
+    expect(editor.placeholder).to.equal('Type your message...');
+    expect(editor.maxAttachments).to.equal(5);
+
+    await assertScreenshot(
+      'message-editor/with-properties',
+      getClip(editor as HTMLElement)
+    );
+  });
+
+  it('renders completion component', async () => {
+    const editor = (await getComponent('temba-message-editor', {
+      value: 'Test message',
+      placeholder: 'Enter message'
+    })) as MessageEditor;
+
+    const completion = editor.shadowRoot.querySelector(
+      'temba-completion'
+    ) as any;
+    expect(completion).to.not.be.null;
+    expect(completion.hasAttribute('widgetOnly')).to.be.true;
+
+    await assertScreenshot(
+      'message-editor/with-completion',
+      getClip(editor as HTMLElement)
+    );
+  });
+
+  it('filters runtime attachments', async () => {
+    const attachments = [
+      'image/jpeg:http://example.com/image.jpg',
+      'image:@fields.profile_pic',
+      'video:@fields.intro_video',
+      'application/pdf:http://example.com/doc.pdf'
+    ];
+
+    const editor = (await getComponent('temba-message-editor', {
+      attachments: JSON.stringify(attachments)
+    })) as MessageEditor;
+
+    // Wait for component to update
+    await editor.updateComplete;
+
+    const mediaPicker = editor.shadowRoot.querySelector(
+      'temba-media-picker'
+    ) as any;
+    expect(mediaPicker).to.not.be.null;
+
+    // Should only have the static attachments (those with '/' in content type)
+    expect(mediaPicker.attachments.length).to.equal(2);
+    expect(mediaPicker.attachments[0].content_type).to.equal('image/jpeg');
+    expect(mediaPicker.attachments[1].content_type).to.equal('application/pdf');
+
+    await assertScreenshot(
+      'message-editor/filtered-attachments',
+      getClip(editor as HTMLElement)
+    );
+  });
+
+  it('handles completion change events', async () => {
+    const editor = (await getComponent(
+      'temba-message-editor'
+    )) as MessageEditor;
+    let changeEvent: CustomEvent = null;
+
+    editor.addEventListener('change', (e: CustomEvent) => {
+      changeEvent = e;
+    });
+
+    const completion = editor.shadowRoot.querySelector(
+      'temba-completion'
+    ) as any;
+    completion.value = 'New message';
+    completion.dispatchEvent(new Event('change'));
+
+    expect(editor.value).to.equal('New message');
+    expect(changeEvent).to.not.be.null;
+  });
+
+  it('handles media picker change events', async () => {
+    const editor = (await getComponent(
+      'temba-message-editor'
+    )) as MessageEditor;
+    let changeEvent: CustomEvent = null;
+
+    editor.addEventListener('change', (e: CustomEvent) => {
+      changeEvent = e;
+    });
+
+    const mediaPicker = editor.shadowRoot.querySelector(
+      'temba-media-picker'
+    ) as any;
+    mediaPicker.attachments = [
+      {
+        content_type: 'image/jpeg',
+        url: 'http://example.com/test.jpg',
+        filename: 'test.jpg',
+        size: 1024
+      }
+    ];
+    mediaPicker.dispatchEvent(new Event('change'));
+
+    expect(editor.attachments).to.include(
+      'image/jpeg:http://example.com/test.jpg'
+    );
+    expect(changeEvent).to.not.be.null;
+  });
+
+  it('preserves runtime attachments when media changes', async () => {
+    const initialAttachments = [
+      'image:@fields.profile_pic',
+      'image/jpeg:http://example.com/existing.jpg'
+    ];
+
+    const editor = (await getComponent('temba-message-editor', {
+      attachments: JSON.stringify(initialAttachments)
+    })) as MessageEditor;
+
+    await editor.updateComplete;
+
+    // Simulate media picker change
+    const mediaPicker = editor.shadowRoot.querySelector(
+      'temba-media-picker'
+    ) as any;
+    mediaPicker.attachments = [
+      {
+        content_type: 'image/png',
+        url: 'http://example.com/new.png',
+        filename: 'new.png',
+        size: 2048
+      }
+    ];
+    mediaPicker.dispatchEvent(new Event('change'));
+
+    // Should preserve runtime attachments and add new static ones
+    expect(editor.attachments).to.include('image:@fields.profile_pic');
+    expect(editor.attachments).to.include(
+      'image/png:http://example.com/new.png'
+    );
+    expect(editor.attachments.length).to.equal(2);
+  });
+
+  it('supports drag and drop highlighting', async () => {
+    const editor = (await getComponent(
+      'temba-message-editor'
+    )) as MessageEditor;
+    const container = editor.shadowRoot.querySelector(
+      '.message-editor-container'
+    );
+
+    // Simulate drag enter
+    const dragEvent = new DragEvent('dragenter', {
+      bubbles: true,
+      dataTransfer: new DataTransfer()
+    });
+    container.dispatchEvent(dragEvent);
+
+    // Wait for the update
+    await editor.updateComplete;
+
+    expect(editor.pendingDrop).to.be.true;
+    expect(container.classList.contains('highlight')).to.be.true;
+
+    await assertScreenshot(
+      'message-editor/drag-highlight',
+      getClip(editor as HTMLElement)
+    );
+
+    // Simulate drag leave
+    const dragLeaveEvent = new DragEvent('dragleave', {
+      bubbles: true,
+      dataTransfer: new DataTransfer()
+    });
+    container.dispatchEvent(dragLeaveEvent);
+
+    expect(editor.pendingDrop).to.be.false;
+  });
+
+  it('focuses completion on focus', async () => {
+    const editor = (await getComponent(
+      'temba-message-editor'
+    )) as MessageEditor;
+    const completion = editor.shadowRoot.querySelector(
+      'temba-completion'
+    ) as any;
+
+    let focusCalled = false;
+    completion.focus = () => {
+      focusCalled = true;
+    };
+
+    editor.focus();
+    expect(focusCalled).to.be.true;
+  });
+
+  it('clicks completion on click', async () => {
+    const editor = (await getComponent(
+      'temba-message-editor'
+    )) as MessageEditor;
+    const completion = editor.shadowRoot.querySelector(
+      'temba-completion'
+    ) as any;
+
+    let clickCalled = false;
+    completion.click = () => {
+      clickCalled = true;
+    };
+
+    editor.click();
+    expect(clickCalled).to.be.true;
+  });
+
+  it('initializes with correct height for long text content', async () => {
+    const longText =
+      'This is a very long text that should span multiple lines and cause the autogrow functionality to kick in and expand the textarea to accommodate all the content. This text should be long enough to trigger the autogrow behavior during initialization.';
+
+    const editor = (await getComponent('temba-message-editor', {
+      value: longText,
+      'min-height': '60'
+    })) as MessageEditor;
+
+    // Wait for component to fully render
+    await editor.updateComplete;
+
+    // Get the text input element to verify its height
+    const completion = editor.shadowRoot.querySelector(
+      'temba-completion'
+    ) as any;
+    expect(completion).to.not.be.null;
+
+    // The completion should have the long text value
+    expect(completion.value).to.equal(longText);
+
+    // Get the actual TextInput component inside the completion
+    const textInput = completion.getTextInput();
+    expect(textInput).to.not.be.null;
+
+    // The textarea should be in autogrow mode
+    expect(textInput.autogrow).to.be.true;
+    expect(textInput.textarea).to.be.true;
+
+    // Check that the autogrow div has been updated with content
+    const autogrowDiv = textInput.shadowRoot.querySelector(
+      '.grow-wrap > div'
+    ) as HTMLDivElement;
+    expect(autogrowDiv).to.not.be.null;
+    expect(autogrowDiv.innerText).to.include(longText);
+
+    await assertScreenshot(
+      'message-editor/autogrow-initial-content',
+      getClip(editor as HTMLElement)
+    );
+  });
+});

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

@@ -48,6 +48,34 @@ describe('temba-node-editor', () => {
     expect(el.action).to.equal(action);
   });
 
+  it('renders send_msg action with message editor', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello @contact.name, check this out!',
+      attachments: [
+        'image/jpeg:http://example.com/photo.jpg',
+        'image:@fields.profile_pic'
+      ],
+      quick_replies: ['Yes', 'No']
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+    expect(el.shadowRoot).to.not.be.null;
+    expect(el.action).to.equal(action);
+
+    // Check that the message editor component is rendered
+    const messageEditor = el.shadowRoot.querySelector(
+      'temba-message-editor'
+    ) as any;
+    expect(messageEditor).to.not.be.null;
+    expect(messageEditor.value).to.equal(action.text);
+  });
+
   it('renders set_run_result action', async () => {
     const action = {
       uuid: 'test-action-uuid',
@@ -350,4 +378,70 @@ describe('temba-node-editor', () => {
       await assertDialogScreenshot(el, `editor/${actionType.type}`);
     }
   });
+
+  it('displays bubble count for group value counts', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello world',
+      quick_replies: ['Yes', 'No', 'Maybe'],
+      attachments: ['image:@contact.photo', 'document:@contact.resume']
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Wait for form data to be fully initialized and re-render to complete
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await el.updateComplete;
+
+    // Check that bubble counts are displayed
+    const shadowRoot = el.shadowRoot;
+    const bubbles = shadowRoot.querySelectorAll('.group-count-bubble');
+
+    // Should have bubbles for groups with values
+    expect(bubbles.length).to.be.greaterThan(0);
+
+    // Check specific bubble values (trim to handle whitespace in rendered text)
+    const bubbleTexts = Array.from(bubbles).map((bubble) =>
+      bubble.textContent?.trim()
+    );
+
+    // Runtime attachments group should show bubble when collapsed and has values
+    expect(bubbleTexts).to.include('2'); // 2 runtime attachments
+    // Note: Quick replies group auto-expands when it has content, so no bubble is shown
+  });
+
+  it('shows arrow when group has no values', async () => {
+    const action = {
+      uuid: 'test-action-uuid',
+      type: 'send_msg',
+      text: 'Hello world'
+      // No quick_replies or attachments provided
+    };
+
+    const el = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as NodeEditorElement;
+
+    await el.updateComplete;
+
+    // Wait for form data initialization
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await el.updateComplete;
+
+    // Check that arrows are displayed instead of bubbles
+    const shadowRoot = el.shadowRoot;
+    const bubbles = shadowRoot.querySelectorAll('.group-count-bubble');
+    const arrows = shadowRoot.querySelectorAll('.group-toggle-icon');
+
+    // Should have no bubbles when counts are 0
+    expect(bubbles.length).to.equal(0);
+
+    // Should have arrows for collapsible groups
+    expect(arrows.length).to.be.greaterThan(0);
+  });
 });

package/test/temba-select.test.ts

@@ -927,7 +927,7 @@ describe('temba-select', () => {
 
       await openSelect(clock, select);
       // Cached results should be available immediately, but give some time for rendering
-      await waitForSelectPagination(select, clock, 15, 30);
+      await waitForSelectPagination(select, clock, 15, 10);
       assert.equal(select.visibleOptions.length, 15);
 
       // close and reopen once more (previous bug failed on third opening)

package/test/temba-textinput.test.ts

@@ -197,4 +197,30 @@ describe('temba-textinput', () => {
     await assertScreenshot('textinput/input-updated', getClip(input));
     expect(widget.value).to.equal('Updated by attribute change');
   });
+
+  it('initializes autogrow with content', async () => {
+    const longText =
+      'This is a very long text that should span multiple lines and cause the autogrow functionality to kick in and expand the textarea to accommodate all the content during initialization.';
+
+    const input: TextInput = await createInput(
+      getInputHTML({
+        value: longText,
+        textarea: true,
+        autogrow: true
+      })
+    );
+
+    // Wait for component to fully render
+    await input.updateComplete;
+
+    // Check that autogrow div has been updated with initial content
+    const autogrowDiv = input.shadowRoot.querySelector(
+      '.grow-wrap > div'
+    ) as HTMLDivElement;
+    expect(autogrowDiv).to.not.be.null;
+    expect(autogrowDiv.innerText).to.include(longText);
+    expect(autogrowDiv.innerText).to.include('\n'); // Should have the newline character added
+
+    await assertScreenshot('textinput/autogrow-initial', getClip(input));
+  });
 });

package/test/temba-webchat.test.ts

@@ -16,6 +16,11 @@ const TAG = 'temba-webchat';
 const getWebChat = async (attrs: any = {}) => {
   const webChat = (await getComponent(TAG, attrs, '', 400, 600)) as WebChat;
 
+  // Ensure component is fully initialized before returning
+  await webChat.updateComplete;
+  clock.tick(100);
+  await webChat.updateComplete;
+
   return webChat;
 };
 

package/test/utils.test.ts

@@ -7,7 +7,7 @@ interface Clip {
   height: number;
 }
 
-import { expect, fixture, html, assert, waitUntil } from '@open-wc/testing';
+import { expect, fixture, html, assert } from '@open-wc/testing';
 import MouseHelper from './MouseHelper';
 import { Store } from '../src/store/Store';
 import { stub } from 'sinon';
@@ -200,18 +200,7 @@ export const waitForCondition = async (
   }
 };
 
-export const assertScreenshot = async (
-  filename: string,
-  clip: Clip,
-  waitFor?: { clock?: any; predicate?: () => boolean }
-) => {
-  if (waitFor) {
-    if (waitFor.clock) {
-      waitFor.clock.restore();
-    }
-    await waitUntil(waitFor.predicate);
-  }
-
+export const assertScreenshot = async (filename: string, clip: Clip) => {
   // detect if we're running in copilot's environment and use adaptive threshold
   const isCopilotEnvironment = (window as any).isCopilotEnvironment;
   const threshold = isCopilotEnvironment ? 1.0 : 0.1;

package/test-assets/contacts/history.json

@@ -217,6 +217,25 @@
       },
       "logs_url": null
     },
+    {
+      "type": "run_started",
+      "created_on": "2021-03-30T22:20:26.704467+00:00",
+      "run_uuid": "0198c846-2cf4-7992-9bd0-9b6581e42358",
+      "flow": {
+        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
+        "name": "Favorites"
+      }
+    },
+    {
+      "type": "run_ended",
+      "created_on": "2021-03-30T22:20:26.704467+00:00",
+      "run_uuid": "0198c846-da2b-799f-8af9-aaf8857f947f",
+      "flow": {
+        "uuid": "d076d716-8071-417e-b188-d9746db223a1",
+        "name": "Favorites"
+      },
+      "status": "completed"
+    },
     {
       "uuid": "01988a77-979e-7768-a940-8d9c348e24fe",
       "type": "msg_received",

package/test-assets/style.css

@@ -60,6 +60,8 @@ html {
   --error-rgb: 255, 99, 71;
   --success-rgb: 102, 186, 104;
 
+  --color-label: #333;
+
   --selection-light-rgb: 240, 240, 240;
   --selection-dark-rgb: 180, 180, 180;