michaelschiemer/tests/JavaScript/LiveComponentUIEventHandler.test.js

/**
 * Tests for UIEventHandler
 */

import { UIEventHandler } from '../../resources/js/modules/livecomponent/UIEventHandler.js';
import { LiveComponentUIHelper } from '../../resources/js/modules/livecomponent/LiveComponentUIHelper.js';

describe('UIEventHandler', () => {
    let uiEventHandler;
    let mockManager;
    let mockUIHelper;

    beforeEach(() => {
        // Create mock LiveComponentManager
        mockManager = {
            uiHelper: null
        };

        // Create mock UIHelper
        mockUIHelper = {
            showNotification: jest.fn(),
            hideNotification: jest.fn(),
            showDialog: jest.fn(),
            closeDialog: jest.fn(),
            showConfirm: jest.fn().mockResolvedValue(true),
            showAlert: jest.fn()
        };

        mockManager.uiHelper = mockUIHelper;

        // Create UIEventHandler instance
        uiEventHandler = new UIEventHandler(mockManager);
    });

    afterEach(() => {
        // Cleanup event listeners
        if (uiEventHandler) {
            uiEventHandler.destroy();
        }
    });

    describe('Initialization', () => {
        test('should initialize event listeners', () => {
            expect(uiEventHandler.isInitialized).toBe(false);
            uiEventHandler.init();
            expect(uiEventHandler.isInitialized).toBe(true);
        });

        test('should not initialize twice', () => {
            uiEventHandler.init();
            const listenerCount = uiEventHandler.eventListeners.size;
            uiEventHandler.init();
            expect(uiEventHandler.eventListeners.size).toBe(listenerCount);
        });
    });

    describe('Toast Events', () => {
        beforeEach(() => {
            uiEventHandler.init();
        });

        test('should handle toast:show event', () => {
            const event = new CustomEvent('toast:show', {
                detail: {
                    message: 'Test message',
                    type: 'success',
                    duration: 5000,
                    position: 'top-right',
                    componentId: 'test-component'
                }
            });

            document.dispatchEvent(event);

            expect(mockUIHelper.showNotification).toHaveBeenCalledWith('test-component', {
                message: 'Test message',
                type: 'success',
                duration: 5000,
                position: 'top-right'
            });
        });

        test('should handle toast:show with defaults', () => {
            const event = new CustomEvent('toast:show', {
                detail: {
                    message: 'Test message'
                }
            });

            document.dispatchEvent(event);

            expect(mockUIHelper.showNotification).toHaveBeenCalledWith('global', {
                message: 'Test message',
                type: 'info',
                duration: 5000,
                position: 'top-right'
            });
        });

        test('should handle toast:hide event', () => {
            const event = new CustomEvent('toast:hide', {
                detail: {
                    componentId: 'test-component'
                }
            });

            document.dispatchEvent(event);

            expect(mockUIHelper.hideNotification).toHaveBeenCalledWith('test-component');
        });

        test('should handle livecomponent:toast:show event', () => {
            const event = new CustomEvent('livecomponent:toast:show', {
                detail: {
                    message: 'Test message',
                    type: 'info'
                }
            });

            document.dispatchEvent(event);

            expect(mockUIHelper.showNotification).toHaveBeenCalled();
        });
    });

    describe('Modal Events', () => {
        beforeEach(() => {
            uiEventHandler.init();
        });

        test('should handle modal:show event', () => {
            const event = new CustomEvent('modal:show', {
                detail: {
                    componentId: 'test-component',
                    title: 'Test Modal',
                    content: '<p>Test content</p>',
                    size: 'medium',
                    buttons: []
                }
            });

            document.dispatchEvent(event);

            expect(mockUIHelper.showDialog).toHaveBeenCalledWith('test-component', {
                title: 'Test Modal',
                content: '<p>Test content</p>',
                size: 'medium',
                buttons: [],
                closeOnBackdrop: true,
                closeOnEscape: true,
                onClose: null,
                onConfirm: null
            });
        });

        test('should handle modal:close event', () => {
            const event = new CustomEvent('modal:close', {
                detail: {
                    componentId: 'test-component'
                }
            });

            document.dispatchEvent(event);

            expect(mockUIHelper.closeDialog).toHaveBeenCalledWith('test-component');
        });

        test('should handle modal:confirm event', async () => {
            const event = new CustomEvent('modal:confirm', {
                detail: {
                    componentId: 'test-component',
                    title: 'Confirm',
                    message: 'Are you sure?',
                    confirmText: 'Yes',
                    cancelText: 'No'
                }
            });

            document.dispatchEvent(event);

            // Wait for promise to resolve
            await new Promise(resolve => setTimeout(resolve, 100));

            expect(mockUIHelper.showConfirm).toHaveBeenCalledWith('test-component', {
                title: 'Confirm',
                message: 'Are you sure?',
                confirmText: 'Yes',
                cancelText: 'No',
                confirmClass: 'btn-primary',
                cancelClass: 'btn-secondary'
            });
        });

        test('should handle modal:alert event', () => {
            const event = new CustomEvent('modal:alert', {
                detail: {
                    componentId: 'test-component',
                    title: 'Alert',
                    message: 'Alert message',
                    type: 'info',
                    buttonText: 'OK'
                }
            });

            document.dispatchEvent(event);

            expect(mockUIHelper.showAlert).toHaveBeenCalledWith('test-component', {
                title: 'Alert',
                message: 'Alert message',
                buttonText: 'OK',
                type: 'info'
            });
        });
    });

    describe('Error Handling', () => {
        beforeEach(() => {
            uiEventHandler.init();
        });

        test('should handle errors gracefully', () => {
            // Mock showNotification to throw error
            mockUIHelper.showNotification = jest.fn(() => {
                throw new Error('Test error');
            });

            const consoleSpy = jest.spyOn(console, 'error').mockImplementation();

            const event = new CustomEvent('toast:show', {
                detail: {
                    message: 'Test message'
                }
            });

            document.dispatchEvent(event);

            expect(consoleSpy).toHaveBeenCalled();
            consoleSpy.mockRestore();
        });
    });

    describe('Cleanup', () => {
        test('should cleanup event listeners on destroy', () => {
            uiEventHandler.init();
            const listenerCount = uiEventHandler.eventListeners.size;
            expect(listenerCount).toBeGreaterThan(0);

            uiEventHandler.destroy();

            expect(uiEventHandler.eventListeners.size).toBe(0);
            expect(uiEventHandler.isInitialized).toBe(false);
        });
    });
});