@nyaruka/temba-components 0.129.3 → 0.129.5

package/test/ActionHelper.ts

@@ -0,0 +1,142 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit';
+import { Action, Node } from '../src/store/flow-definition';
+import { assertScreenshot, getClip } from './utils.test';
+import { Editor } from '../src/flow/Editor';
+import '../temba-modules';
+
+/**
+ * Generic action test framework
+ * Tests the complete action lifecycle: render → edit → save → validate
+ */
+export class ActionTest<T extends Action> {
+  constructor(private actionConfig: any, private actionName: string) {}
+
+  /**
+   * Renders an action in the flow editor and returns the flow node
+   */
+  private async renderAction(action: T): Promise<HTMLElement> {
+    const node: Node = {
+      uuid: 'test-node',
+      actions: [action],
+      exits: []
+    };
+
+    const mockDefinition = {
+      nodes: [node],
+      _ui: {
+        nodes: {
+          [node.uuid]: {
+            type: 'execute_actions',
+            position: { left: 50, top: 50 }
+          }
+        }
+      }
+    };
+
+    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 an action and returns the editor element
+   */
+  private async openNodeEditor(action: T): Promise<HTMLElement> {
+    const nodeEditor = (await fixture(html`
+      <temba-node-editor .action=${action} .isOpen=${true}></temba-node-editor>
+    `)) as HTMLElement;
+
+    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 an action configuration
+   * 1. Renders the action in a flow node (with screenshot)
+   * 2. Opens the node editor (with screenshot)
+   * 3. Simulates save and validates round-trip conversion
+   */
+  async testAction(action: T, testName: string) {
+    it(`${testName}`, async () => {
+      // Step 1: Render action in flow node
+      const flowNode = await this.renderAction(action);
+      expect(flowNode.querySelector('.body')).to.exist;
+      await assertScreenshot(
+        `actions/${this.actionName}/render/${testName}`,
+        getClip(flowNode)
+      );
+
+      // Step 2: Open node editor
+      const nodeEditor = await this.openNodeEditor(action);
+      await this.assertDialogScreenshot(
+        nodeEditor,
+        `actions/${this.actionName}/editor/${testName}`
+      );
+
+      // Step 3: Test round-trip conversion (simulates save workflow)
+      if (this.actionConfig.toFormData && this.actionConfig.fromFormData) {
+        const formData = this.actionConfig.toFormData(action);
+        const convertedAction = this.actionConfig.fromFormData(formData) as T;
+
+        // Validate the round trip worked
+        expect(convertedAction.uuid).to.equal(action.uuid);
+        expect(convertedAction.type).to.equal(action.type);
+
+        // Validate the converted action
+        if (this.actionConfig.validate) {
+          const validation = this.actionConfig.validate(convertedAction);
+          expect(validation.valid).to.be.true;
+        }
+      }
+    });
+  }
+
+  /**
+   * Run basic property tests
+   */
+  testBasicProperties() {
+    it('has correct basic properties', () => {
+      expect(this.actionConfig.name).to.be.a('string');
+      expect(this.actionConfig.color).to.exist;
+
+      // toFormData and fromFormData are optional - only needed for complex data transformations
+      if (this.actionConfig.toFormData) {
+        expect(this.actionConfig.toFormData).to.be.a('function');
+      }
+      if (this.actionConfig.fromFormData) {
+        expect(this.actionConfig.fromFormData).to.be.a('function');
+      }
+
+      if (this.actionConfig.validate) {
+        expect(this.actionConfig.validate).to.be.a('function');
+      }
+    });
+  }
+}

package/test/actions/add_contact_groups.test.ts

@@ -0,0 +1,89 @@
+import { expect } from '@open-wc/testing';
+import { add_contact_groups } from '../../src/flow/actions/add_contact_groups';
+import { AddToGroup } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the add_contact_groups action configuration.
+ */
+describe('add_contact_groups action config', () => {
+  const helper = new ActionTest(add_contact_groups, 'add_contact_groups');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(add_contact_groups.name).to.equal('Add to Group');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'add_contact_groups',
+        groups: [{ uuid: 'group-1', name: 'VIP Customers' }]
+      } as AddToGroup,
+      'single-group'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'add_contact_groups',
+        groups: [
+          { uuid: 'group-1', name: 'VIP Customers' },
+          { uuid: 'group-2', name: 'Newsletter Subscribers' },
+          { uuid: 'group-3', name: 'Beta Testers' }
+        ]
+      } as AddToGroup,
+      'multiple-groups'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'add_contact_groups',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'Very Long Group Name That Might Wrap to Multiple Lines'
+          },
+          {
+            uuid: 'group-2',
+            name: 'Another Extremely Long Group Name for Testing Layout'
+          }
+        ]
+      } as AddToGroup,
+      'long-group-names'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'add_contact_groups',
+        groups: [
+          { uuid: 'group-1', name: 'Sales Team' },
+          { uuid: 'group-2', name: 'Marketing Team' },
+          { uuid: 'group-3', name: 'Support Team' },
+          { uuid: 'group-4', name: 'Development Team' },
+          { uuid: 'group-5', name: 'QA Team' }
+        ]
+      } as AddToGroup,
+      'many-groups'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-5',
+        type: 'add_contact_groups',
+        groups: [
+          { uuid: 'group-1', name: 'Customers - Premium Plan (Monthly)' },
+          { uuid: 'group-2', name: 'Customers - Enterprise Plan (Annual)' },
+          { uuid: 'group-3', name: 'Trial Users - 30 Day Free Trial' }
+        ]
+      } as AddToGroup,
+      'descriptive-group-names'
+    );
+  });
+});

package/test/actions/remove_contact_groups.test.ts

@@ -0,0 +1,265 @@
+import { expect } from '@open-wc/testing';
+import { remove_contact_groups } from '../../src/flow/actions/remove_contact_groups';
+import { RemoveFromGroup } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the remove_contact_groups action configuration.
+ */
+describe('remove_contact_groups action config', () => {
+  const helper = new ActionTest(remove_contact_groups, 'remove_contact_groups');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(remove_contact_groups.name).to.equal('Remove from Group');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'remove_contact_groups',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'VIP Customers',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 150
+          }
+        ],
+        all_groups: false
+      } as RemoveFromGroup,
+      'single-group'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'remove_contact_groups',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'Newsletter Subscribers',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 1250
+          },
+          {
+            uuid: 'group-2',
+            name: 'Beta Testers',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 45
+          },
+          {
+            uuid: 'group-3',
+            name: 'Inactive Users',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 300
+          }
+        ],
+        all_groups: false
+      } as RemoveFromGroup,
+      'multiple-groups'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'remove_contact_groups',
+        groups: [],
+        all_groups: true
+      } as RemoveFromGroup,
+      'remove-from-all-groups'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'remove_contact_groups',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'Customers - Premium Subscription (Annual Billing)',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 89
+          },
+          {
+            uuid: 'group-2',
+            name: 'Users - Trial Period Expired (30+ Days)',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 234
+          }
+        ],
+        all_groups: false
+      } as RemoveFromGroup,
+      'long-descriptive-group-names'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-5',
+        type: 'remove_contact_groups',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'Sales Team',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 12
+          },
+          {
+            uuid: 'group-2',
+            name: 'Marketing Team',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 8
+          },
+          {
+            uuid: 'group-3',
+            name: 'Support Team',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 15
+          },
+          {
+            uuid: 'group-4',
+            name: 'Development Team',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 25
+          },
+          {
+            uuid: 'group-5',
+            name: 'QA Team',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 6
+          },
+          {
+            uuid: 'group-6',
+            name: 'Management Team',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 4
+          }
+        ],
+        all_groups: false
+      } as RemoveFromGroup,
+      'many-groups'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-6',
+        type: 'remove_contact_groups',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'Unsubscribed Users',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 567
+          },
+          {
+            uuid: 'group-2',
+            name: 'Bounced Email Addresses',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 89
+          }
+        ],
+        all_groups: false
+      } as RemoveFromGroup,
+      'cleanup-groups'
+    );
+  });
+
+  describe('validation edge cases', () => {
+    it('fails validation when no groups selected and all_groups is false', () => {
+      const action: RemoveFromGroup = {
+        uuid: 'test-action',
+        type: 'remove_contact_groups',
+        groups: [],
+        all_groups: false
+      };
+
+      const result = remove_contact_groups.validate(action);
+      expect(result.valid).to.be.false;
+      expect(result.errors.groups).to.equal(
+        'At least one group must be selected or check "Remove from All Groups"'
+      );
+    });
+
+    it('fails validation when groups is undefined and all_groups is false', () => {
+      const action: RemoveFromGroup = {
+        uuid: 'test-action',
+        type: 'remove_contact_groups',
+        groups: undefined as any,
+        all_groups: false
+      };
+
+      const result = remove_contact_groups.validate(action);
+      expect(result.valid).to.be.false;
+      expect(result.errors.groups).to.equal(
+        'At least one group must be selected or check "Remove from All Groups"'
+      );
+    });
+
+    it('passes validation when all_groups is true even with empty groups', () => {
+      const action: RemoveFromGroup = {
+        uuid: 'test-action',
+        type: 'remove_contact_groups',
+        groups: [],
+        all_groups: true
+      };
+
+      const result = remove_contact_groups.validate(action);
+      expect(result.valid).to.be.true;
+      expect(Object.keys(result.errors)).to.have.length(0);
+    });
+
+    it('passes validation when groups are provided and all_groups is false', () => {
+      const action: RemoveFromGroup = {
+        uuid: 'test-action',
+        type: 'remove_contact_groups',
+        groups: [
+          {
+            uuid: 'group-1',
+            name: 'Test Group',
+            status: 'ready',
+            system: false,
+            query: '',
+            count: 10
+          }
+        ],
+        all_groups: false
+      };
+
+      const result = remove_contact_groups.validate(action);
+      expect(result.valid).to.be.true;
+      expect(Object.keys(result.errors)).to.have.length(0);
+    });
+  });
+});

package/test/actions/send_email.test.ts

@@ -0,0 +1,214 @@
+import { expect } from '@open-wc/testing';
+import { send_email } from '../../src/flow/actions/send_email';
+import { SendEmail } from '../../src/store/flow-definition';
+import { ActionTest } from '../ActionHelper';
+
+/**
+ * Test suite for the send_email action configuration.
+ */
+describe('send_email action config', () => {
+  const helper = new ActionTest(send_email, 'send_email');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(send_email.name).to.equal('Send Email');
+    });
+  });
+
+  describe('action scenarios', () => {
+    helper.testAction(
+      {
+        uuid: 'test-action-1',
+        type: 'send_email',
+        addresses: ['user@example.com'],
+        subject: 'Welcome!',
+        body: 'Thank you for signing up.'
+      } as SendEmail,
+      'simple-email'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-2',
+        type: 'send_email',
+        addresses: [
+          'user1@example.com',
+          'user2@example.com',
+          'user3@example.com'
+        ],
+        subject: 'Multiple Recipients',
+        body: 'This email is sent to multiple recipients.'
+      } as SendEmail,
+      'multiple-recipients'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-3',
+        type: 'send_email',
+        addresses: ['admin@company.com'],
+        subject: 'Multi-line Email Content',
+        body: 'Dear User,\n\nThis is a multi-line email body.\n\nIt contains multiple paragraphs and line breaks.\n\nBest regards,\nThe Team'
+      } as SendEmail,
+      'multiline-body'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-4',
+        type: 'send_email',
+        addresses: ['support@company.com'],
+        subject: 'Email with expressions',
+        body: 'Hello @contact.name,\n\nYour order @run.results.order_id has been processed.\n\nThank you!'
+      } as SendEmail,
+      'with-expressions'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-5',
+        type: 'send_email',
+        addresses: ['notification@company.com'],
+        subject:
+          'Very Long Subject Line That Could Potentially Exceed Normal Length Limits To Test Subject Field Handling',
+        body: 'Short body content.'
+      } as SendEmail,
+      'long-subject'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-6',
+        type: 'send_email',
+        addresses: [
+          'customer.service@department.company.com',
+          'technical.support@department.company.com',
+          'billing.inquiries@department.company.com'
+        ],
+        subject: 'Customer Support Escalation',
+        body: 'Customer Name: @contact.name\nTicket ID: @run.results.ticket_id\n\nIssue Description:\n@run.results.issue_description\n\nPriority: High\nCategory: @run.results.category\n\nPlease respond within 2 hours.'
+      } as SendEmail,
+      'complex-business-email'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-7',
+        type: 'send_email',
+        addresses: ['alerts@company.com'],
+        subject: '',
+        body: 'Email with empty subject'
+      } as SendEmail,
+      'empty-subject'
+    );
+
+    helper.testAction(
+      {
+        uuid: 'test-action-8',
+        type: 'send_email',
+        addresses: ['test@company.com'],
+        subject: 'Empty body test',
+        body: ''
+      } as SendEmail,
+      'empty-body'
+    );
+  });
+
+  describe('validation edge cases', () => {
+    it('fails validation for empty addresses array', () => {
+      const action: SendEmail = {
+        uuid: 'test-action',
+        type: 'send_email',
+        addresses: [],
+        subject: 'Test Subject',
+        body: 'Test Body'
+      };
+
+      const result = send_email.validate(action);
+      expect(result.valid).to.be.false;
+      expect(result.errors.addresses).to.equal(
+        'At least one recipient email address is required'
+      );
+    });
+
+    it('fails validation for null addresses', () => {
+      const action: SendEmail = {
+        uuid: 'test-action',
+        type: 'send_email',
+        addresses: null as any,
+        subject: 'Test Subject',
+        body: 'Test Body'
+      };
+
+      const result = send_email.validate(action);
+      expect(result.valid).to.be.false;
+      expect(result.errors.addresses).to.equal(
+        'At least one recipient email address is required'
+      );
+    });
+
+    it('fails validation for undefined addresses', () => {
+      const action: SendEmail = {
+        uuid: 'test-action',
+        type: 'send_email',
+        addresses: undefined as any,
+        subject: 'Test Subject',
+        body: 'Test Body'
+      };
+
+      const result = send_email.validate(action);
+      expect(result.valid).to.be.false;
+      expect(result.errors.addresses).to.equal(
+        'At least one recipient email address is required'
+      );
+    });
+
+    it('passes validation with valid email addresses', () => {
+      const action: SendEmail = {
+        uuid: 'test-action',
+        type: 'send_email',
+        addresses: ['valid@example.com'],
+        subject: 'Test Subject',
+        body: 'Test Body'
+      };
+
+      const result = send_email.validate(action);
+      expect(result.valid).to.be.true;
+      expect(Object.keys(result.errors)).to.have.length(0);
+    });
+
+    it('passes validation with multiple email addresses', () => {
+      const action: SendEmail = {
+        uuid: 'test-action',
+        type: 'send_email',
+        addresses: [
+          'user1@example.com',
+          'user2@example.com',
+          'user3@example.com'
+        ],
+        subject: 'Test Subject',
+        body: 'Test Body'
+      };
+
+      const result = send_email.validate(action);
+      expect(result.valid).to.be.true;
+      expect(Object.keys(result.errors)).to.have.length(0);
+    });
+
+    it('passes validation with empty subject and body', () => {
+      const action: SendEmail = {
+        uuid: 'test-action',
+        type: 'send_email',
+        addresses: ['test@example.com'],
+        subject: '',
+        body: ''
+      };
+
+      const result = send_email.validate(action);
+      expect(result.valid).to.be.true;
+      expect(Object.keys(result.errors)).to.have.length(0);
+    });
+  });
+});