@nyaruka/temba-components 0.129.7 → 0.129.9

package/stress-test.js

@@ -0,0 +1,143 @@
+#!/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/ActionHelper.ts

@@ -8,6 +8,8 @@ import '../temba-modules';
 /**
  * Generic action test framework
  * Tests the complete action lifecycle: render → edit → save → validate
+ *
+ * For node configuration testing, see NodeHelper.ts
  */
 export class ActionTest<T extends Action> {
   constructor(private actionConfig: any, private actionName: string) {}

package/test/NodeHelper.ts

@@ -0,0 +1,184 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit';
+import { Node } from '../src/store/flow-definition';
+import { assertScreenshot, getClip } from './utils.test';
+import { Editor } from '../src/flow/Editor';
+import '../temba-modules';
+
+/**
+ * Generic node test framework
+ * Tests the complete node lifecycle: render → edit → save → validate
+ *
+ * This is the node configuration equivalent of ActionHelper.ts for action configurations.
+ * It provides uniform testing for all types of nodes: simple wait nodes, router-based
+ * split nodes, and complex form-configured nodes.
+ */
+export class NodeTest<T extends Node> {
+  constructor(private nodeConfig: any, private nodeName: string) {}
+
+  /**
+   * Renders a node in the flow editor and returns the flow node
+   */
+  private async renderNode(node: T, nodeUI: any): Promise<HTMLElement> {
+    const mockDefinition = {
+      nodes: [node],
+      _ui: {
+        nodes: {
+          [node.uuid]: {
+            type: nodeUI.type,
+            position: { left: 50, top: 50 },
+            ...nodeUI
+          }
+        }
+      }
+    };
+
+    const editor = (await fixture(html`
+      <temba-flow-editor>
+        <div id="canvas"></div>
+      </temba-flow-editor>
+    `)) as Editor;
+
+    (editor as any).definition = mockDefinition;
+    (editor as any).canvasSize = { width: 400, height: 300 };
+    await editor.updateComplete;
+
+    const flowNode = editor.querySelector('temba-flow-node') as HTMLElement;
+    expect(flowNode).to.exist;
+
+    return flowNode;
+  }
+
+  /**
+   * Opens the node editor for a node and returns the editor element
+   */
+  private async openNodeEditor(node: T, nodeUI: any): Promise<HTMLElement> {
+    const nodeEditor = (await fixture(html`
+      <temba-node-editor
+        .node=${node}
+        .nodeUI=${nodeUI}
+        .isOpen=${true}
+      ></temba-node-editor>
+    `)) as HTMLElement;
+
+    await (nodeEditor as any).updateComplete;
+
+    // Wait for form data initialization if needed
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    await (nodeEditor as any).updateComplete;
+
+    expect(nodeEditor).to.exist;
+
+    return nodeEditor;
+  }
+
+  /**
+   * Takes a screenshot of the dialog container within a node editor
+   */
+  private async assertDialogScreenshot(
+    el: HTMLElement,
+    screenshotName: string
+  ) {
+    const dialog = el.shadowRoot
+      ?.querySelector('temba-dialog')
+      ?.shadowRoot?.querySelector('.dialog-container') as HTMLElement;
+    await assertScreenshot(screenshotName, getClip(dialog));
+  }
+
+  /**
+   * Complete test for a node configuration
+   * 1. Renders the node in a flow node (with screenshot)
+   * 2. Opens the node editor (with screenshot)
+   * 3. Simulates save and validates round-trip conversion
+   */
+  async testNode(node: T, nodeUI: any, testName: string) {
+    it(`${testName}`, async () => {
+      // Step 1: Render node in flow node
+      const flowNode = await this.renderNode(node, nodeUI);
+
+      // For execute_actions nodes, check for .body, for router nodes check for .router or .categories
+      const hasContent =
+        flowNode.querySelector('.body') ||
+        flowNode.querySelector('.router') ||
+        flowNode.querySelector('.categories') ||
+        flowNode.querySelector('.action') ||
+        flowNode.textContent?.trim();
+
+      expect(hasContent).to.exist;
+      await assertScreenshot(
+        `nodes/${this.nodeName}/render/${testName}`,
+        getClip(flowNode)
+      );
+
+      // Step 2: Open node editor
+      const nodeEditor = await this.openNodeEditor(node, nodeUI);
+      await this.assertDialogScreenshot(
+        nodeEditor,
+        `nodes/${this.nodeName}/editor/${testName}`
+      );
+
+      // Step 3: Test round-trip conversion (simulates save workflow)
+      if (this.nodeConfig.toFormData && this.nodeConfig.fromFormData) {
+        const formData = this.nodeConfig.toFormData(node);
+        const convertedNode = this.nodeConfig.fromFormData(formData, node) as T;
+
+        // Validate the round trip worked
+        expect(convertedNode.uuid).to.equal(node.uuid);
+
+        // Validate the converted node has expected structure
+        expect(convertedNode).to.have.property('actions');
+        expect(convertedNode).to.have.property('exits');
+
+        expect(convertedNode).to.deep.equal(node);
+      }
+    });
+  }
+
+  /**
+   * Run basic property tests
+   */
+  testBasicProperties() {
+    it('has correct basic properties', () => {
+      expect(this.nodeConfig.type).to.be.a('string');
+
+      // Name is optional - only some node configs have it
+      if (this.nodeConfig.name) {
+        expect(this.nodeConfig.name).to.be.a('string');
+      }
+
+      // Color is optional
+      if (this.nodeConfig.color) {
+        expect(this.nodeConfig.color).to.be.a('string');
+      }
+
+      // toFormData and fromFormData are optional - only needed for complex data transformations
+      if (this.nodeConfig.toFormData) {
+        expect(this.nodeConfig.toFormData).to.be.a('function');
+      }
+      if (this.nodeConfig.fromFormData) {
+        expect(this.nodeConfig.fromFormData).to.be.a('function');
+      }
+
+      // Form configuration is optional
+      if (this.nodeConfig.form) {
+        expect(this.nodeConfig.form).to.be.an('object');
+      }
+
+      // Layout is optional
+      if (this.nodeConfig.layout) {
+        expect(this.nodeConfig.layout).to.be.an('array');
+      }
+
+      // Router config is optional
+      if (this.nodeConfig.router) {
+        expect(this.nodeConfig.router).to.be.an('object');
+        expect(this.nodeConfig.router.type).to.exist;
+      }
+
+      // Render function is optional
+      if (this.nodeConfig.render) {
+        expect(this.nodeConfig.render).to.be.a('function');
+      }
+    });
+  }
+}

package/test/actions/call_llm.test.ts

@@ -0,0 +1,137 @@
+import { expect } from '@open-wc/testing';
+import { call_llm } from '../../src/flow/actions/call_llm';
+import { CallLLM } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the call_llm action configuration.
+ */
+describe('call_llm action config', () => {
+  const helper = new ActionTest(call_llm, 'call_llm');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(call_llm.name).to.equal('Call AI');
+    });
+
+    it('has form configuration', () => {
+      expect(call_llm.form).to.exist;
+      expect(call_llm.form.llm).to.exist;
+      expect(call_llm.form.instructions).to.exist;
+      expect(call_llm.form.input).to.exist;
+    });
+
+    it('has layout configuration', () => {
+      expect(call_llm.layout).to.exist;
+      expect(call_llm.layout).to.deep.equal(['llm', 'input', 'instructions']);
+    });
+
+    it('has data transformation functions', () => {
+      expect(call_llm.toFormData).to.be.a('function');
+      expect(call_llm.fromFormData).to.be.a('function');
+    });
+  });
+
+  describe('data transformations', () => {
+    it('converts action to form data correctly', () => {
+      const action: CallLLM = {
+        uuid: 'test-llm-1',
+        type: 'call_llm',
+        input: '@input',
+        llm: { uuid: 'gpt-4', name: 'GPT 4.1' },
+        instructions: 'Translate to French',
+        result_name: 'translated_text'
+      };
+
+      const formData = call_llm.toFormData(action);
+
+      expect(formData.uuid).to.equal('test-llm-1');
+      expect(formData.llm).to.deep.equal([{ value: 'gpt-4', name: 'GPT 4.1' }]);
+      expect(formData.instructions).to.equal('Translate to French');
+      expect(formData.input).to.equal('@input');
+    });
+
+    it('converts form data to action correctly', () => {
+      const formData = {
+        uuid: 'test-llm-2',
+        llm: [{ value: 'gpt-5', name: 'GPT 5' }],
+        instructions: 'Summarize the following text',
+        input: '@input'
+      };
+
+      const action = call_llm.fromFormData(formData) as CallLLM;
+
+      expect(action.uuid).to.equal('test-llm-2');
+      expect(action.type).to.equal('call_llm');
+      expect(action.llm).to.deep.equal({ uuid: 'gpt-5', name: 'GPT 5' });
+      expect(action.instructions).to.equal('Summarize the following text');
+      expect(action.input).to.equal('@input');
+    });
+
+    it('handles empty form data', () => {
+      const formData = {
+        uuid: 'test-llm-3',
+        llm: [],
+        instructions: '',
+        input: ''
+      };
+
+      const action = call_llm.fromFormData(formData) as CallLLM;
+
+      expect(action.llm).to.deep.equal({ uuid: '', name: '' });
+      expect(action.instructions).to.equal('');
+      expect(action.input).to.equal('@input');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-4', name: 'GPT 4.1' },
+        instructions: 'Translate to French',
+        input: '@input'
+      } as CallLLM,
+      'translation-task'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-5', name: 'GPT 5' },
+        instructions:
+          'Analyze the sentiment of the following message and classify it as positive, negative, or neutral. Provide a brief explanation for your classification.',
+        input: '@input'
+      } as CallLLM,
+      'sentiment-analysis'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-4', name: 'GPT 4.1' },
+        instructions:
+          'Summarize the key points from the conversation above in bullet format.',
+        input: '@input'
+      } as CallLLM,
+      'summarization'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'call_llm',
+        llm: { uuid: 'gpt-5', name: 'GPT 5' },
+        instructions:
+          'Extract any contact information (phone numbers, email addresses) from the text and format them as a JSON object.',
+        input: '@input'
+      } as CallLLM,
+      'information-extraction'
+    );
+  });
+});

package/test/nodes/README.md

@@ -0,0 +1,78 @@
+# Node Configuration Tests
+
+This directory contains tests for node configurations using the `NodeHelper` testing framework.
+
+## Overview
+
+Similar to how the `ActionHelper` provides a uniform testing strategy for action configurations, the `NodeHelper` class provides a structured approach to testing node configurations. It handles:
+
+1. **Rendering Tests**: Verifies nodes render correctly in the flow editor
+2. **Editor Tests**: Verifies the node editor opens and displays correctly
+3. **Round-trip Conversion**: Tests form data conversion for nodes with `toFormData`/`fromFormData`
+4. **Screenshot Testing**: Captures visual screenshots for regression testing
+
+## Test Structure
+
+Each node test file follows this pattern:
+
+```typescript
+import { expect } from '@open-wc/testing';
+import { node_config } from '../../src/flow/nodes/node_config';
+import { Node } from '../../src/store/flow-definition';
+import { NodeTest } from '../NodeHelper';
+
+describe('node_config node config', () => {
+  const helper = new NodeTest(node_config, 'node_config');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    // Additional property tests...
+  });
+
+  describe('node scenarios', () => {
+    helper.testNode(nodeData, nodeUI, 'test-name');
+
+    // More scenarios...
+  });
+
+  // Optional: data transformation tests for nodes with form configuration
+  describe('data transformation', () => {
+    // Round-trip conversion tests...
+  });
+});
+```
+
+## Node Types Covered
+
+### Simple Nodes
+
+- `wait_for_digits`: Basic node with no form configuration
+- `wait_for_audio`, `wait_for_image`, etc.: Similar wait nodes
+
+### Form-Configured Nodes
+
+- `wait_for_response`: Node with form fields and data transformation
+- `split_by_llm_categorize`: Complex node with form configuration
+
+### Router-Based Nodes
+
+- `split_by_random`: Random distribution node
+- Other split nodes with router configurations
+
+## Screenshots
+
+Screenshots are automatically generated and stored in:
+
+- `screenshots/nodes/{node_name}/render/{test_name}.png` - Flow editor rendering
+- `screenshots/nodes/{node_name}/editor/{test_name}.png` - Node editor dialog
+
+## Running Tests
+
+```bash
+# Run all node tests
+yarn test test/nodes/*.test.ts --no-watch
+
+# Run specific node test
+yarn test test/nodes/wait_for_response.test.ts --no-watch
+```