TechManWorkflow-JointJS/connection-test-manual.html at main · kelvenray/TechManWorkflow-JointJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connection Functionality Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-step {
            margin: 10px 0;
            padding: 10px;
            border-left: 4px solid #007bff;
            background-color: #f8f9fa;
        }
        .test-step.success {
            border-left-color: #28a745;
            background-color: #d4edda;
        }
        .test-step.error {
            border-left-color: #dc3545;
            background-color: #f8d7da;
        }
        .test-step.warning {
            border-left-color: #ffc107;
            background-color: #fff3cd;
        }
        .button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .button:hover {
            background: #0056b3;
        }
        .button.success {
            background: #28a745;
        }
        .button.danger {
            background: #dc3545;
        }
        .console-output {
            background: #000;
            color: #00ff00;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
            margin-top: 10px;
        }
        .instructions {
            background: #e7f3ff;
            padding: 15px;
            border-radius: 4px;
            border-left: 4px solid #007bff;
        }
    </style>
</head>
<body>
    <h1>🔗 Connection Functionality Test</h1>

    <div class="test-container">
        <h2>📋 Test Instructions</h2>
        <div class="instructions">
            <p><strong>This test verifies that the connection functionality fix is working correctly.</strong></p>
            <p>Follow these steps to test the connection functionality:</p>
            <ol>
                <li>Open the main application in another tab: <a href="index.html" target="_blank">Open JointJS Application</a></li>
                <li>Run the automated test below to set up test nodes</li>
                <li>Manually test connection creation and selection</li>
                <li>Verify that the delete functionality works</li>
            </ol>
        </div>
    </div>

    <div class="test-container">
        <h2>🤖 Automated Test Setup</h2>
        <p>Click the button below to run the automated test setup in the main application:</p>
        <button class="button" onclick="runAutomatedTest()">Run Automated Test</button>
        <button class="button success" onclick="runConnectionCreationTest()">Test Connection Creation</button>
        <button class="button danger" onclick="runConnectionDeletionTest()">Test Connection Deletion</button>

        <div id="testOutput" class="console-output" style="display: none;"></div>
    </div>

    <div class="test-container">
        <h2>✋ Manual Test Steps</h2>
        <div class="test-step">
            <strong>Step 1:</strong> Create connections by dragging from one node to another
            <ul>
                <li>Try creating: Grouping → Decision</li>
                <li>Try creating: Decision → Switch</li>
                <li>Verify that connections are created successfully</li>
            </ul>
        </div>

        <div class="test-step">
            <strong>Step 2:</strong> Test connection selection
            <ul>
                <li>Click on a connection line</li>
                <li>Verify that the line turns pink/red and becomes thicker</li>
                <li>Verify that a delete icon appears in the middle of the line</li>
            </ul>
        </div>

        <div class="test-step">
            <strong>Step 3:</strong> Test connection deletion
            <ul>
                <li>Select a connection line</li>
                <li>Click the delete icon that appears</li>
                <li>Verify that the connection is removed</li>
                <li>Test undo (Ctrl+Z) to restore the connection</li>
            </ul>
        </div>

        <div class="test-step">
            <strong>Step 4:</strong> Test edge cases
            <ul>
                <li>Try creating multiple connections from the same node</li>
                <li>Try selecting different connections in sequence</li>
                <li>Test clicking on empty space to deselect</li>
            </ul>
        </div>
    </div>

    <div class="test-container">
        <h2>🐛 Expected Issues (Fixed)</h2>
        <div class="test-step success">
            <strong>✅ Fixed:</strong> Connection creation failure - connections can now be created normally
        </div>
        <div class="test-step success">
            <strong>✅ Fixed:</strong> Connection selection failure - connections can now be selected by clicking
        </div>
        <div class="test-step success">
            <strong>✅ Fixed:</strong> Delete tool not appearing - delete icons now show properly when connections are selected
        </div>
        <div class="test-step success">
            <strong>✅ Fixed:</strong> Command history integration - connection creation and deletion are now properly tracked for undo/redo
        </div>
    </div>

    <script>
        function log(message, type = 'info') {
            const output = document.getElementById('testOutput');
            output.style.display = 'block';
            const timestamp = new Date().toLocaleTimeString();
            const color = type === 'error' ? '#ff6b6b' : type === 'success' ? '#51cf66' : '#00ff00';
            output.innerHTML += `<div style="color: ${color}">[${timestamp}] ${message}</div>`;
            output.scrollTop = output.scrollHeight;
        }

        function runAutomatedTest() {
            log('Starting automated test setup...', 'info');

            // Check if main application window is available
            const mainWindow = window.open('index.html', 'mainApp');

            setTimeout(() => {
                try {
                    if (mainWindow.app && mainWindow.app.graph) {
                        log('✓ Main application detected', 'success');

                        // Run the test script in the main window
                        mainWindow.eval(`
                            // Clear canvas
                            app.graph.clear();
                            console.log('Canvas cleared for test');

                            // Create test nodes
                            const groupingNode = app.nodeManager.createNode('Grouping', 100, 100, { skipHistory: true });
                            const decisionNode = app.nodeManager.createNode('Decision', 300, 100, { skipHistory: true });
                            const switchNode = app.nodeManager.createNode('Switch', 500, 100, { skipHistory: true });

                            console.log('Test nodes created:', groupingNode.id, decisionNode.id, switchNode.id);

                            // Store node references for testing
                            window.testNodes = { groupingNode, decisionNode, switchNode };
                        `);

                        log('✓ Test nodes created successfully', 'success');
                        log('You can now manually test connection functionality', 'info');

                    } else {
                        log('❌ Main application not ready. Please open index.html first.', 'error');
                    }
                } catch (error) {
                    log('❌ Error accessing main application: ' + error.message, 'error');
                }
            }, 1000);
        }

        function runConnectionCreationTest() {
            log('Testing connection creation...', 'info');

            const mainWindow = window.open('', 'mainApp');

            try {
                if (mainWindow.app && mainWindow.testNodes) {
                    mainWindow.eval(`
                        // Test programmatic connection creation
                        const { groupingNode, decisionNode, switchNode } = window.testNodes;

                        // Create connection: Grouping → Decision
                        const link1 = new joint.shapes.standard.Link();
                        link1.source({ id: groupingNode.id });
                        link1.target({ id: decisionNode.id });
                        link1.attr({
                            line: {
                                stroke: '#333',
                                strokeWidth: 2,
                                targetMarker: {
                                    type: 'path',
                                    d: 'M 10 -5 0 0 10 5 z',
                                    fill: '#333'
                                }
                            }
                        });
                        link1.addTo(app.graph);

                        console.log('Connection created:', link1.id);
                        window.testConnection = link1;
                    `);

                    log('✓ Connection creation test completed', 'success');
                } else {
                    log('❌ Test nodes not found. Run automated test setup first.', 'error');
                }
            } catch (error) {
                log('❌ Connection creation test failed: ' + error.message, 'error');
            }
        }

        function runConnectionDeletionTest() {
            log('Testing connection deletion...', 'info');

            const mainWindow = window.open('', 'mainApp');

            try {
                if (mainWindow.app && mainWindow.testConnection) {
                    mainWindow.eval(`
                        // Test connection selection and deletion
                        const link = window.testConnection;

                        // Select the connection
                        app.selectLink(link);
                        console.log('Connection selected:', link.id);

                        // Test deletion after a short delay
                        setTimeout(() => {
                            if (app.commandHistory && typeof DeleteLinkCommand !== 'undefined') {
                                const deleteLinkCommand = new DeleteLinkCommand(app, link);
                                app.commandHistory.executeCommand(deleteLinkCommand);
                                console.log('Connection deleted using command system');
                            } else {
                                link.remove();
                                console.log('Connection deleted directly');
                            }
                        }, 1000);
                    `);

                    log('✓ Connection deletion test completed', 'success');
                } else {
                    log('❌ Test connection not found. Run connection creation test first.', 'error');
                }
            } catch (error) {
                log('❌ Connection deletion test failed: ' + error.message, 'error');
            }
        }
    </script>
</body>
</html>