corrad-bp/validation-test-guide.md

Validation System Test Guide

How to Test the Node Validation System

1. Start the Development Server

yarn dev

2. Navigate to Process Builder

• Go to /process-builder/ in your browser
• Create a new process or open an existing one

3. Test Cases to Verify

Case 1: Missing Start Node (Should show error)

• Create a process with only form and end nodes
• You should see an error in the validation panel: "Process has no start node"

Case 2: Form Node Without Form Selected (Should show warning)

• Add a Form node to the canvas
• Don't configure any form for it
• You should see a warning icon on the node with tooltip: "Form node has no form selected"

Case 3: API Node Without URL (Should show error)

• Add an API node to the canvas
• Don't configure any URL for it
• You should see an error icon on the node with tooltip: "API node has no URL configured"

Case 4: Gateway Node Without Conditions (Should show warning)

• Add a Gateway node to the canvas
• Don't configure any conditions for it
• You should see a warning icon on the node with tooltip: "Gateway node has no conditions defined"

Case 5: Script Node Without Code (Should show warning)

• Add a Script node to the canvas
• Don't add any code content
• You should see a warning icon on the node with tooltip: "Script node has no code defined"

4. Expected Visual Elements

Validation Panel (Top-Left)

• Shows overall validation status (Valid/Warnings/Errors)
• Displays counts for each severity level
• Updates in real-time as you add/modify nodes

Node Validation Indicators

• Red circle with error icon: Critical errors that prevent execution
• Yellow circle with warning icon: Warnings that should be addressed
• Blue circle with info icon: Informational suggestions
• Number badge: Shows count when multiple issues exist

Tooltips

• Light, readable design: White background with dark text for better visibility
• Positioned above icons: Tooltips appear above the validation icons with arrows pointing down
• Color-coded by severity:
  • Red text and border for errors
  • Yellow/orange text and border for warnings
  • Blue text and border for info
• Organized content: Messages organized by severity (ERRORS, WARNINGS, INFO)
• Clear descriptions: Detailed explanations of what needs to be fixed

5. How to Fix Validation Issues

Form Node Warnings:

• Click on the form node to open configuration
• Select a form from the dropdown
• Warning should disappear

API Node Errors:

• Click on the API node to open configuration
• Enter a valid URL (e.g., https://api.example.com)
• Select HTTP method
• Error should disappear

Gateway Node Warnings:

• Click on the gateway node to open configuration
• Add at least one condition with variable, operator, and value
• Warning should disappear

Script Node Warnings:

• Click on the script node to open configuration
• Add JavaScript code in the code editor
• Warning should disappear

6. Real-time Validation

• Validation happens automatically as you:
  • Add new nodes
  • Remove nodes
  • Modify node configurations
  • Connect/disconnect nodes
• No manual refresh needed

7. Performance Features

• Validation is debounced (300ms delay) to prevent excessive computation
• Only validates when nodes are present
• Clears validation when canvas is empty

Troubleshooting

If tooltips don't appear:

• Make sure you're hovering directly over the validation icon
• Check browser console for any JavaScript errors
• Verify the validation icon is clickable (cursor should change to help)

If validation panel is empty:

• Add some nodes to trigger validation
• Check that nodes have configuration issues
• Look for any console errors

If validation icons don't appear:

• Verify nodes have actual validation issues
• Check that the ValidationIndicator component is properly loaded
• Ensure the process store is connected

Success Criteria

✅ The validation system is working correctly if:

1. Validation panel shows in top-left corner
2. Validation icons appear on misconfigured nodes
3. Tooltips display detailed error messages on hover
4. Validation updates in real-time as you modify the process
5. Different severity levels show different colored icons
6. Multiple issues show number badges
7. Fixing configuration issues removes validation warnings

This validation system helps users build robust business processes by providing immediate feedback on configuration issues and process structure problems.