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:
239
history/javascript-dev-tests/test_component_positioning.js
Normal file
239
history/javascript-dev-tests/test_component_positioning.js
Normal file
@@ -0,0 +1,239 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* Test Component Positioning
|
||||
*
|
||||
* Tests the new FloatingMenu component's button positioning logic:
|
||||
* - Wide displays: buttons in side margin
|
||||
* - Narrow displays: buttons below content
|
||||
*/
|
||||
|
||||
const { TestRunner } = require('./test_runner.js');
|
||||
const runner = new TestRunner();
|
||||
|
||||
runner.describe('FloatingMenu Component Positioning Tests', () => {
|
||||
|
||||
runner.it('should position buttons in side margin on wide displays', async () => {
|
||||
// Load editor
|
||||
delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')];
|
||||
require('/home/worsch/markitect_project/markitect/static/editor.js');
|
||||
|
||||
if (global.DOMRenderer && global.SectionManager && global.FloatingMenu) {
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = '<div id="markdown-content"></div>';
|
||||
document.body.appendChild(container);
|
||||
|
||||
const manager = new global.SectionManager();
|
||||
const renderer = new global.DOMRenderer(manager, container);
|
||||
|
||||
// Mock wide viewport (≥1200px)
|
||||
Object.defineProperty(window, 'innerWidth', { value: 1400, configurable: true });
|
||||
|
||||
// Create test section
|
||||
const textMarkdown = 'This is a test section for wide display testing.';
|
||||
const sections = manager.createSectionsFromMarkdown(textMarkdown);
|
||||
const textSection = sections[0];
|
||||
|
||||
const mockElement = document.createElement('div');
|
||||
mockElement.setAttribute('data-section-id', textSection.id);
|
||||
Object.defineProperties(mockElement, {
|
||||
getBoundingClientRect: {
|
||||
value: () => ({
|
||||
top: 100,
|
||||
right: 600,
|
||||
bottom: 150,
|
||||
left: 50,
|
||||
width: 550, // Wide content
|
||||
height: 50
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
renderer.findSectionElement = () => mockElement;
|
||||
|
||||
// Create FloatingMenu
|
||||
const floatingMenu = new global.FloatingMenu(textSection.id, 'text', renderer);
|
||||
|
||||
const testContent = document.createElement('div');
|
||||
testContent.textContent = 'Test Content';
|
||||
|
||||
const testControls = document.createElement('div');
|
||||
testControls.textContent = 'Test Controls';
|
||||
|
||||
const menuElement = floatingMenu.show(testContent, testControls);
|
||||
|
||||
// Verify menu positioning
|
||||
runner.expect(menuElement).toBeTruthy();
|
||||
runner.expect(menuElement.style.left).toBe('50px'); // Matches element left
|
||||
runner.expect(menuElement.style.width).toBe('550px'); // Matches content width
|
||||
|
||||
// Check if controls are positioned in margin (separate element in body)
|
||||
const controlsElements = document.querySelectorAll('.ui-edit-controls-area');
|
||||
const sideControls = Array.from(controlsElements).find(el =>
|
||||
el.parentElement === document.body &&
|
||||
el.style.position === 'fixed'
|
||||
);
|
||||
|
||||
runner.expect(sideControls).toBeTruthy();
|
||||
runner.expect(sideControls.style.left).toBe('590px'); // 50 + 550 + 20
|
||||
|
||||
// Cleanup
|
||||
floatingMenu.hide();
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
});
|
||||
|
||||
runner.it('should position buttons below content on narrow displays', async () => {
|
||||
if (global.DOMRenderer && global.SectionManager && global.FloatingMenu) {
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = '<div id="markdown-content"></div>';
|
||||
document.body.appendChild(container);
|
||||
|
||||
const manager = new global.SectionManager();
|
||||
const renderer = new global.DOMRenderer(manager, container);
|
||||
|
||||
// Mock narrow viewport (<1200px)
|
||||
Object.defineProperty(window, 'innerWidth', { value: 800, configurable: true });
|
||||
|
||||
// Create test section
|
||||
const textMarkdown = 'This is a test section for narrow display testing.';
|
||||
const sections = manager.createSectionsFromMarkdown(textMarkdown);
|
||||
const textSection = sections[0];
|
||||
|
||||
const mockElement = document.createElement('div');
|
||||
mockElement.setAttribute('data-section-id', textSection.id);
|
||||
Object.defineProperties(mockElement, {
|
||||
getBoundingClientRect: {
|
||||
value: () => ({
|
||||
top: 100,
|
||||
right: 450,
|
||||
bottom: 150,
|
||||
left: 50,
|
||||
width: 400, // Regular content width
|
||||
height: 50
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
renderer.findSectionElement = () => mockElement;
|
||||
|
||||
// Create FloatingMenu
|
||||
const floatingMenu = new global.FloatingMenu(textSection.id, 'text', renderer);
|
||||
|
||||
const testContent = document.createElement('div');
|
||||
testContent.textContent = 'Test Content';
|
||||
|
||||
const testControls = document.createElement('div');
|
||||
testControls.textContent = 'Test Controls';
|
||||
|
||||
const menuElement = floatingMenu.show(testContent, testControls);
|
||||
|
||||
// Verify menu positioning
|
||||
runner.expect(menuElement).toBeTruthy();
|
||||
runner.expect(menuElement.style.left).toBe('50px'); // Matches element left
|
||||
runner.expect(menuElement.style.width).toBe('400px'); // Matches content width
|
||||
|
||||
// Check that controls are inside the main menu (not positioned separately)
|
||||
const controlsInMenu = menuElement.querySelector('.ui-edit-controls-area');
|
||||
runner.expect(controlsInMenu).toBeTruthy();
|
||||
runner.expect(controlsInMenu.style.position).not.toBe('fixed');
|
||||
|
||||
// Verify no separate controls in body
|
||||
const sideControls = Array.from(document.querySelectorAll('.ui-edit-controls-area')).find(el =>
|
||||
el.parentElement === document.body &&
|
||||
el.style.position === 'fixed'
|
||||
);
|
||||
runner.expect(sideControls).toBeFalsy();
|
||||
|
||||
// Cleanup
|
||||
floatingMenu.hide();
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
});
|
||||
|
||||
runner.it('should work correctly with image editor component', async () => {
|
||||
if (global.DOMRenderer && global.SectionManager && global.FloatingMenu) {
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = '<div id="markdown-content"></div>';
|
||||
document.body.appendChild(container);
|
||||
|
||||
const manager = new global.SectionManager();
|
||||
const renderer = new global.DOMRenderer(manager, container);
|
||||
|
||||
// Mock wide viewport
|
||||
Object.defineProperty(window, 'innerWidth', { value: 1400, configurable: true });
|
||||
|
||||
// Create image section
|
||||
const imageMarkdown = '';
|
||||
const sections = manager.createSectionsFromMarkdown(imageMarkdown);
|
||||
const imageSection = sections[0];
|
||||
|
||||
runner.expect(imageSection.isImage()).toBeTruthy();
|
||||
|
||||
const mockElement = document.createElement('div');
|
||||
mockElement.setAttribute('data-section-id', imageSection.id);
|
||||
Object.defineProperties(mockElement, {
|
||||
getBoundingClientRect: {
|
||||
value: () => ({
|
||||
top: 200,
|
||||
right: 500,
|
||||
bottom: 350,
|
||||
left: 100,
|
||||
width: 400,
|
||||
height: 150
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
renderer.findSectionElement = () => mockElement;
|
||||
|
||||
// Create FloatingMenu for image
|
||||
const floatingMenu = new global.FloatingMenu(imageSection.id, 'image', renderer);
|
||||
|
||||
const testContent = document.createElement('div');
|
||||
testContent.innerHTML = '<div class="ui-edit-image-preview">Image Preview</div>';
|
||||
|
||||
const testControls = document.createElement('div');
|
||||
testControls.innerHTML = '<button>Accept</button><button>Cancel</button>';
|
||||
|
||||
const menuElement = floatingMenu.show(testContent, testControls);
|
||||
|
||||
// Verify image editor specific features
|
||||
runner.expect(menuElement).toBeTruthy();
|
||||
runner.expect(menuElement.dataset.editType).toBe('image');
|
||||
|
||||
const dragHandle = menuElement.querySelector('.ui-edit-drag-handle');
|
||||
runner.expect(dragHandle.innerHTML).toContain('🖼️');
|
||||
runner.expect(dragHandle.innerHTML).toContain('Editing Image');
|
||||
|
||||
// Cleanup
|
||||
floatingMenu.hide();
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Run the tests
|
||||
if (require.main === module) {
|
||||
console.log('🔧 Running FloatingMenu Component Positioning Tests');
|
||||
runner.run().then(() => {
|
||||
const results = runner.results;
|
||||
const failed = results.filter(r => r.status === 'FAIL').length;
|
||||
|
||||
if (failed > 0) {
|
||||
console.log(`❌ ${failed} test(s) failed - component positioning needs attention`);
|
||||
results.forEach(result => {
|
||||
if (result.status === 'FAIL') {
|
||||
console.log(`\nFailed test: ${result.name}`);
|
||||
if (result.error) {
|
||||
console.log(`Error: ${result.error}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('✅ All FloatingMenu component positioning tests passed!');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = runner;
|
||||
Reference in New Issue
Block a user