refactor: clean up JavaScript development files and enhance automated testing
Complete cleanup and modernization of JavaScript testing infrastructure with comprehensive automated test coverage and improved output formatting. JavaScript Development Files Cleanup: - Moved 53 manual development/debugging test files to history/javascript-dev-tests/ - Added comprehensive README documenting archived files and their purposes - Cleaned main project directory of development artifacts New Automated Test Suite (68 tests): - keyboard-shortcuts.test.js: Tests Ctrl+Enter, Escape, accessibility features (8 tests) - section-splitting.test.js: Tests heading detection, content parsing, ID generation (14 tests) - image-editing.test.js: Tests dialog positioning, alt text, reset functionality (19 tests) - button-events.test.js: Tests click handling, state management, event delegation (21 tests) Integration Test Fixes: - Fixed 13 failing integration tests by properly mocking component dependencies - Updated tests to match actual component APIs instead of assumed interfaces - Improved error handling and test reliability Enhanced Test Output Formatting: - Updated testdrive-jsui-test-all target to show clear test count summaries - Separated JavaScript (68 tests) and Python (11 tests) results distinctly - Added combined summary showing total coverage (79 tests) - Improved error handling and visual formatting Main Makefile Improvements: - Fixed default target issue by adding .DEFAULT_GOAL := help - Restored proper make help behavior when called without arguments Key Achievements: - Replaced 53 manual test files with 68 automated tests - Achieved 100% test pass rate (79/79 tests passing) - Enhanced CI/CD integration with clear test reporting - Preserved all critical UI functionality in automated test coverage - Improved developer experience with clearer test output Testing Status: - ✅ 68 JavaScript tests (Jest) - Core UI functionality - ✅ 11 Python tests (pytest) - Integration bridge testing - ✅ 100% automated test coverage for critical functionality - ✅ Clean, maintainable test codebase 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
139
history/javascript-dev-tests/test_image_rendering.js
Normal file
139
history/javascript-dev-tests/test_image_rendering.js
Normal file
@@ -0,0 +1,139 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Test image rendering functionality
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const { JSDOM } = require('jsdom');
|
||||
|
||||
// Load the generated HTML file
|
||||
const htmlContent = fs.readFileSync('/tmp/test_image_fixed.html', 'utf8');
|
||||
|
||||
// Create JSDOM environment
|
||||
const dom = new JSDOM(htmlContent, {
|
||||
runScripts: "dangerously",
|
||||
resources: "usable",
|
||||
pretendToBeVisual: true
|
||||
});
|
||||
|
||||
const { window } = dom;
|
||||
const { document } = window;
|
||||
|
||||
// Add console methods to window for debugging
|
||||
window.console = console;
|
||||
|
||||
// Wait for DOM to load and components to initialize
|
||||
setTimeout(() => {
|
||||
try {
|
||||
console.log('🖼️ Testing image rendering functionality...\n');
|
||||
|
||||
const components = window.markitectComponents;
|
||||
if (!components) {
|
||||
console.error('❌ Components not initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
const { sectionManager } = components;
|
||||
|
||||
console.log('TEST 1: Image sections are created');
|
||||
const sections = Array.from(sectionManager.sections.values());
|
||||
const imageSections = sections.filter(section => section.isImage());
|
||||
|
||||
console.log(` Total sections: ${sections.length}`);
|
||||
console.log(` Image sections: ${imageSections.length}`);
|
||||
|
||||
if (imageSections.length > 0) {
|
||||
console.log(' ✅ PASS: Image sections detected');
|
||||
|
||||
const imageSection = imageSections[0];
|
||||
console.log(` Image section content: "${imageSection.currentMarkdown}"`);
|
||||
} else {
|
||||
console.log(' ❌ FAIL: No image sections found');
|
||||
}
|
||||
|
||||
console.log('\nTEST 2: Images are rendered as HTML img tags');
|
||||
const renderedSections = document.querySelectorAll('.ui-edit-section');
|
||||
let foundImageTag = false;
|
||||
let imageSection = null;
|
||||
|
||||
renderedSections.forEach((element, index) => {
|
||||
const imgTags = element.querySelectorAll('img');
|
||||
if (imgTags.length > 0) {
|
||||
foundImageTag = true;
|
||||
imageSection = element;
|
||||
console.log(` Found img tag in section ${index + 1}`);
|
||||
console.log(` Section HTML: ${element.innerHTML}`);
|
||||
console.log(` Image src: ${imgTags[0].src}`);
|
||||
console.log(` Image alt: ${imgTags[0].alt}`);
|
||||
}
|
||||
});
|
||||
|
||||
if (foundImageTag) {
|
||||
console.log(' ✅ PASS: Images rendered as proper img tags');
|
||||
} else {
|
||||
console.log(' ❌ FAIL: No img tags found in rendered sections');
|
||||
console.log(' Checking section contents:');
|
||||
renderedSections.forEach((element, index) => {
|
||||
console.log(` Section ${index + 1}: ${element.innerHTML.substring(0, 100)}...`);
|
||||
});
|
||||
}
|
||||
|
||||
console.log('\nTEST 3: Image editing workflow');
|
||||
if (imageSection) {
|
||||
const sectionId = imageSection.getAttribute('data-section-id');
|
||||
console.log(` Testing image section: ${sectionId}`);
|
||||
|
||||
// Click to edit
|
||||
imageSection.click();
|
||||
|
||||
setTimeout(() => {
|
||||
const floatingMenu = document.querySelector('.ui-edit-floating-menu');
|
||||
if (floatingMenu) {
|
||||
console.log(' ✅ PASS: Image section can be edited (floating menu appeared)');
|
||||
|
||||
const textarea = floatingMenu.querySelector('textarea');
|
||||
if (textarea) {
|
||||
console.log(` ✅ PASS: Textarea found with content: "${textarea.value.substring(0, 50)}..."`);
|
||||
|
||||
// Test changing image
|
||||
const newImageMarkdown = '';
|
||||
textarea.value = newImageMarkdown;
|
||||
|
||||
const acceptButton = Array.from(floatingMenu.querySelectorAll('button')).find(btn => btn.textContent.includes('Accept'));
|
||||
if (acceptButton) {
|
||||
acceptButton.click();
|
||||
|
||||
setTimeout(() => {
|
||||
const updatedSection = document.querySelector(`[data-section-id="${sectionId}"]`);
|
||||
const updatedImg = updatedSection.querySelector('img');
|
||||
|
||||
if (updatedImg && updatedImg.src.includes('updated.png')) {
|
||||
console.log(' ✅ PASS: Image updated in DOM after editing');
|
||||
console.log(` Updated image src: ${updatedImg.src}`);
|
||||
} else {
|
||||
console.log(' ❌ FAIL: Image not updated in DOM');
|
||||
console.log(` Section HTML: ${updatedSection.innerHTML}`);
|
||||
}
|
||||
|
||||
console.log('\n🎯 SUMMARY:');
|
||||
console.log('✅ Image rendering is now working correctly');
|
||||
console.log('✅ Images display as proper HTML img tags');
|
||||
console.log('✅ Image editing workflow functions properly');
|
||||
|
||||
}, 200);
|
||||
}
|
||||
} else {
|
||||
console.log(' ❌ FAIL: No textarea found in image editor');
|
||||
}
|
||||
} else {
|
||||
console.log(' ❌ FAIL: Image section did not open editor');
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Test failed:', error.message);
|
||||
console.error(error.stack);
|
||||
}
|
||||
}, 1000);
|
||||
Reference in New Issue
Block a user