@nyaruka/temba-components 0.130.4 → 0.130.5

package/test/nodes/split_by_groups.test.ts

@@ -0,0 +1,165 @@
+import { expect } from '@open-wc/testing';
+import { split_by_groups } from '../../src/flow/nodes/split_by_groups';
+import { Node } from '../../src/store/flow-definition.d';
+
+describe('temba-split-by-groups', () => {
+  it('should transform from flow definition to form data correctly', () => {
+    const node: Node = {
+      uuid: 'test-node-uuid',
+      actions: [],
+      router: {
+        type: 'switch',
+        cases: [
+          {
+            uuid: 'case-1',
+            type: 'has_group',
+            arguments: ['group-uuid-1', 'Group 1'],
+            category_uuid: 'cat-1'
+          },
+          {
+            uuid: 'case-2',
+            type: 'has_group',
+            arguments: ['group-uuid-2', 'Group 2'],
+            category_uuid: 'cat-2'
+          }
+        ],
+        categories: [
+          { uuid: 'cat-1', name: 'Group 1', exit_uuid: 'exit-1' },
+          { uuid: 'cat-2', name: 'Group 2', exit_uuid: 'exit-2' },
+          { uuid: 'cat-other', name: 'Other', exit_uuid: 'exit-other' }
+        ],
+        default_category_uuid: 'cat-other',
+        operand: '@contact.groups',
+        result_name: ''
+      },
+      exits: [
+        { uuid: 'exit-1', destination_uuid: null },
+        { uuid: 'exit-2', destination_uuid: null },
+        { uuid: 'exit-other', destination_uuid: null }
+      ]
+    };
+
+    const formData = split_by_groups.toFormData!(node);
+
+    expect(formData.uuid).to.equal('test-node-uuid');
+    expect(formData.groups).to.have.lengthOf(2);
+    expect(formData.groups[0]).to.deep.equal({
+      uuid: 'group-uuid-1',
+      name: 'Group 1'
+    });
+    expect(formData.groups[1]).to.deep.equal({
+      uuid: 'group-uuid-2',
+      name: 'Group 2'
+    });
+  });
+
+  it('should transform from form data to flow definition correctly', () => {
+    const originalNode: Node = {
+      uuid: 'test-node-uuid',
+      actions: [],
+      exits: []
+    };
+
+    const formData = {
+      uuid: 'test-node-uuid',
+      groups: [
+        { uuid: 'group-uuid-1', name: 'Group 1' },
+        { uuid: 'group-uuid-2', name: 'Group 2' }
+      ]
+    };
+
+    const resultNode = split_by_groups.fromFormData!(formData, originalNode);
+
+    expect(resultNode.uuid).to.equal('test-node-uuid');
+    expect(resultNode.router!.type).to.equal('switch');
+    expect(resultNode.router!.operand).to.equal('@contact.groups');
+    expect(resultNode.router!.cases).to.have.lengthOf(2);
+    expect(resultNode.router!.categories).to.have.lengthOf(3); // 2 groups + Other
+    expect(resultNode.exits).to.have.lengthOf(3); // 2 groups + Other
+
+    // Check first group case
+    const case1 = resultNode.router!.cases![0];
+    expect(case1.type).to.equal('has_group');
+    expect(case1.arguments).to.deep.equal(['group-uuid-1', 'Group 1']);
+
+    // Check that "Other" category exists
+    const otherCategory = resultNode.router!.categories!.find(
+      (cat) => cat.name === 'Other'
+    );
+    expect(otherCategory).to.exist;
+    expect(resultNode.router!.default_category_uuid).to.equal(
+      otherCategory!.uuid
+    );
+  });
+
+  it('should validate form data correctly', () => {
+    // Valid form data
+    const validData = {
+      groups: [{ uuid: 'group-uuid-1', name: 'Group 1' }]
+    };
+
+    const validResult = split_by_groups.validate!(validData);
+    expect(validResult.valid).to.be.true;
+    expect(Object.keys(validResult.errors)).to.have.lengthOf(0);
+
+    // Invalid form data - no groups
+    const invalidData = {
+      groups: []
+    };
+
+    const invalidResult = split_by_groups.validate!(invalidData);
+    expect(invalidResult.valid).to.be.false;
+    expect(invalidResult.errors.groups).to.equal(
+      'At least one group is required'
+    );
+
+    // Invalid form data - missing groups
+    const missingGroupsData = {};
+
+    const missingResult = split_by_groups.validate!(missingGroupsData);
+    expect(missingResult.valid).to.be.false;
+    expect(missingResult.errors.groups).to.equal(
+      'At least one group is required'
+    );
+  });
+
+  it('should handle arbitrary groups correctly', () => {
+    const originalNode: Node = {
+      uuid: 'test-node-uuid',
+      actions: [],
+      exits: []
+    };
+
+    const formData = {
+      uuid: 'test-node-uuid',
+      groups: [
+        { uuid: 'group-uuid-1', name: 'Existing Group' },
+        { name: 'New Group', arbitrary: true }
+      ]
+    };
+
+    const resultNode = split_by_groups.fromFormData!(formData, originalNode);
+
+    expect(resultNode.router!.cases).to.have.lengthOf(2);
+
+    // Check existing group
+    const existingGroupCase = resultNode.router!.cases!.find(
+      (c) => c.arguments![0] === 'group-uuid-1'
+    );
+    expect(existingGroupCase).to.exist;
+    expect(existingGroupCase!.arguments).to.deep.equal([
+      'group-uuid-1',
+      'Existing Group'
+    ]);
+
+    // Check arbitrary group (should have generated UUID)
+    const arbitraryGroupCase = resultNode.router!.cases!.find(
+      (c) => c.arguments![1] === 'New Group'
+    );
+    expect(arbitraryGroupCase).to.exist;
+    expect(arbitraryGroupCase!.arguments![0]).to.match(
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
+    );
+    expect(arbitraryGroupCase!.arguments![1]).to.equal('New Group');
+  });
+});

package/test/nodes/wait_for_response.test.ts

@@ -755,5 +755,187 @@ describe('wait_for_response node config', () => {
       );
       expect(secondCases).to.have.length(1);
     });
+
+    it('preserves category UUIDs when rules are reordered', () => {
+      const originalNode = {
+        uuid: 'test-node',
+        actions: [],
+        router: {
+          type: 'switch' as const,
+          operand: '@input.text',
+          categories: [
+            {
+              uuid: 'yes-category-uuid',
+              name: 'Yes',
+              exit_uuid: 'yes-exit-uuid'
+            },
+            {
+              uuid: 'no-category-uuid',
+              name: 'No',
+              exit_uuid: 'no-exit-uuid'
+            },
+            {
+              uuid: 'other-category-uuid',
+              name: 'Other',
+              exit_uuid: 'other-exit-uuid'
+            }
+          ],
+          cases: [
+            {
+              uuid: 'yes-case-uuid',
+              type: 'has_phrase',
+              arguments: ['yes'],
+              category_uuid: 'yes-category-uuid'
+            },
+            {
+              uuid: 'no-case-uuid',
+              type: 'has_phrase',
+              arguments: ['no'],
+              category_uuid: 'no-category-uuid'
+            }
+          ]
+        },
+        exits: [
+          { uuid: 'yes-exit-uuid', destination_uuid: null },
+          { uuid: 'no-exit-uuid', destination_uuid: null },
+          { uuid: 'other-exit-uuid', destination_uuid: null }
+        ]
+      };
+
+      // Reorder the rules - put "No" first, "Yes" second
+      const formData = {
+        uuid: 'test-node',
+        result_name: 'response',
+        rules: [
+          {
+            operator: { value: 'has_phrase', name: 'contains phrase' },
+            value1: 'no',
+            category: 'No' // This rule was originally second
+          },
+          {
+            operator: { value: 'has_phrase', name: 'contains phrase' },
+            value1: 'yes',
+            category: 'Yes' // This rule was originally first
+          }
+        ]
+      };
+
+      const result = wait_for_response.fromFormData!(formData, originalNode);
+
+      // Verify that categories keep their original UUIDs despite reordering
+      expect(result.router?.categories).to.have.length(3); // Two rules + Other
+
+      const yesCategory = result.router!.categories.find(
+        (cat) => cat.name === 'Yes'
+      );
+      const noCategory = result.router!.categories.find(
+        (cat) => cat.name === 'No'
+      );
+      const otherCategory = result.router!.categories.find(
+        (cat) => cat.name === 'Other'
+      );
+
+      // Categories should preserve their original UUIDs
+      expect(yesCategory?.uuid).to.equal('yes-category-uuid');
+      expect(yesCategory?.exit_uuid).to.equal('yes-exit-uuid');
+
+      expect(noCategory?.uuid).to.equal('no-category-uuid');
+      expect(noCategory?.exit_uuid).to.equal('no-exit-uuid');
+
+      expect(otherCategory?.uuid).to.equal('other-category-uuid');
+      expect(otherCategory?.exit_uuid).to.equal('other-exit-uuid');
+
+      // Verify the cases are created in the new order but reference correct categories
+      expect(result.router?.cases).to.have.length(2);
+
+      const firstCase = result.router!.cases[0];
+      const secondCase = result.router!.cases[1];
+
+      // First case should be "no" and reference the No category
+      expect(firstCase.arguments).to.deep.equal(['no']);
+      expect(firstCase.category_uuid).to.equal('no-category-uuid');
+
+      // Second case should be "yes" and reference the Yes category
+      expect(secondCase.arguments).to.deep.equal(['yes']);
+      expect(secondCase.category_uuid).to.equal('yes-category-uuid');
+    });
+
+    it('preserves rule order when rules have duplicate categories', () => {
+      const formData = {
+        uuid: 'test-node',
+        result_name: 'response',
+        rules: [
+          {
+            operator: { value: 'has_phrase', name: 'contains phrase' },
+            value1: 'first',
+            category: 'Shared'
+          },
+          {
+            operator: { value: 'has_phrase', name: 'contains phrase' },
+            value1: 'middle',
+            category: 'Different'
+          },
+          {
+            operator: { value: 'has_phrase', name: 'contains phrase' },
+            value1: 'last',
+            category: 'Shared' // Same as first rule
+          }
+        ]
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        router: {
+          type: 'switch',
+          result_name: 'response',
+          categories: [],
+          cases: []
+        },
+        exits: []
+      };
+
+      const result = wait_for_response.fromFormData!(formData, originalNode);
+
+      // Should have 3 cases in the same order as the input rules
+      expect(result.router?.cases).to.have.length(3);
+
+      const cases = result.router!.cases;
+
+      // First case should be "first"
+      expect(cases[0].arguments).to.deep.equal(['first']);
+      expect(cases[0].type).to.equal('has_phrase');
+
+      // Second case should be "middle"
+      expect(cases[1].arguments).to.deep.equal(['middle']);
+      expect(cases[1].type).to.equal('has_phrase');
+
+      // Third case should be "last"
+      expect(cases[2].arguments).to.deep.equal(['last']);
+      expect(cases[2].type).to.equal('has_phrase');
+
+      // Find the shared category
+      const sharedCategory = result.router!.categories.find(
+        (cat) => cat.name === 'Shared'
+      );
+      const differentCategory = result.router!.categories.find(
+        (cat) => cat.name === 'Different'
+      );
+
+      expect(sharedCategory).to.exist;
+      expect(differentCategory).to.exist;
+
+      // First and third cases should reference the same "Shared" category
+      expect(cases[0].category_uuid).to.equal(sharedCategory!.uuid);
+      expect(cases[2].category_uuid).to.equal(sharedCategory!.uuid);
+
+      // Second case should reference the "Different" category
+      expect(cases[1].category_uuid).to.equal(differentCategory!.uuid);
+
+      // Should have 3 categories: Shared, Different, Other
+      expect(result.router?.categories).to.have.length(3);
+      const categoryNames = result.router!.categories.map((cat) => cat.name);
+      expect(categoryNames).to.deep.equal(['Shared', 'Different', 'Other']);
+    });
   });
 });

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

@@ -150,5 +150,74 @@ describe('Field Configuration System', () => {
       // Expects 3 items: 2 initial items + 1 auto-generated empty item
       expect(items?.length).to.equal(3);
     });
+
+    it('should render with sortable list when sortable=true', async () => {
+      const itemConfig = {
+        operator: { type: 'text', label: 'Operator' },
+        value: { type: 'text', label: 'Value' }
+      };
+
+      const initialValue = [
+        { operator: 'equals', value: 'test' },
+        { operator: 'contains', value: 'example' }
+      ];
+
+      const el = await fixture(html`
+        <temba-array-editor
+          .value=${initialValue}
+          .itemConfig=${itemConfig}
+          .sortable=${true}
+          itemLabel="Rule"
+        ></temba-array-editor>
+      `);
+
+      await (el as any).updateComplete;
+
+      expect(el).to.exist;
+
+      // Should have a sortable list component
+      const sortableList = el.shadowRoot?.querySelector('temba-sortable-list');
+      expect(sortableList).to.exist;
+
+      // Should have sortable items with proper classes and IDs
+      const sortableItems = el.shadowRoot?.querySelectorAll('.sortable');
+      expect(sortableItems?.length).to.equal(2); // Only non-empty items should be sortable
+
+      // Each sortable item should have a unique ID
+      const firstItem = sortableItems?.[0] as HTMLElement;
+      const secondItem = sortableItems?.[1] as HTMLElement;
+      expect(firstItem?.id).to.equal('array-item-0');
+      expect(secondItem?.id).to.equal('array-item-1');
+    });
+
+    it('should not render sortable list when sortable=false', async () => {
+      const itemConfig = {
+        operator: { type: 'text', label: 'Operator' },
+        value: { type: 'text', label: 'Value' }
+      };
+
+      const initialValue = [{ operator: 'equals', value: 'test' }];
+
+      const el = await fixture(html`
+        <temba-array-editor
+          .value=${initialValue}
+          .itemConfig=${itemConfig}
+          .sortable=${false}
+          itemLabel="Rule"
+        ></temba-array-editor>
+      `);
+
+      await (el as any).updateComplete;
+
+      expect(el).to.exist;
+
+      // Should not have a sortable list component
+      const sortableList = el.shadowRoot?.querySelector('temba-sortable-list');
+      expect(sortableList).to.not.exist;
+
+      // Should have regular list container instead
+      const listContainer = el.shadowRoot?.querySelector('.list-items');
+      expect(listContainer).to.exist;
+    });
   });
 });