@nyaruka/temba-components 0.139.0 → 0.141.0

package/test/nodes/wait_for_menu.test.ts

@@ -0,0 +1,383 @@
+import { expect } from '@open-wc/testing';
+import { wait_for_menu } from '../../src/flow/nodes/wait_for_menu';
+import { Node } from '../../src/store/flow-definition';
+import { NodeTest } from '../NodeHelper';
+
+/**
+ * Test suite for the wait_for_menu node configuration.
+ */
+describe('wait_for_menu node config', () => {
+  const helper = new NodeTest(wait_for_menu, 'wait_for_menu');
+
+  describe('basic properties', () => {
+    helper.testBasicProperties();
+
+    it('has correct name', () => {
+      expect(wait_for_menu.name).to.equal('Wait for Menu');
+    });
+
+    it('has correct type', () => {
+      expect(wait_for_menu.type).to.equal('wait_for_menu');
+    });
+
+    it('is voice-only', () => {
+      expect(wait_for_menu.flowTypes).to.deep.equal(['voice']);
+    });
+
+    it('has form with 10 digit fields plus result_name', () => {
+      expect(wait_for_menu.form).to.exist;
+      for (const d of ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']) {
+        expect(wait_for_menu.form![`digit_${d}`]).to.exist;
+      }
+      expect(wait_for_menu.form!.result_name).to.exist;
+    });
+  });
+
+  describe('node scenarios', () => {
+    it('renders menu with filled digits', async () => {
+      await helper.testNode(
+        {
+          uuid: 'test-menu-node-1',
+          actions: [],
+          router: {
+            type: 'switch',
+            operand: '@input.text',
+            wait: {
+              type: 'msg',
+              hint: { type: 'digits', count: 1 }
+            },
+            result_name: 'menu_choice',
+            default_category_uuid: 'other-cat',
+            cases: [
+              {
+                uuid: 'case-1',
+                type: 'has_number_eq',
+                arguments: ['1'],
+                category_uuid: 'sales-cat'
+              },
+              {
+                uuid: 'case-2',
+                type: 'has_number_eq',
+                arguments: ['2'],
+                category_uuid: 'support-cat'
+              },
+              {
+                uuid: 'case-0',
+                type: 'has_number_eq',
+                arguments: ['0'],
+                category_uuid: 'operator-cat'
+              }
+            ],
+            categories: [
+              {
+                uuid: 'sales-cat',
+                name: 'Sales',
+                exit_uuid: 'sales-exit'
+              },
+              {
+                uuid: 'support-cat',
+                name: 'Support',
+                exit_uuid: 'support-exit'
+              },
+              {
+                uuid: 'operator-cat',
+                name: 'Operator',
+                exit_uuid: 'operator-exit'
+              },
+              {
+                uuid: 'other-cat',
+                name: 'Other',
+                exit_uuid: 'other-exit'
+              }
+            ]
+          },
+          exits: [
+            { uuid: 'sales-exit', destination_uuid: null },
+            { uuid: 'support-exit', destination_uuid: null },
+            { uuid: 'operator-exit', destination_uuid: null },
+            { uuid: 'other-exit', destination_uuid: null }
+          ]
+        } as Node,
+        { type: 'wait_for_menu' },
+        'menu-with-digits'
+      );
+    });
+  });
+
+  describe('data transformation', () => {
+    it('converts node to form data', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [],
+        router: {
+          type: 'switch',
+          result_name: 'menu',
+          categories: [
+            {
+              uuid: 'sales-cat',
+              name: 'Sales',
+              exit_uuid: 'sales-exit'
+            },
+            {
+              uuid: 'support-cat',
+              name: 'Support',
+              exit_uuid: 'support-exit'
+            },
+            {
+              uuid: 'other-cat',
+              name: 'Other',
+              exit_uuid: 'other-exit'
+            }
+          ],
+          cases: [
+            {
+              uuid: 'case-1',
+              type: 'has_number_eq',
+              arguments: ['1'],
+              category_uuid: 'sales-cat'
+            },
+            {
+              uuid: 'case-2',
+              type: 'has_number_eq',
+              arguments: ['2'],
+              category_uuid: 'support-cat'
+            }
+          ]
+        },
+        exits: [
+          { uuid: 'sales-exit', destination_uuid: null },
+          { uuid: 'support-exit', destination_uuid: null },
+          { uuid: 'other-exit', destination_uuid: null }
+        ]
+      };
+
+      const formData = wait_for_menu.toFormData!(node);
+
+      expect(formData.uuid).to.equal('test-node');
+      expect(formData.digit_1).to.equal('Sales');
+      expect(formData.digit_2).to.equal('Support');
+      expect(formData.digit_3).to.equal('');
+      expect(formData.digit_0).to.equal('');
+      expect(formData.result_name).to.equal('menu');
+    });
+
+    it('handles empty menu', () => {
+      const node: Node = {
+        uuid: 'test-node',
+        actions: [],
+        router: {
+          type: 'switch',
+          categories: []
+        },
+        exits: []
+      };
+
+      const formData = wait_for_menu.toFormData!(node);
+
+      for (const d of ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']) {
+        expect(formData[`digit_${d}`]).to.equal('');
+      }
+    });
+
+    it('creates node from form data with filled digits', () => {
+      const formData = {
+        uuid: 'test-node',
+        digit_1: 'Sales',
+        digit_2: 'Support',
+        digit_3: '',
+        digit_4: '',
+        digit_5: '',
+        digit_6: '',
+        digit_7: '',
+        digit_8: '',
+        digit_9: '',
+        digit_0: 'Operator',
+        result_name: 'menu_choice'
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: [],
+        router: { type: 'switch', categories: [] }
+      };
+
+      const result = wait_for_menu.fromFormData!(formData, originalNode);
+
+      // Should have 4 categories: Sales, Support, Operator, Other
+      expect(result.router?.categories).to.have.length(4);
+      const names = result.router!.categories.map((c) => c.name);
+      expect(names).to.deep.equal(['Sales', 'Support', 'Operator', 'Other']);
+
+      // Should have 3 cases
+      expect(result.router?.cases).to.have.length(3);
+      expect(result.router!.cases[0].arguments).to.deep.equal(['1']);
+      expect(result.router!.cases[1].arguments).to.deep.equal(['2']);
+      expect(result.router!.cases[2].arguments).to.deep.equal(['0']);
+
+      // Check wait config
+      expect(result.router?.wait?.type).to.equal('msg');
+      expect(result.router?.wait?.hint?.type).to.equal('digits');
+      expect(result.router?.wait?.hint?.count).to.equal(1);
+
+      // Check result name
+      expect(result.router?.result_name).to.equal('menu_choice');
+
+      // 4 exits
+      expect(result.exits).to.have.length(4);
+    });
+
+    it('merges duplicate category names', () => {
+      const formData = {
+        uuid: 'test-node',
+        digit_1: 'Sales',
+        digit_2: 'Sales', // same category name
+        digit_3: '',
+        digit_4: '',
+        digit_5: '',
+        digit_6: '',
+        digit_7: '',
+        digit_8: '',
+        digit_9: '',
+        digit_0: '',
+        result_name: ''
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: [],
+        router: { type: 'switch', categories: [] }
+      };
+
+      const result = wait_for_menu.fromFormData!(formData, originalNode);
+
+      // Should have 2 categories: Sales and Other (not duplicate Sales)
+      expect(result.router?.categories).to.have.length(2);
+      expect(result.router!.categories[0].name).to.equal('Sales');
+      expect(result.router!.categories[1].name).to.equal('Other');
+
+      // Both cases should reference same category
+      expect(result.router?.cases).to.have.length(2);
+      expect(result.router!.cases[0].category_uuid).to.equal(
+        result.router!.cases[1].category_uuid
+      );
+
+      // Should have 2 exits (not 3)
+      expect(result.exits).to.have.length(2);
+    });
+
+    it('preserves existing category UUIDs', () => {
+      const formData = {
+        uuid: 'test-node',
+        digit_1: 'Sales',
+        digit_2: 'Support',
+        digit_3: '',
+        digit_4: '',
+        digit_5: '',
+        digit_6: '',
+        digit_7: '',
+        digit_8: '',
+        digit_9: '',
+        digit_0: '',
+        result_name: ''
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        router: {
+          type: 'switch',
+          categories: [
+            {
+              uuid: 'orig-sales',
+              name: 'Sales',
+              exit_uuid: 'orig-sales-exit'
+            },
+            {
+              uuid: 'orig-support',
+              name: 'Support',
+              exit_uuid: 'orig-support-exit'
+            },
+            {
+              uuid: 'orig-other',
+              name: 'Other',
+              exit_uuid: 'orig-other-exit'
+            }
+          ],
+          cases: [
+            {
+              uuid: 'orig-case-1',
+              type: 'has_number_eq',
+              arguments: ['1'],
+              category_uuid: 'orig-sales'
+            },
+            {
+              uuid: 'orig-case-2',
+              type: 'has_number_eq',
+              arguments: ['2'],
+              category_uuid: 'orig-support'
+            }
+          ]
+        },
+        exits: [
+          { uuid: 'orig-sales-exit', destination_uuid: 'dest-1' },
+          { uuid: 'orig-support-exit', destination_uuid: 'dest-2' },
+          { uuid: 'orig-other-exit', destination_uuid: null }
+        ]
+      };
+
+      const result = wait_for_menu.fromFormData!(formData, originalNode);
+
+      // Category UUIDs preserved
+      const sales = result.router!.categories.find((c) => c.name === 'Sales');
+      expect(sales?.uuid).to.equal('orig-sales');
+      expect(sales?.exit_uuid).to.equal('orig-sales-exit');
+
+      const other = result.router!.categories.find((c) => c.name === 'Other');
+      expect(other?.uuid).to.equal('orig-other');
+
+      // Case UUIDs preserved
+      const case1 = result.router!.cases.find(
+        (c: any) => c.arguments[0] === '1'
+      );
+      expect(case1?.uuid).to.equal('orig-case-1');
+
+      // Exit destinations preserved
+      const salesExit = result.exits.find((e) => e.uuid === 'orig-sales-exit');
+      expect(salesExit?.destination_uuid).to.equal('dest-1');
+    });
+
+    it('handles all empty digits', () => {
+      const formData = {
+        uuid: 'test-node',
+        digit_1: '',
+        digit_2: '',
+        digit_3: '',
+        digit_4: '',
+        digit_5: '',
+        digit_6: '',
+        digit_7: '',
+        digit_8: '',
+        digit_9: '',
+        digit_0: '',
+        result_name: ''
+      };
+
+      const originalNode: Node = {
+        uuid: 'test-node',
+        actions: [],
+        exits: [],
+        router: { type: 'switch', categories: [] }
+      };
+
+      const result = wait_for_menu.fromFormData!(formData, originalNode);
+
+      // Should still have Other category
+      expect(result.router?.categories).to.have.length(1);
+      expect(result.router!.categories[0].name).to.equal('Other');
+      expect(result.router?.cases).to.have.length(0);
+      expect(result.exits).to.have.length(1);
+    });
+  });
+});

package/test/temba-flow-collision.test.ts

@@ -454,10 +454,11 @@ describe('Collision Detection Utilities', () => {
       expect(newPos.left).to.equal(100); // horizontal position unchanged
     });
 
-    it('prefers direction with fewer cascading collisions', () => {
+    it('prefers axis-matching direction even with a cascade', () => {
       // Sacred at (100,100)-(200,200), collider at (100,150)-(200,250)
-      // A node sits below at (100,280)-(200,380) blocking the downward path
-      // Down causes cascade, right does not
+      // Overlap is 100w x 50h (wide) = vertical collision = prefer down
+      // A blocker sits below at (100,280)-(200,380), so down causes a cascade
+      // But axis bias still prefers down over moving right
       const allBounds: NodeBounds[] = [
         {
           uuid: 'sacred',
@@ -491,9 +492,10 @@ describe('Collision Detection Utilities', () => {
       const positions = calculateReflowPositions(['sacred'], allBounds);
 
       expect(positions.has('collider')).to.be.true;
-      // Should avoid moving down (would cascade into blocker)
-      // blocker should not need to move
-      expect(positions.has('blocker')).to.be.false;
+      const newPos = positions.get('collider')!;
+      // Axis bias prefers down (vertical) even though it cascades into blocker
+      expect(newPos.top).to.be.greaterThan(200);
+      expect(newPos.left).to.equal(100); // horizontal position unchanged
     });
 
     it('resolves cascading collisions', () => {
@@ -696,6 +698,284 @@ describe('Collision Detection Utilities', () => {
       expect(newPos.left).to.be.at.least(0);
       expect(newPos.top).to.be.at.least(0);
     });
+
+    it('does not move a lower node above the sacred node', () => {
+      // Collider is below sacred (collider.top > sacred.top)
+      // Up should be filtered, so collider goes down or to the side
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'sacred',
+          left: 100,
+          top: 100,
+          right: 200,
+          bottom: 200,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'collider',
+          left: 100,
+          top: 180,
+          right: 200,
+          bottom: 280,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['sacred'], allBounds);
+
+      expect(positions.has('collider')).to.be.true;
+      const newPos = positions.get('collider')!;
+      // Should NOT move above the sacred node's top
+      expect(newPos.top).to.be.at.least(100);
+    });
+
+    it('does not move a right-of node left of the sacred node', () => {
+      // Collider is to the right of sacred (collider.left > sacred.left)
+      // Left should be filtered
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'sacred',
+          left: 100,
+          top: 100,
+          right: 200,
+          bottom: 200,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'collider',
+          left: 180,
+          top: 100,
+          right: 280,
+          bottom: 200,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['sacred'], allBounds);
+
+      expect(positions.has('collider')).to.be.true;
+      const newPos = positions.get('collider')!;
+      // Should NOT move left of the sacred node's left
+      expect(newPos.left).to.be.at.least(100);
+    });
+
+    it('prefers vertical for wide overlap (vertical collision)', () => {
+      // Nodes stacked: same horizontal position, slight vertical overlap
+      // Overlap: 100w x 30h (wider than tall) = vertical collision = prefer up/down
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'sacred',
+          left: 100,
+          top: 100,
+          right: 200,
+          bottom: 200,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'collider',
+          left: 100,
+          top: 170,
+          right: 200,
+          bottom: 270,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['sacred'], allBounds);
+
+      expect(positions.has('collider')).to.be.true;
+      const newPos = positions.get('collider')!;
+      // Should move vertically (down since collider is below)
+      expect(newPos.top).to.be.greaterThan(200);
+      expect(newPos.left).to.equal(100); // horizontal position unchanged
+    });
+
+    it('prefers horizontal for tall overlap (horizontal collision)', () => {
+      // Nodes side-by-side: same vertical position, slight horizontal overlap
+      // Overlap: 30w x 100h (taller than wide) = horizontal collision = prefer left/right
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'sacred',
+          left: 100,
+          top: 100,
+          right: 200,
+          bottom: 200,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'collider',
+          left: 170,
+          top: 100,
+          right: 270,
+          bottom: 200,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['sacred'], allBounds);
+
+      expect(positions.has('collider')).to.be.true;
+      const newPos = positions.get('collider')!;
+      // Should move horizontally (right since collider is right of sacred)
+      expect(newPos.left).to.be.greaterThan(200);
+      expect(newPos.top).to.equal(100); // vertical position unchanged
+    });
+
+    it('axis bias tolerates a few cascading collisions', () => {
+      // Sacred at (100,100)-(200,200), collider at (100,170)-(200,270)
+      // Overlap: 100w x 30h = vertical collision = prefer down
+      // Two blockers below: moving down causes 2 cascades
+      // Moving right causes 0 cascades but is axis-mismatched
+      // Axis bias should still prefer down with 2 cascades
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'sacred',
+          left: 100,
+          top: 100,
+          right: 200,
+          bottom: 200,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'collider',
+          left: 100,
+          top: 170,
+          right: 200,
+          bottom: 270,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'blocker1',
+          left: 100,
+          top: 260,
+          right: 200,
+          bottom: 360,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'blocker2',
+          left: 100,
+          top: 350,
+          right: 200,
+          bottom: 450,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['sacred'], allBounds);
+
+      expect(positions.has('collider')).to.be.true;
+      const newPos = positions.get('collider')!;
+      // Should still prefer down (axis match) despite 2 cascades
+      expect(newPos.top).to.be.greaterThan(200);
+      expect(newPos.left).to.equal(100);
+    });
+
+    it('sacred node yields to existing top node when dropped below its top', () => {
+      // Existing node at top of canvas, sacred dropped overlapping from below
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'existing',
+          left: 100,
+          top: 0,
+          right: 200,
+          bottom: 100,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'dropped',
+          left: 100,
+          top: 50,
+          right: 200,
+          bottom: 150,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['dropped'], allBounds);
+
+      // Sacred (dropped) should yield since it didn't drop above existing
+      // and existing has no room to move up
+      expect(positions.has('dropped')).to.be.true;
+      expect(positions.has('existing')).to.be.false;
+
+      const newPos = positions.get('dropped')!;
+      expect(newPos.top).to.be.greaterThanOrEqual(100); // moved below existing
+    });
+
+    it('sacred keeps position when dropped above existing node', () => {
+      // Sacred node dropped above existing node - sacred gets priority
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'existing',
+          left: 100,
+          top: 50,
+          right: 200,
+          bottom: 150,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'dropped',
+          left: 100,
+          top: 0,
+          right: 200,
+          bottom: 100,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['dropped'], allBounds);
+
+      // Sacred dropped above existing, so it keeps priority
+      expect(positions.has('dropped')).to.be.false;
+      expect(positions.has('existing')).to.be.true;
+    });
+
+    it('sacred keeps position when dropped at same top as existing node', () => {
+      // Both at top=0 - sacred keeps priority since it's not below existing
+      const allBounds: NodeBounds[] = [
+        {
+          uuid: 'existing',
+          left: 100,
+          top: 0,
+          right: 200,
+          bottom: 100,
+          width: 100,
+          height: 100
+        },
+        {
+          uuid: 'dropped',
+          left: 100,
+          top: 0,
+          right: 200,
+          bottom: 100,
+          width: 100,
+          height: 100
+        }
+      ];
+
+      const positions = calculateReflowPositions(['dropped'], allBounds);
+
+      // Sacred at same top keeps priority - existing node moves
+      expect(positions.has('dropped')).to.be.false;
+      expect(positions.has('existing')).to.be.true;
+    });
   });
 
   describe('edge cases', () => {