Md Afiq Iskandar
f4eff35c4b
- Introduced a new `validation-test-guide.md` file detailing the testing process for the node validation system, including test cases and expected outcomes. - Updated `ProcessFlowCanvas.vue` to integrate a collapsible validation panel, allowing users to toggle visibility and view validation statuses and issues in real-time. - Enhanced the validation indicators and tooltips in `ValidationIndicator.vue` and `ValidationTooltip.vue` to provide clearer feedback on validation issues with improved styling and severity color coding. - Removed the deprecated `vue-flow-custom-nodes-migration.md` and `vue-flow-migration-completed-final.md` documentation files to streamline project documentation. - Adjusted styles in `ValidationTooltip.vue` for better visibility and user experience, ensuring tooltips are informative and visually distinct based on severity. - Updated `index.vue` to ensure proper text color inheritance for custom nodes, enhancing overall UI consistency.
127 lines
4.5 KiB
Markdown
127 lines
4.5 KiB
Markdown
# Validation System Test Guide
|
|
|
|
## How to Test the Node Validation System
|
|
|
|
### 1. Start the Development Server
|
|
```bash
|
|
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. |