tegwick
746a3f9df1
Move technical documentation from root directory to organized locations for better project structure and discoverability. Documentation Moved to docs/development/: - UserInterfaceFramework.md: UI component framework specification and architecture - LOST_FUNCTIONALITY_ANALYSIS.md: Technical analysis of recovered JavaScript functionality - TDD_COMPLIANCE_REPORT.md: Test-Driven Development methodology validation report Obsolete Documentation Archived: - TEST_ENVIRONMENT.md → history/javascript-dev-tests/ Manual testing environment docs (replaced by automated testing) Files Remaining in Root: - CHANGELOG.md: Project changelog (standard location) - TODO.md: Active project tasks (operational file) Benefits: - ✅ Clean root directory with only operational files - ✅ Technical documentation properly organized in docs/development/ - ✅ Obsolete docs archived with historical context - ✅ Improved project navigation and documentation discoverability - ✅ Follows standard project organization conventions Project Structure: - Root: Operational files (CHANGELOG, TODO) - docs/development/: Technical documentation and reports - history/: Archived development artifacts and obsolete documentation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
113 lines
3.3 KiB
Markdown
113 lines
3.3 KiB
Markdown
# HTML Editor Test Environment
|
|
|
|
## 🎯 Overview
|
|
|
|
This test environment allows for comprehensive testing of the MarkiTect HTML editor functionality using Node.js and headless browser testing.
|
|
|
|
## 🛠️ Available Tools
|
|
|
|
### 1. Basic Test Runner (`test_runner.js`)
|
|
```bash
|
|
node test_runner.js [html-file-path]
|
|
```
|
|
- Structural validation
|
|
- Function availability checking
|
|
- Basic DOM testing
|
|
|
|
### 2. E2E Test Suite (`e2e_tests.js`)
|
|
```bash
|
|
node e2e_tests.js [html-file-path]
|
|
```
|
|
- Comprehensive functionality testing
|
|
- Interactive behavior validation
|
|
- Button functionality verification
|
|
|
|
### 3. Button Debug Tool (`debug_buttons.js`)
|
|
```bash
|
|
node debug_buttons.js [html-file-path]
|
|
```
|
|
- Detailed button creation analysis
|
|
- Event handler verification
|
|
- DOM interaction simulation
|
|
|
|
## 🧪 Test Results Summary
|
|
|
|
### ✅ **Working Features:**
|
|
1. **Section Detection**: 7 sections created (2 image sections detected)
|
|
2. **Click Handling**: All sections respond to clicks correctly
|
|
3. **Image Editor**: Image editor dialog opens successfully
|
|
4. **Button Creation**: All 7 buttons created with proper handlers
|
|
5. **Auto-resize**: Textarea auto-resize functionality working
|
|
6. **Debug System**: Console-based debug logging active
|
|
|
|
### 🎯 **Verified Functionality:**
|
|
- ✅ Section editing for text sections
|
|
- ✅ Image editor dialog for image sections
|
|
- ✅ Button event binding (Replace, Resize, Caption, Remove)
|
|
- ✅ Global controls (Save, Reset, Status)
|
|
- ✅ Auto-resizing textareas
|
|
- ✅ Proper CSS styling and visual feedback
|
|
|
|
## 🚀 TDD Workflow
|
|
|
|
### For New Features:
|
|
1. **Write Test First**: Add test case to e2e_tests.js
|
|
2. **Run Test**: `node e2e_tests.js /path/to/test.html`
|
|
3. **See Red**: Test should fail initially
|
|
4. **Implement Feature**: Add code to editor.js
|
|
5. **See Green**: Re-run test to verify fix
|
|
6. **Refactor**: Clean up implementation
|
|
|
|
### For Bug Fixes:
|
|
1. **Reproduce Issue**: Use debug_buttons.js to identify problem
|
|
2. **Create Test**: Add test case that reproduces the bug
|
|
3. **Fix Implementation**: Update editor.js
|
|
4. **Verify Fix**: Run comprehensive tests
|
|
|
|
## 📊 Test File Locations
|
|
|
|
- **Test Files**: `/tmp/test_*.html`
|
|
- **Latest Working**: `/tmp/test_final_comprehensive.html`
|
|
- **Source Editor**: `/home/worsch/markitect_project/markitect/static/editor.js`
|
|
|
|
## 🔧 Debug Commands
|
|
|
|
### Quick Structural Check:
|
|
```bash
|
|
node test_runner.js /tmp/test_final_comprehensive.html
|
|
```
|
|
|
|
### Full Functionality Test:
|
|
```bash
|
|
node e2e_tests.js /tmp/test_final_comprehensive.html
|
|
```
|
|
|
|
### Button Behavior Analysis:
|
|
```bash
|
|
node debug_buttons.js /tmp/test_final_comprehensive.html
|
|
```
|
|
|
|
### Generate Fresh Test HTML:
|
|
```bash
|
|
MARKITECT_EDIT_MODE=true markitect md-render /tmp/test_regular_images.md --output /tmp/new_test.html
|
|
```
|
|
|
|
## 🎉 Success Criteria
|
|
|
|
All tests should show:
|
|
- ✅ 6/6 basic tests passing
|
|
- ✅ DOM environment loads successfully
|
|
- ✅ 7 sections created (2 image sections)
|
|
- ✅ Image editor opens on image click
|
|
- ✅ All buttons have event handlers
|
|
- ✅ Console debug messages active
|
|
|
|
## 🐛 Common Issues
|
|
|
|
If buttons aren't working in the browser but tests pass:
|
|
1. Check browser console for JavaScript errors
|
|
2. Verify `this` context binding in arrow functions
|
|
3. Ensure sectionId is properly captured in closures
|
|
4. Check for event propagation issues
|
|
|
|
The test environment provides a complete TDD workflow for continuing development! 🚀 |