120 lines
4.3 KiB
JavaScript
120 lines
4.3 KiB
JavaScript
|
#!/usr/bin/env node
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Debug the image reset button functionality with detailed logging
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
const fs = require('fs');
|
|||
|
|
const { JSDOM } = require('jsdom');
|
|||
|
|
|
|||
|
|
// Load the generated HTML file
|
|||
|
|
const htmlContent = fs.readFileSync('/tmp/test_image_reset_debug.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;
|
|||
|
|
|
|||
|
|
// Mock viewport dimensions
|
|||
|
|
window.innerWidth = 1200;
|
|||
|
|
window.innerHeight = 800;
|
|||
|
|
|
|||
|
|
// Wait for DOM to load and components to initialize
|
|||
|
|
setTimeout(() => {
|
|||
|
|
try {
|
|||
|
|
console.log('🔍 Debugging Image Reset Button...\n');
|
|||
|
|
|
|||
|
|
const components = window.markitectComponents;
|
|||
|
|
if (!components) {
|
|||
|
|
console.error('❌ Components not initialized');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const sections = document.querySelectorAll('.ui-edit-section');
|
|||
|
|
console.log(`Found ${sections.length} sections`);
|
|||
|
|
|
|||
|
|
// Find the image section
|
|||
|
|
const imageSection = Array.from(sections).find(section => {
|
|||
|
|
const sectionId = section.getAttribute('data-section-id');
|
|||
|
|
const sectionObj = components.sectionManager.sections.get(sectionId);
|
|||
|
|
return sectionObj && sectionObj.isImage();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!imageSection) {
|
|||
|
|
console.error('❌ No image section found');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const sectionId = imageSection.getAttribute('data-section-id');
|
|||
|
|
const sectionObj = components.sectionManager.sections.get(sectionId);
|
|||
|
|
|
|||
|
|
console.log('📝 Image Section Details:');
|
|||
|
|
console.log(` Section ID: ${sectionId}`);
|
|||
|
|
console.log(` Current markdown: "${sectionObj.currentMarkdown}"`);
|
|||
|
|
console.log(` Original markdown: "${sectionObj.originalMarkdown}"`);
|
|||
|
|
|
|||
|
|
// Click image section to open editor
|
|||
|
|
console.log('\n🖱️ Clicking image section...');
|
|||
|
|
imageSection.click();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const floatingMenu = document.querySelector('.ui-edit-floating-menu');
|
|||
|
|
|
|||
|
|
if (floatingMenu) {
|
|||
|
|
console.log('✅ Image editor opened');
|
|||
|
|
|
|||
|
|
const altTextInput = floatingMenu.querySelector('input[type="text"]');
|
|||
|
|
const resetButton = Array.from(floatingMenu.querySelectorAll('button'))
|
|||
|
|
.find(btn => btn.textContent.includes('Reset'));
|
|||
|
|
|
|||
|
|
if (altTextInput && resetButton) {
|
|||
|
|
const originalAltText = altTextInput.value;
|
|||
|
|
console.log(`📝 Original alt text: "${originalAltText}"`);
|
|||
|
|
|
|||
|
|
// Modify alt text
|
|||
|
|
console.log('\n✏️ Modifying alt text...');
|
|||
|
|
altTextInput.value = "MODIFIED ALT TEXT";
|
|||
|
|
altTextInput.dispatchEvent(new window.Event('input'));
|
|||
|
|
console.log(`Modified alt text: "${altTextInput.value}"`);
|
|||
|
|
|
|||
|
|
// Wait for staging state to update
|
|||
|
|
setTimeout(() => {
|
|||
|
|
console.log('\n🔄 Clicking reset button...');
|
|||
|
|
resetButton.click();
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const finalAltText = altTextInput.value;
|
|||
|
|
console.log(`\n📝 Final alt text: "${finalAltText}"`);
|
|||
|
|
|
|||
|
|
if (finalAltText === originalAltText) {
|
|||
|
|
console.log('✅ Image reset worked correctly!');
|
|||
|
|
} else {
|
|||
|
|
console.log('❌ Image reset failed!');
|
|||
|
|
console.log(` Expected: "${originalAltText}"`);
|
|||
|
|
console.log(` Got: "${finalAltText}"`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}, 200);
|
|||
|
|
}, 200);
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
console.log(`❌ Missing elements - Alt Input: ${!!altTextInput}, Reset Button: ${!!resetButton}`);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('❌ Image editor failed to open');
|
|||
|
|
}
|
|||
|
|
}, 300);
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('❌ Test failed:', error.message);
|
|||
|
|
console.error(error.stack);
|
|||
|
|
}
|
|||
|
|
}, 1000);
|