testdrive-jsui/js/tests/component-integration.test.js

/**
 * Component Integration Tests (Jest Version)
 *
 * Tests that extracted components work together properly.
 * Verifies the complete workflow: Section Creation → Rendering → Editing → Saving
 */

describe('Component Integration Tests', () => {
    let SectionManager, Section, DOMRenderer, FloatingMenu, EditState;
    let sectionManager, domRenderer, container;

    beforeAll(() => {
        // Load extracted components
        const sectionModule = require('../core/section-manager.js');
        const domModule = require('../components/dom-renderer.js');

        SectionManager = sectionModule.SectionManager;
        Section = sectionModule.Section;
        DOMRenderer = domModule.DOMRenderer;
        FloatingMenu = domModule.FloatingMenu;
        EditState = sectionModule.EditState;
    });

    beforeEach(() => {
        // Setup fresh container and components for each test
        container = document.createElement('div');
        container.innerHTML = '<div id="markdown-content"></div>';
        document.body.appendChild(container);

        sectionManager = new SectionManager();
        domRenderer = new DOMRenderer(sectionManager, container);
    });

    afterEach(() => {
        // Cleanup
        if (container && container.parentNode) {
            container.parentNode.removeChild(container);
        }
    });

    test('should load all extracted components', () => {
        expect(SectionManager).toBeTruthy();
        expect(Section).toBeTruthy();
        expect(DOMRenderer).toBeTruthy();
        expect(FloatingMenu).toBeTruthy();
        expect(EditState).toBeTruthy();
    });

    test('should support complete section creation workflow', () => {
        // Test basic functionality without complex DOM manipulation
        expect(sectionManager).toBeInstanceOf(SectionManager);
        expect(domRenderer).toBeInstanceOf(DOMRenderer);

        // Test section creation from markdown
        const testMarkdown = `# Test Header

This is test content.

![Test Image](test.jpg)`;

        // Create sections from markdown (the right method)
        expect(() => {
            const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
            expect(sections.length).toBeGreaterThan(0);
        }).not.toThrow();
    });

    test('should have core DOM rendering methods', () => {
        expect(typeof domRenderer.renderAllSections).toBe('function');
        expect(typeof domRenderer.showEditor).toBe('function');
        expect(typeof domRenderer.findSectionElement).toBe('function');
    });

    test('should preserve editor showing functionality', () => {
        const mockSection = {
            id: 'test-section-001',
            type: 'header',
            content: 'Test content'
        };

        // Test basic editor functionality
        expect(() => {
            domRenderer.showEditor(mockSection.id);
        }).not.toThrow();
    });
});