markdown-converter/tests/modal-manager.test.js

/**
 * Tests for ModalManager
 * Covers the three bugs fixed in modal refactor:
 *   1. open() animation: reflow between hidden removal and open class add
 *   2. close() cleanup: 'hidden' class restored after transition
 *   3. State management: isOpen() accuracy
 */

const { ModalManager } = require('../src/utils/ModalManager');

function createModalElement(id = 'test-modal') {
    const modal = document.createElement('div');
    modal.id = id;
    modal.className = 'modal hidden';
    modal.setAttribute('role', 'dialog');
    modal.setAttribute('aria-modal', 'true');

    const backdrop = document.createElement('div');
    backdrop.className = 'modal-backdrop';
    backdrop.setAttribute('data-close', '');

    const content = document.createElement('div');
    content.className = 'modal-content';

    const header = document.createElement('div');
    header.className = 'modal-header';

    const closeBtn = document.createElement('button');
    closeBtn.className = 'modal-close';
    closeBtn.setAttribute('aria-label', 'Close');

    const body = document.createElement('div');
    body.className = 'modal-body';

    const input = document.createElement('input');
    input.type = 'text';

    body.appendChild(input);
    header.appendChild(closeBtn);
    content.appendChild(header);
    content.appendChild(body);
    modal.appendChild(backdrop);
    modal.appendChild(content);
    document.body.appendChild(modal);

    return modal;
}

describe('ModalManager', () => {
    let modal;
    let manager;

    beforeEach(() => {
        modal = createModalElement();
        manager = new ModalManager(modal);
    });

    afterEach(() => {
        manager.destroy();
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
        document.body.style.overflow = '';
    });

    // =========================================================
    // open()
    // =========================================================

    describe('open()', () => {
        test('removes hidden class and adds open class', () => {
            expect(modal.classList.contains('hidden')).toBe(true);
            expect(modal.classList.contains('open')).toBe(false);

            manager.open();

            expect(modal.classList.contains('hidden')).toBe(false);
            expect(modal.classList.contains('open')).toBe(true);
        });

        test('sets isOpen to true', () => {
            expect(manager.isOpen()).toBe(false);
            manager.open();
            expect(manager.isOpen()).toBe(true);
        });

        test('prevents body scroll', () => {
            manager.open();
            expect(document.body.style.overflow).toBe('hidden');
        });

        test('does not open again if already open', () => {
            manager.open();
            manager.open(); // second call should be no-op
            expect(manager.isOpen()).toBe(true);
        });

        test('calls onOpen callback', () => {
            const onOpen = jest.fn();
            manager.destroy();
            manager = new ModalManager(modal, { onOpen });
            manager.open();
            expect(onOpen).toHaveBeenCalledTimes(1);
        });

        test('dispatches modal:open custom event', () => {
            const handler = jest.fn();
            modal.addEventListener('modal:open', handler);
            manager.open();
            expect(handler).toHaveBeenCalledTimes(1);
        });
    });

    // =========================================================
    // close()
    // =========================================================

    describe('close()', () => {
        beforeEach(() => {
            manager.open();
        });

        test('removes open class', () => {
            expect(modal.classList.contains('open')).toBe(true);
            manager.close();
            expect(modal.classList.contains('open')).toBe(false);
        });

        test('sets isOpen to false immediately', () => {
            manager.close();
            expect(manager.isOpen()).toBe(false);
        });

        test('restores body scroll when no modals remain open', () => {
            manager.close();
            expect(document.body.style.overflow).toBe('');
        });

        test('adds hidden class after transitionend event fires', () => {
            manager.close();

            // Immediately after close(): hidden should NOT yet be added —
            // the close animation is still in progress.
            // (This is the bug that existed before the fix.)
            expect(modal.classList.contains('hidden')).toBe(false);

            // Simulate the CSS transition completing
            const event = new Event('transitionend');
            Object.defineProperty(event, 'target', { value: modal, writable: false });
            modal.dispatchEvent(event);

            expect(modal.classList.contains('hidden')).toBe(true);
        });

        test('adds hidden class via 250ms timeout fallback when transitionend never fires', () => {
            jest.useFakeTimers();

            manager.close();
            expect(modal.classList.contains('hidden')).toBe(false);

            // Advance past the fallback timeout (250ms)
            jest.advanceTimersByTime(300);

            expect(modal.classList.contains('hidden')).toBe(true);

            jest.useRealTimers();
        });

        test('does not add hidden class if modal is reopened before timeout fires', () => {
            jest.useFakeTimers();

            manager.close();
            jest.advanceTimersByTime(100); // halfway through timeout

            // Re-open the modal before the timeout fires
            manager.open();

            jest.advanceTimersByTime(200); // past original timeout expiry

            // Modal was reopened, so hidden must NOT have been added
            expect(modal.classList.contains('hidden')).toBe(false);
            expect(modal.classList.contains('open')).toBe(true);

            jest.useRealTimers();
        });

        test('calls onClose callback', () => {
            const onClose = jest.fn();
            manager.destroy();
            manager = new ModalManager(modal, { onClose });
            manager.open();
            manager.close();
            expect(onClose).toHaveBeenCalledTimes(1);
        });

        test('dispatches modal:close custom event', () => {
            const handler = jest.fn();
            modal.addEventListener('modal:close', handler);
            manager.close();
            expect(handler).toHaveBeenCalledTimes(1);
        });

        test('is a no-op when modal is already closed', () => {
            manager.close(); // close from open
            const onClose = jest.fn();
            manager.destroy();
            manager = new ModalManager(modal, { onClose });
            manager.close(); // call close on an already-closed modal
            expect(onClose).not.toHaveBeenCalled();
        });
    });

    // =========================================================
    // Keyboard interaction
    // =========================================================

    describe('keyboard shortcuts', () => {
        test('Escape key closes an open modal', () => {
            manager.open();
            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
            expect(manager.isOpen()).toBe(false);
        });

        test('Escape key does nothing when modal is already closed', () => {
            expect(() => {
                document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
            }).not.toThrow();
        });

        test('closeOnEscape: false prevents Escape from closing', () => {
            manager.destroy();
            manager = new ModalManager(modal, { closeOnEscape: false });
            manager.open();
            document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
            expect(manager.isOpen()).toBe(true);
        });
    });

    // =========================================================
    // Close triggers
    // =========================================================

    describe('close triggers', () => {
        test('clicking the × close button closes the modal', () => {
            manager.open();
            modal.querySelector('.modal-close').click();
            expect(manager.isOpen()).toBe(false);
        });

        test('clicking backdrop (data-close) closes the modal', () => {
            manager.open();
            modal.querySelector('.modal-backdrop').click();
            expect(manager.isOpen()).toBe(false);
        });

        test('closeOnBackdrop: false prevents backdrop from closing', () => {
            manager.destroy();
            manager = new ModalManager(modal, { closeOnBackdrop: false });
            manager.open();
            modal.querySelector('.modal-backdrop').click();
            expect(manager.isOpen()).toBe(true);
        });
    });

    // =========================================================
    // destroy()
    // =========================================================

    describe('destroy()', () => {
        test('closes modal if open', () => {
            manager.open();
            manager.destroy();
            expect(manager.isOpen()).toBe(false);
        });

        test('does not throw when destroying a closed modal', () => {
            expect(() => manager.destroy()).not.toThrow();
        });
    });
});