markitect-main/markitect/static/js/tests/test-domrenderer-extraction.js

#!/usr/bin/env node

/**
 * TDD Test for DOMRenderer Component Extraction
 *
 * Tests the extraction of DOMRenderer from the monolithic editor.js
 * DOMRenderer handles all DOM interactions and UI rendering.
 */

const RefactorTestRunner = require('./refactor-test-runner.js');

const runner = new RefactorTestRunner();

// Define expected DOMRenderer API
const EXPECTED_DOMRENDERER_API = [
    'constructor',
    'renderAllSections',
    'renderSection',
    'showEditor',
    'hideCurrentEditor',
    'showImageEditor',
    'findSectionElement',
    'handleSectionClick',
    'setupSectionElement',
    'trackEvent',
    'getEventStats'
    // Note: addGlobalControls and debug methods are on MarkitectCleanEditor, not DOMRenderer
];

runner.describe('DOMRenderer Component Extraction', () => {

    runner.it('should define expected API methods', () => {
        const expectedMethods = EXPECTED_DOMRENDERER_API;
        runner.expect(expectedMethods.length).toBe(11);
        runner.expect(expectedMethods).toContain('renderAllSections');
        runner.expect(expectedMethods).toContain('showEditor');
        runner.expect(expectedMethods).toContain('handleSectionClick');
    });

    runner.it('should extract from monolithic editor.js', () => {
        // Load the monolithic editor.js to extract DOMRenderer
        delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')];

        try {
            const editorModule = require('/home/worsch/markitect_project/markitect/static/editor.js');
            runner.expect(editorModule.DOMRenderer).toBeTruthy();
            // Set global for other tests
            global.DOMRenderer = editorModule.DOMRenderer;
            global.SectionManager = editorModule.SectionManager;
        } catch (error) {
            throw new Error(`Failed to load monolithic editor.js: ${error.message}`);
        }
    });

    runner.it('should preserve DOMRenderer constructor functionality', () => {
        const DOMRenderer = global.DOMRenderer;
        const SectionManager = global.SectionManager;

        const container = document.createElement('div');
        const sectionManager = new SectionManager();

        const renderer = new DOMRenderer(sectionManager, container);
        runner.expect(renderer).toBeInstanceOf(DOMRenderer);
        runner.expect(renderer.sectionManager).toBe(sectionManager);
        runner.expect(renderer.container).toBe(container);
    });

    runner.it('should preserve section rendering functionality', () => {
        const DOMRenderer = global.DOMRenderer;
        const SectionManager = global.SectionManager;

        const container = document.createElement('div');
        container.innerHTML = '<div id="markdown-content"></div>';

        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);

        const testMarkdown = '# Test Heading\nTest content';
        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);

        // This should not throw an error
        renderer.renderAllSections(sections);

        // Check that some content was rendered
        runner.expect(container.innerHTML.length).toBe(container.innerHTML.length); // Basic sanity check
    });

    runner.it('should preserve findSectionElement functionality', () => {
        const DOMRenderer = global.DOMRenderer;
        const SectionManager = global.SectionManager;

        const container = document.createElement('div');
        container.innerHTML = '<div id="markdown-content"></div>';

        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);

        const testMarkdown = '# Test Heading\nTest content';
        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
        renderer.renderAllSections(sections);

        const sectionId = sections[0].id;
        const element = renderer.findSectionElement(sectionId);

        // Should find an element or return null (not throw error)
        runner.expect(typeof element === 'object').toBeTruthy();
    });

    runner.it('should preserve event tracking functionality', () => {
        const DOMRenderer = global.DOMRenderer;
        const SectionManager = global.SectionManager;

        const container = document.createElement('div');
        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);

        // Should have trackEvent method
        runner.expect(typeof renderer.trackEvent === 'function').toBeTruthy();

        // Should be able to track an event
        renderer.trackEvent('test-event', { data: 'test' });

        // Should have getEventStats method
        runner.expect(typeof renderer.getEventStats === 'function').toBeTruthy();

        const stats = renderer.getEventStats();
        runner.expect(typeof stats === 'object').toBeTruthy();
    });

    runner.it('should preserve editor showing functionality', () => {
        const DOMRenderer = global.DOMRenderer;
        const SectionManager = global.SectionManager;

        const container = document.createElement('div');
        container.innerHTML = '<div id="markdown-content"></div>';

        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);

        const testMarkdown = '# Test Heading\nTest content';
        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
        renderer.renderAllSections(sections);

        const sectionId = sections[0].id;

        // showEditor should not throw error
        try {
            renderer.showEditor(sectionId, 'test content');
            runner.expect(true).toBeTruthy(); // If we get here, no error was thrown
        } catch (error) {
            // Some errors are expected if DOM structure isn't complete
            runner.expect(typeof error.message === 'string').toBeTruthy();
        }
    });

    runner.it('should have core DOM rendering methods', () => {
        const DOMRenderer = global.DOMRenderer;
        const SectionManager = global.SectionManager;

        const container = document.createElement('div');
        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);

        // Should have core methods
        runner.expect(typeof renderer.renderAllSections === 'function').toBeTruthy();
        runner.expect(typeof renderer.showEditor === 'function').toBeTruthy();
        runner.expect(typeof renderer.findSectionElement === 'function').toBeTruthy();
        runner.expect(typeof renderer.trackEvent === 'function').toBeTruthy();
    });
});

// Export API tests for use during extraction
const DOMRENDERER_API_TESTS = [
    (DOMRenderer, SectionManager) => {
        const container = document.createElement('div');
        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);
        if (!renderer.sectionManager) {
            throw new Error('sectionManager property missing');
        }
    },
    (DOMRenderer, SectionManager) => {
        const container = document.createElement('div');
        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);
        if (typeof renderer.renderAllSections !== 'function') {
            throw new Error('renderAllSections method missing');
        }
    },
    (DOMRenderer, SectionManager) => {
        const container = document.createElement('div');
        const sectionManager = new SectionManager();
        const renderer = new DOMRenderer(sectionManager, container);
        if (typeof renderer.showEditor !== 'function') {
            throw new Error('showEditor method missing');
        }
    }
];

module.exports = {
    runner,
    EXPECTED_DOMRENDERER_API,
    DOMRENDERER_API_TESTS
};

// Run tests if called directly
if (require.main === module) {
    console.log('🧪 Testing DOMRenderer Component Extraction');
    runner.run().then(() => {
        console.log('✅ DOMRenderer extraction tests completed');
    });
}