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:
230
history/javascript-dev-tests/test_reset_functionality.js
Normal file
230
history/javascript-dev-tests/test_reset_functionality.js
Normal file
@@ -0,0 +1,230 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Test the reset button functionality for both text and image sections
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const { JSDOM } = require('jsdom');
|
||||
|
||||
// Load the generated HTML file
|
||||
const htmlContent = fs.readFileSync('/tmp/test_reset_buttons.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('🔄 Testing Reset Button Functionality...\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 to test`);
|
||||
|
||||
let testCount = 0;
|
||||
let passedTests = 0;
|
||||
|
||||
// Test text section reset functionality
|
||||
const testTextSectionReset = (sectionIndex) => {
|
||||
if (sectionIndex >= sections.length) {
|
||||
// Test image section after all text sections
|
||||
testImageSectionReset();
|
||||
return;
|
||||
}
|
||||
|
||||
const section = sections[sectionIndex];
|
||||
const sectionId = section.getAttribute('data-section-id');
|
||||
const sectionObj = components.sectionManager.sections.get(sectionId);
|
||||
|
||||
// Skip image sections for this test
|
||||
if (sectionObj && sectionObj.isImage()) {
|
||||
testTextSectionReset(sectionIndex + 1);
|
||||
return;
|
||||
}
|
||||
|
||||
testCount++;
|
||||
console.log(`\nTEST ${testCount}: Text Reset - Section ${sectionId}`);
|
||||
|
||||
// Click section to open editor
|
||||
section.click();
|
||||
|
||||
setTimeout(() => {
|
||||
const floatingMenu = document.querySelector('.ui-edit-floating-menu');
|
||||
|
||||
if (floatingMenu) {
|
||||
const textarea = floatingMenu.querySelector('textarea');
|
||||
const resetButton = Array.from(floatingMenu.querySelectorAll('button'))
|
||||
.find(btn => btn.textContent.includes('Reset'));
|
||||
|
||||
if (textarea && resetButton) {
|
||||
// Get original content
|
||||
const originalContent = textarea.value;
|
||||
console.log(` 📝 Original content length: ${originalContent.length} chars`);
|
||||
|
||||
// Modify content
|
||||
textarea.value = "MODIFIED CONTENT FOR TESTING";
|
||||
console.log(` ✏️ Modified content: "${textarea.value}"`);
|
||||
|
||||
// Click reset button
|
||||
resetButton.click();
|
||||
|
||||
setTimeout(() => {
|
||||
const resetContent = textarea.value;
|
||||
console.log(` 🔄 Reset content length: ${resetContent.length} chars`);
|
||||
|
||||
if (resetContent === originalContent) {
|
||||
passedTests++;
|
||||
console.log(` ✅ Reset button works correctly`);
|
||||
} else {
|
||||
console.log(` ❌ Reset button failed`);
|
||||
console.log(` Expected: "${originalContent.substring(0, 50)}..."`);
|
||||
console.log(` Got: "${resetContent.substring(0, 50)}..."`);
|
||||
}
|
||||
|
||||
// Close editor and move to next
|
||||
const cancelBtn = Array.from(floatingMenu.querySelectorAll('button'))
|
||||
.find(btn => btn.textContent.includes('Cancel'));
|
||||
if (cancelBtn) {
|
||||
cancelBtn.click();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
testTextSectionReset(sectionIndex + 1);
|
||||
}, 100);
|
||||
}, 100);
|
||||
|
||||
} else {
|
||||
console.log(` ❌ Missing elements - Textarea: ${!!textarea}, Reset Button: ${!!resetButton}`);
|
||||
testTextSectionReset(sectionIndex + 1);
|
||||
}
|
||||
} else {
|
||||
console.log(` ❌ Failed to open editor`);
|
||||
testTextSectionReset(sectionIndex + 1);
|
||||
}
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// Test image section reset functionality
|
||||
const testImageSectionReset = () => {
|
||||
// Find 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.log('\n⚠️ No image section found for testing');
|
||||
showFinalResults();
|
||||
return;
|
||||
}
|
||||
|
||||
testCount++;
|
||||
const sectionId = imageSection.getAttribute('data-section-id');
|
||||
console.log(`\nTEST ${testCount}: Image Reset - Section ${sectionId}`);
|
||||
|
||||
// Click image section to open editor
|
||||
imageSection.click();
|
||||
|
||||
setTimeout(() => {
|
||||
const floatingMenu = document.querySelector('.ui-edit-floating-menu');
|
||||
|
||||
if (floatingMenu) {
|
||||
const altTextInput = floatingMenu.querySelector('input[type="text"]');
|
||||
const resetButton = Array.from(floatingMenu.querySelectorAll('button'))
|
||||
.find(btn => btn.textContent.includes('Reset'));
|
||||
|
||||
if (altTextInput && resetButton) {
|
||||
// Get original alt text
|
||||
const originalAltText = altTextInput.value;
|
||||
console.log(` 📝 Original alt text: "${originalAltText}"`);
|
||||
|
||||
// Modify alt text
|
||||
altTextInput.value = "MODIFIED ALT TEXT FOR TESTING";
|
||||
altTextInput.dispatchEvent(new window.Event('input'));
|
||||
console.log(` ✏️ Modified alt text: "${altTextInput.value}"`);
|
||||
|
||||
// Wait a moment for staging state to update
|
||||
setTimeout(() => {
|
||||
// Click reset button
|
||||
resetButton.click();
|
||||
|
||||
setTimeout(() => {
|
||||
const resetAltText = altTextInput.value;
|
||||
console.log(` 🔄 Reset alt text: "${resetAltText}"`);
|
||||
|
||||
if (resetAltText === originalAltText) {
|
||||
passedTests++;
|
||||
console.log(` ✅ Image reset button works correctly`);
|
||||
} else {
|
||||
console.log(` ❌ Image reset button failed`);
|
||||
console.log(` Expected: "${originalAltText}"`);
|
||||
console.log(` Got: "${resetAltText}"`);
|
||||
}
|
||||
|
||||
// Close editor
|
||||
const cancelBtn = Array.from(floatingMenu.querySelectorAll('button'))
|
||||
.find(btn => btn.textContent.includes('Cancel'));
|
||||
if (cancelBtn) {
|
||||
cancelBtn.click();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
showFinalResults();
|
||||
}, 100);
|
||||
|
||||
}, 100);
|
||||
}, 100);
|
||||
|
||||
} else {
|
||||
console.log(` ❌ Missing elements - Alt Text Input: ${!!altTextInput}, Reset Button: ${!!resetButton}`);
|
||||
showFinalResults();
|
||||
}
|
||||
} else {
|
||||
console.log(` ❌ Failed to open image editor`);
|
||||
showFinalResults();
|
||||
}
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const showFinalResults = () => {
|
||||
console.log('\n📊 RESET BUTTON TEST SUMMARY:');
|
||||
console.log(` Total tests: ${testCount}`);
|
||||
console.log(` Passed tests: ${passedTests}`);
|
||||
console.log(` Success rate: ${Math.round((passedTests / testCount) * 100)}%`);
|
||||
|
||||
if (passedTests === testCount) {
|
||||
console.log('\n🎉 All reset buttons working correctly!');
|
||||
} else {
|
||||
console.log('\n⚠️ Some reset buttons need fixes');
|
||||
}
|
||||
};
|
||||
|
||||
// Start testing with text sections
|
||||
testTextSectionReset(0);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Test failed:', error.message);
|
||||
console.error(error.stack);
|
||||
}
|
||||
}, 1000);
|
||||
Reference in New Issue
Block a user