@nyaruka/temba-components 0.129.1 → 0.129.3

package/out-tsc/test/temba-flow-editor-node.test.js

@@ -1,7 +1,7 @@
 import '../temba-modules';
 import { html, fixture, expect } from '@open-wc/testing';
 import { EditorNode } from '../src/flow/EditorNode';
-import { stub, restore } from 'sinon';
+import { stub, restore, useFakeTimers } from 'sinon';
 import { CustomEventType } from '../src/interfaces';
 describe('EditorNode', () => {
     let editorNode;
@@ -513,5 +513,418 @@ describe('EditorNode', () => {
             expect(dragHandles).to.have.length(3);
         });
     });
+    describe('exit disconnection', () => {
+        let mockStore;
+        let mockUpdateNode;
+        beforeEach(() => {
+            mockUpdateNode = stub();
+            mockStore = {
+                getState: stub().returns({
+                    updateNode: mockUpdateNode
+                })
+            };
+            // Mock the plumber with disconnect capabilities
+            mockPlumber = {
+                makeTarget: stub(),
+                makeSource: stub(),
+                connectIds: stub(),
+                removeExitConnection: stub().returns(true),
+                setConnectionRemovingState: stub().returns(true)
+            };
+            window.getStore = () => mockStore;
+            editorNode = new EditorNode();
+            editorNode.plumber = mockPlumber;
+        });
+        afterEach(() => {
+            // Restore any stubbed functions
+            if (window.originalGetStore) {
+                window.getStore = window.originalGetStore;
+            }
+        });
+        it('handles exit click to initiate disconnection', async () => {
+            // Create a node with a connected exit
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [],
+                exits: [{ uuid: 'exit-1', destination_uuid: 'target-node' }]
+            };
+            const mockUI = {
+                position: { left: 100, top: 200 },
+                type: 'execute_actions'
+            };
+            editorNode.node = mockNode;
+            editorNode.ui = mockUI;
+            // Mock querySelector to return the exit element
+            const exitElement = document.createElement('div');
+            exitElement.id = 'exit-1';
+            exitElement.classList.add('exit', 'connected');
+            editorNode.querySelector = stub().returns(exitElement);
+            // Create a mock event
+            const mockEvent = {
+                preventDefault: stub(),
+                stopPropagation: stub(),
+                currentTarget: exitElement
+            };
+            // Mock getStore directly in the disconnectExit method
+            const originalDisconnectExit = editorNode.disconnectExit;
+            editorNode.disconnectExit = function (exit) {
+                // Call original but override the store logic
+                this.plumber.removeExitConnection(exit.uuid);
+                mockUpdateNode.call(null, this.node.uuid, {
+                    ...this.node,
+                    exits: this.node.exits.map((e) => e.uuid === exit.uuid ? { ...e, destination_uuid: null } : e)
+                });
+            };
+            // Call the click handler directly to initiate removal
+            editorNode.handleExitClick(mockEvent, mockNode.exits[0]);
+            // Verify the exit is marked for removal in the component state
+            expect(editorNode.exitRemovingState.has('exit-1')).to.be.true;
+            // Verify a timeout was set
+            expect(editorNode.exitRemovalTimeouts.has('exit-1')).to.be.true;
+            // Now click again to confirm disconnection
+            editorNode.handleExitClick(mockEvent, mockNode.exits[0]);
+            // Verify the plumber was called to remove the connection
+            expect(mockPlumber.removeExitConnection).to.have.been.calledWith('exit-1');
+            // Verify the node was updated with disconnected exit
+            expect(mockUpdateNode).to.have.been.called;
+            // Restore original method
+            editorNode.disconnectExit = originalDisconnectExit;
+        });
+        it('cancels disconnection after timeout', async () => {
+            // Create a fake timer for this test
+            const clock = useFakeTimers();
+            try {
+                // Create a node with a connected exit
+                const mockNode = {
+                    uuid: 'test-node',
+                    actions: [],
+                    exits: [{ uuid: 'exit-1', destination_uuid: 'target-node' }]
+                };
+                const mockUI = {
+                    position: { left: 100, top: 200 },
+                    type: 'execute_actions'
+                };
+                editorNode.node = mockNode;
+                editorNode.ui = mockUI;
+                // Mock querySelector to return the exit element
+                const exitElement = document.createElement('div');
+                exitElement.id = 'exit-1';
+                exitElement.classList.add('exit', 'connected');
+                editorNode.querySelector = stub().returns(exitElement);
+                // Create a mock event
+                const mockEvent = {
+                    preventDefault: stub(),
+                    stopPropagation: stub(),
+                    currentTarget: exitElement
+                };
+                // Call the click handler to initiate disconnection
+                editorNode.handleExitClick(mockEvent, mockNode.exits[0]);
+                // Verify the exit is marked for removal
+                expect(editorNode.exitRemovingState.has('exit-1')).to.be.true;
+                // Advance the clock past the timeout (1500ms is the default timeout)
+                clock.tick(1501);
+                // Verify the removing state is cleared after the timeout
+                expect(editorNode.exitRemovingState.has('exit-1')).to.be.false;
+                expect(mockPlumber.setConnectionRemovingState).to.have.been.calledWith('exit-1', false);
+            }
+            finally {
+                // Always restore the clock
+                clock.restore();
+            }
+        });
+    });
+    describe('action removal', () => {
+        let editorNode;
+        let mockPlumber;
+        let getStoreStub;
+        beforeEach(() => {
+            editorNode = new EditorNode();
+            // Mock plumber
+            mockPlumber = {
+                makeTarget: stub(),
+                makeSource: stub(),
+                connectIds: stub(),
+                removeExitConnection: stub()
+            };
+            editorNode['plumber'] = mockPlumber;
+        });
+        afterEach(() => {
+            if (getStoreStub) {
+                getStoreStub.restore();
+            }
+        });
+        it('handles action removal state management', async () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    },
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-2',
+                        text: 'World',
+                        quick_replies: []
+                    }
+                ],
+                exits: [{ uuid: 'exit-1', destination_uuid: null }]
+            };
+            editorNode['node'] = mockNode;
+            const mockEvent = {
+                preventDefault: stub(),
+                stopPropagation: stub()
+            };
+            // Initially, no action should be in removing state
+            expect(editorNode.actionRemovingState.has('action-1')).to.be
+                .false;
+            // Call the click handler to initiate removal
+            editorNode.handleActionRemoveClick(mockEvent, mockNode.actions[0], 0);
+            // Verify the action is marked for removal
+            expect(editorNode.actionRemovingState.has('action-1')).to.be
+                .true;
+            expect(editorNode.actionRemovalTimeouts.has('action-1')).to.be
+                .true;
+            // Verify event handlers were called
+            expect(mockEvent.preventDefault).to.have.been.called;
+            expect(mockEvent.stopPropagation).to.have.been.called;
+        });
+        it('cancels action removal after timeout', async () => {
+            const clock = useFakeTimers();
+            try {
+                const mockNode = {
+                    uuid: 'test-node',
+                    actions: [
+                        {
+                            type: 'send_msg',
+                            uuid: 'action-1',
+                            text: 'Hello',
+                            quick_replies: []
+                        }
+                    ],
+                    exits: [{ uuid: 'exit-1', destination_uuid: null }]
+                };
+                editorNode['node'] = mockNode;
+                const mockEvent = {
+                    preventDefault: stub(),
+                    stopPropagation: stub()
+                };
+                // Call the click handler to initiate removal
+                editorNode.handleActionRemoveClick(mockEvent, mockNode.actions[0], 0);
+                // Verify the action is marked for removal
+                expect(editorNode.actionRemovingState.has('action-1')).to.be
+                    .true;
+                // Advance the clock past the timeout (1000ms is the action removal timeout)
+                clock.tick(1001);
+                // Verify the removing state is cleared after the timeout
+                expect(editorNode.actionRemovingState.has('action-1')).to.be
+                    .false;
+                expect(editorNode.actionRemovalTimeouts.has('action-1')).to.be
+                    .false;
+            }
+            finally {
+                // Always restore the clock
+                clock.restore();
+            }
+        });
+        it('clears timeouts on disconnect', async () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: []
+            };
+            editorNode['node'] = mockNode;
+            const mockEvent = {
+                preventDefault: stub(),
+                stopPropagation: stub()
+            };
+            // Start a removal process
+            editorNode.handleActionRemoveClick(mockEvent, mockNode.actions[0], 0);
+            expect(editorNode.actionRemovingState.has('action-1')).to.be
+                .true;
+            expect(editorNode.actionRemovalTimeouts.has('action-1')).to.be
+                .true;
+            // Disconnect the component
+            editorNode.disconnectedCallback();
+            // Verify all state is cleared
+            expect(editorNode.actionRemovingState.size).to.equal(0);
+            expect(editorNode.actionRemovalTimeouts.size).to.equal(0);
+        });
+        it('renders action with remove button', async () => {
+            var _a;
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: []
+            };
+            editorNode['node'] = mockNode;
+            // Test that renderAction includes remove button
+            const result = editorNode.renderAction(mockNode, mockNode.actions[0], 0);
+            expect(result).to.exist;
+            // Render the template to check the actual DOM
+            const container = await fixture(html `<div>${result}</div>`);
+            const removeButton = container.querySelector('.remove-button');
+            expect(removeButton).to.exist;
+            expect((_a = removeButton === null || removeButton === void 0 ? void 0 : removeButton.textContent) === null || _a === void 0 ? void 0 : _a.trim()).to.equal('✕');
+            expect(removeButton === null || removeButton === void 0 ? void 0 : removeButton.getAttribute('title')).to.equal('Remove action');
+        });
+        it('shows removing state in UI', async () => {
+            var _a;
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: []
+            };
+            editorNode['node'] = mockNode;
+            // Set action to removing state
+            editorNode.actionRemovingState.add('action-1');
+            // Test that renderAction shows removing state
+            const result = editorNode.renderAction(mockNode, mockNode.actions[0], 0);
+            expect(result).to.exist;
+            // Render the template to check the actual DOM
+            const container = await fixture(html `<div>${result}</div>`);
+            const actionElement = container.querySelector('.action');
+            expect(actionElement).to.exist;
+            expect(actionElement === null || actionElement === void 0 ? void 0 : actionElement.classList.contains('removing')).to.be.true;
+            // Check that title shows "Remove?"
+            const titleElement = container.querySelector('.title .name');
+            expect((_a = titleElement === null || titleElement === void 0 ? void 0 : titleElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()).to.equal('Remove?');
+        });
+        it('handles multiple action removal states independently', async () => {
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    },
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-2',
+                        text: 'World',
+                        quick_replies: []
+                    }
+                ],
+                exits: []
+            };
+            editorNode['node'] = mockNode;
+            const mockEvent = {
+                preventDefault: stub(),
+                stopPropagation: stub()
+            };
+            // Start removal for first action
+            editorNode.handleActionRemoveClick(mockEvent, mockNode.actions[0], 0);
+            expect(editorNode.actionRemovingState.has('action-1')).to.be
+                .true;
+            expect(editorNode.actionRemovingState.has('action-2')).to.be
+                .false;
+            // Start removal for second action
+            editorNode.handleActionRemoveClick(mockEvent, mockNode.actions[1], 1);
+            expect(editorNode.actionRemovingState.has('action-1')).to.be
+                .true;
+            expect(editorNode.actionRemovingState.has('action-2')).to.be
+                .true;
+            // Both actions should have timeouts
+            expect(editorNode.actionRemovalTimeouts.has('action-1')).to.be
+                .true;
+            expect(editorNode.actionRemovalTimeouts.has('action-2')).to.be
+                .true;
+        });
+        it('properly reroutes JSPlumb connections when removing node with connections', async () => {
+            // This test verifies that the connection rerouting logic works correctly
+            // by testing the specific logic within removeNodeWithConnections
+            const mockNode = {
+                uuid: 'test-node',
+                actions: [
+                    {
+                        type: 'send_msg',
+                        uuid: 'action-1',
+                        text: 'Hello',
+                        quick_replies: []
+                    }
+                ],
+                exits: [{ uuid: 'exit-after', destination_uuid: 'node-after' }]
+            };
+            editorNode['node'] = mockNode;
+            // Mock the flow definition that would be returned by getStore
+            const mockFlowDefinition = {
+                nodes: [
+                    {
+                        uuid: 'node-before',
+                        exits: [
+                            { uuid: 'exit-before-1', destination_uuid: 'test-node' },
+                            { uuid: 'exit-before-2', destination_uuid: 'test-node' }
+                        ]
+                    },
+                    mockNode,
+                    {
+                        uuid: 'node-after',
+                        exits: []
+                    }
+                ]
+            };
+            // Test the connection rerouting logic directly by simulating what happens
+            // when a node with incoming and outgoing connections is removed
+            const nodeUuid = mockNode.uuid;
+            const incomingConnections = [];
+            const outgoingExits = mockNode.exits.filter((exit) => exit.destination_uuid);
+            // Find incoming connections (same logic as in removeNodeWithConnections)
+            for (const node of mockFlowDefinition.nodes) {
+                if (node.uuid !== nodeUuid) {
+                    for (const exit of node.exits) {
+                        if (exit.destination_uuid === nodeUuid) {
+                            incomingConnections.push({
+                                exitUuid: exit.uuid,
+                                sourceNodeUuid: node.uuid
+                            });
+                        }
+                    }
+                }
+            }
+            // Verify we found the expected incoming connections
+            expect(incomingConnections).to.have.length(2);
+            expect(incomingConnections[0].exitUuid).to.equal('exit-before-1');
+            expect(incomingConnections[1].exitUuid).to.equal('exit-before-2');
+            // Verify we found the expected outgoing connections
+            expect(outgoingExits).to.have.length(1);
+            expect(outgoingExits[0].destination_uuid).to.equal('node-after');
+            // Simulate the rerouting logic
+            if (incomingConnections.length > 0 && outgoingExits.length > 0) {
+                const firstDestination = outgoingExits[0].destination_uuid;
+                // Verify the destination is correct for rerouting
+                expect(firstDestination).to.equal('node-after');
+            }
+            // This test verifies the rerouting logic is correct. The actual fix ensures that:
+            // 1. Old JSPlumb connections are removed with removeExitConnection
+            // 2. Store is updated with updateConnection
+            // 3. New JSPlumb connections are created with connectIds
+            // This sequence ensures JSPlumb visuals stay in sync with the flow definition
+        });
+    });
 });
 //# sourceMappingURL=temba-flow-editor-node.test.js.map