@violice/rmu 0.2.7 → 0.2.8

package/src/integration.test.tsx

@@ -0,0 +1,266 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, act, cleanup } from '@testing-library/react';
+import React from 'react';
+import { RMUProvider } from './rmu-provider';
+import { RMUOutlet } from './rmu-outlet';
+import { openModal, closeModal } from './events';
+import { emitter } from './emitter';
+
+describe('Integration: Full RMU Workflow', () => {
+  beforeEach(() => {
+    // Clear all emitter subscriptions before each test
+    emitter._clear();
+  });
+
+  afterEach(() => {
+    // Clean up the DOM after each test
+    cleanup();
+  });
+
+  it('should handle complete workflow with single outlet', async () => {
+    render(
+      <RMUProvider>
+        <div data-testid="app">App Content</div>
+        <RMUOutlet />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    // Initial state - app content visible, no modals
+    expect(screen.getByTestId('app')).toBeDefined();
+    expect(screen.queryByTestId('modal-1')).toBeNull();
+
+    // Open first modal
+    let modal1Info: { modalId: string; outletId: string };
+    act(() => {
+      modal1Info = openModal(<div data-testid="modal-1">First Modal</div>);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('modal-1')).toBeDefined();
+    });
+
+    // Open second modal
+    let modal2Info: { modalId: string; outletId: string };
+    act(() => {
+      modal2Info = openModal(<div data-testid="modal-2">Second Modal</div>);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('modal-1')).toBeDefined();
+      expect(screen.getByTestId('modal-2')).toBeDefined();
+    });
+
+    // Close first modal
+    act(() => {
+      closeModal(modal1Info);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal-1')).toBeNull();
+      expect(screen.getByTestId('modal-2')).toBeDefined();
+    });
+
+    // Close second modal
+    act(() => {
+      closeModal(modal2Info);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('modal-1')).toBeNull();
+      expect(screen.queryByTestId('modal-2')).toBeNull();
+    });
+
+    // App content still visible
+    expect(screen.getByTestId('app')).toBeDefined();
+  });
+
+  it('should handle workflow with multiple outlets', async () => {
+    render(
+      <RMUProvider>
+        <div data-testid="sidebar">
+          <RMUOutlet outletId="sidebar-outlet" />
+        </div>
+        <div data-testid="main">
+          <RMUOutlet outletId="main-outlet" />
+        </div>
+      </RMUProvider>
+    );
+
+    // Wait for outlets to be registered
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    // Open modals in different outlets
+    let sidebarModalInfo: { modalId: string; outletId: string };
+    let mainModalInfo: { modalId: string; outletId: string };
+
+    act(() => {
+      sidebarModalInfo = openModal(
+        <div data-testid="sidebar-modal">Sidebar Modal</div>,
+        { outletId: 'sidebar-outlet' }
+      );
+      mainModalInfo = openModal(
+        <div data-testid="main-modal">Main Modal</div>,
+        { outletId: 'main-outlet' }
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sidebar-modal')).toBeDefined();
+      expect(screen.getByTestId('main-modal')).toBeDefined();
+    });
+
+    // Verify modals are in correct outlets
+    expect(screen.getByTestId('sidebar').contains(screen.getByTestId('sidebar-modal'))).toBe(true);
+    expect(screen.getByTestId('main').contains(screen.getByTestId('main-modal'))).toBe(true);
+
+    // Close sidebar modal only
+    act(() => {
+      closeModal(sidebarModalInfo);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('sidebar-modal')).toBeNull();
+      expect(screen.getByTestId('main-modal')).toBeDefined();
+    });
+
+    // Close main modal
+    act(() => {
+      closeModal(mainModalInfo);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('sidebar-modal')).toBeNull();
+      expect(screen.queryByTestId('main-modal')).toBeNull();
+    });
+  });
+
+  it('should handle rapid open/close operations', async () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    const modals: Array<{ modalId: string; outletId: string }> = [];
+
+    // Open 5 modals sequentially (with small delays to avoid ID collision)
+    for (let i = 0; i < 5; i++) {
+      act(() => {
+        modals.push(
+          openModal(<div data-testid={`rapid-modal-${i}`}>Modal {i}</div>)
+        );
+      });
+      // Small delay to ensure unique IDs
+      await new Promise(resolve => setTimeout(resolve, 10));
+    }
+
+    await waitFor(() => {
+      for (let i = 0; i < 5; i++) {
+        expect(screen.getByTestId(`rapid-modal-${i}`)).toBeDefined();
+      }
+    });
+
+    // Close all modals
+    act(() => {
+      modals.forEach(modalInfo => closeModal(modalInfo));
+    });
+
+    await waitFor(() => {
+      for (let i = 0; i < 5; i++) {
+        expect(screen.queryByTestId(`rapid-modal-${i}`)).toBeNull();
+      }
+    });
+  });
+
+  it('should handle modal with complex React components', async () => {
+    const ComplexComponent = ({ title, onAction }: { title: string; onAction?: () => void }) => (
+      <div data-testid="complex-modal">
+        <h1>{title}</h1>
+        <button data-testid="action-btn" onClick={onAction}>
+          Action
+        </button>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+        </ul>
+      </div>
+    );
+
+    render(
+      <RMUProvider>
+        <RMUOutlet />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    const actionHandler = vi.fn();
+
+    act(() => {
+      openModal(<ComplexComponent title="Test Modal" onAction={actionHandler} />);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('complex-modal')).toBeDefined();
+      expect(screen.getByText('Test Modal')).toBeDefined();
+      expect(screen.getByTestId('action-btn')).toBeDefined();
+      expect(screen.getByText('Item 1')).toBeDefined();
+      expect(screen.getByText('Item 2')).toBeDefined();
+    });
+  });
+
+  it('should handle outlet removal and re-addition', async () => {
+    const { unmount } = render(
+      <RMUProvider>
+        <RMUOutlet outletId="dynamic-outlet" />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    // Open a modal
+    let modalInfo: { modalId: string; outletId: string };
+    act(() => {
+      modalInfo = openModal(
+        <div data-testid="dynamic-modal">Dynamic Modal</div>,
+        { outletId: 'dynamic-outlet' }
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('dynamic-modal')).toBeDefined();
+    });
+
+    // Unmount the outlet
+    unmount();
+
+    // Re-render with a new outlet (need to use render again after unmount)
+    render(
+      <RMUProvider>
+        <RMUOutlet outletId="dynamic-outlet" />
+      </RMUProvider>
+    );
+
+    // Modal should not be visible after outlet removal and re-addition
+    // because the outlet was removed from state
+    expect(screen.queryByTestId('dynamic-modal')).toBeNull();
+  });
+});

package/src/rmu-outlet.test.tsx

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, act, cleanup } from '@testing-library/react';
+import React from 'react';
+import { RMUProvider } from './rmu-provider';
+import { RMUOutlet } from './rmu-outlet';
+import { openModal, closeModal } from './events';
+import { emitter } from './emitter';
+
+describe('RMUOutlet', () => {
+  beforeEach(() => {
+    // Clear all emitter subscriptions before each test
+    emitter._clear();
+  });
+
+  afterEach(() => {
+    // Clean up the DOM after each test
+    cleanup();
+  });
+
+  it('should throw when used outside RMUProvider', () => {
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => {
+      render(<RMUOutlet />);
+    }).toThrow('RMUProvider not found in component tree');
+
+    consoleSpy.mockRestore();
+  });
+
+  it('should render with default outlet', () => {
+    render(
+      <RMUProvider>
+        <div data-testid="content">content</div>
+        <RMUOutlet />
+      </RMUProvider>
+    );
+
+    expect(screen.getByTestId('content')).toBeDefined();
+  });
+
+  it('should render with custom outlet id', () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet outletId="custom-outlet" />
+      </RMUProvider>
+    );
+
+    // The outlet should be rendered without errors
+    expect(document.body).toBeDefined();
+  });
+
+  it('should render multiple outlets', () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet outletId="outlet-1" />
+        <RMUOutlet outletId="outlet-2" />
+      </RMUProvider>
+    );
+
+    // Both outlets should be rendered without errors
+    expect(document.body).toBeDefined();
+  });
+
+  it('should render modal when opened via events', async () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered via useEffect
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    const modalContent = <div data-testid="modal-content">Modal Content</div>;
+
+    act(() => {
+      openModal(modalContent);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('modal-content')).toBeDefined();
+    });
+  });
+
+  it('should render modal in custom outlet', async () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet outletId="custom-outlet" />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered via useEffect
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    const modalContent = <div data-testid="custom-modal">Custom Modal</div>;
+
+    act(() => {
+      openModal(modalContent, { outletId: 'custom-outlet' });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('custom-modal')).toBeDefined();
+    });
+  });
+
+  it('should not render modal in wrong outlet', async () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet outletId="outlet-1" />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered via useEffect
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    const modalContent = <div data-testid="wrong-modal">Wrong Modal</div>;
+
+    // Opening modal in non-existent outlet should throw
+    expect(() => {
+      act(() => {
+        openModal(modalContent, { outletId: 'outlet-2' });
+      });
+    }).toThrow('Outlet with id outlet-2 not found');
+
+    // Modal should not be rendered in outlet-1
+    expect(screen.queryByTestId('wrong-modal')).toBeNull();
+  });
+
+  it('should remove modal when closed', async () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered via useEffect
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    const modalContent = <div data-testid="closable-modal">Closable Modal</div>;
+
+    let modalInfo: { modalId: string; outletId: string };
+
+    act(() => {
+      modalInfo = openModal(modalContent);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('closable-modal')).toBeDefined();
+    });
+
+    act(() => {
+      closeModal(modalInfo);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('closable-modal')).toBeNull();
+    });
+  });
+
+  it('should render multiple modals in same outlet', async () => {
+    render(
+      <RMUProvider>
+        <RMUOutlet />
+      </RMUProvider>
+    );
+
+    // Wait for outlet to be registered via useEffect
+    await waitFor(() => {
+      expect(document.body).toBeDefined();
+    });
+
+    // Open first modal
+    act(() => {
+      openModal(<div data-testid="modal-1">Modal 1</div>);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('modal-1')).toBeDefined();
+    });
+
+    // Open second modal after first one is rendered
+    act(() => {
+      openModal(<div data-testid="modal-2">Modal 2</div>);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('modal-1')).toBeDefined();
+      expect(screen.getByTestId('modal-2')).toBeDefined();
+    });
+  });
+
+  it('should cleanup outlet on unmount', () => {
+    const { unmount } = render(
+      <RMUProvider>
+        <RMUOutlet outletId="cleanup-outlet" />
+      </RMUProvider>
+    );
+
+    // Unmount the outlet
+    unmount();
+
+    // The component should unmount without errors
+    expect(document.body).toBeDefined();
+  });
+});

package/src/rmu-outlet.tsx

@@ -1,7 +1,8 @@
 import React, { Fragment, useContext, useEffect } from 'react';
 import { RMUContext } from './rmu-context';
+import { RMU_DEFAULT_OUTLET_ID } from './constants';
 
-export const RMUOutlet = ({ outletId = 'rmu-default-outlet' }) => {
+export const RMUOutlet = ({ outletId = RMU_DEFAULT_OUTLET_ID }) => {
   const ctx = useContext(RMUContext);
 
   if (!ctx) {
@@ -15,7 +16,7 @@ export const RMUOutlet = ({ outletId = 'rmu-default-outlet' }) => {
     return () => {
       removeOutlet(outletId);
     };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []);
 
   const modals = outlets[outletId] ?? {};
 

package/src/rmu-provider.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { RMUProvider } from './rmu-provider';
+
+describe('RMUProvider', () => {
+  it('should render children', () => {
+    render(
+      <RMUProvider>
+        <div data-testid="child">Child Content</div>
+      </RMUProvider>
+    );
+
+    expect(screen.getByTestId('child')).toBeDefined();
+  });
+});

package/src/types.ts

@@ -1,23 +1,27 @@
 import { ReactNode } from 'react';
 
+export enum RMUEventType {
+  OpenModal = 'RMU:OPEN_MODAL',
+  CloseModal = 'RMU:CLOSE_MODAL',
+}
+
 export type RMUContextState = {
   outlets: Record<string, Record<string, ReactNode>>;
-  openModal: ({
-    modalId,
-    modalComponent,
-    outletId,
-  }: {
-    modalId: string;
-    modalComponent: ReactNode;
-    outletId: string;
-  }) => void;
-  closeModal: ({
-    modalId,
-    outletId,
-  }: {
-    modalId: string;
-    outletId: string;
-  }) => void;
+  openModal: (payload: OpenModalPayload) => void;
+  closeModal: (payload: CloseModalPayload) => void;
   addOutlet: (outletId: string) => void;
   removeOutlet: (outletId: string) => void;
 };
+
+export type OpenModalPayload = {
+  modalId: string;
+  modalComponent: ReactNode;
+  outletId: string;
+};
+
+export type CloseModalPayload = {
+  modalId: string;
+  outletId: string;
+};
+
+export type RMUEventPayload = OpenModalPayload | CloseModalPayload;

package/src/use-rmu-events.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useRMUEvents } from './use-rmu-events';
+import { emitter } from './emitter';
+import { RMU_EVENTS } from './constants';
+import { RMUContextState } from './types';
+import React from 'react';
+
+describe('useRMUEvents', () => {
+  const mockOpenModal = vi.fn();
+  const mockCloseModal = vi.fn();
+  const mockAddOutlet = vi.fn();
+  const mockRemoveOutlet = vi.fn();
+
+  const mockCtx: RMUContextState = {
+    outlets: {},
+    openModal: mockOpenModal,
+    closeModal: mockCloseModal,
+    addOutlet: mockAddOutlet,
+    removeOutlet: mockRemoveOutlet,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Clear all emitter subscriptions before each test
+    emitter._clear();
+  });
+
+  it('should subscribe to open and close events on mount', () => {
+    renderHook(() => useRMUEvents(mockCtx));
+
+    // Emit open event and verify it calls openModal
+    const mockComponent = React.createElement('div', null, 'Test');
+    emitter.emit(RMU_EVENTS.open, {
+      modalId: 'test-modal',
+      modalComponent: mockComponent,
+      outletId: 'test-outlet',
+    });
+
+    expect(mockOpenModal).toHaveBeenCalledWith({
+      modalId: 'test-modal',
+      modalComponent: mockComponent,
+      outletId: 'test-outlet',
+    });
+
+    // Emit close event and verify it calls closeModal
+    emitter.emit(RMU_EVENTS.close, {
+      modalId: 'test-modal',
+      outletId: 'test-outlet',
+    });
+
+    expect(mockCloseModal).toHaveBeenCalledWith({
+      modalId: 'test-modal',
+      outletId: 'test-outlet',
+    });
+  });
+
+  it('should unsubscribe from events on unmount', () => {
+    const { unmount } = renderHook(() => useRMUEvents(mockCtx));
+
+    // Clear mocks after subscription
+    vi.clearAllMocks();
+
+    // Unmount the hook
+    unmount();
+
+    // Emit events after unmount - handlers should not be called
+    const mockComponent = React.createElement('div', null, 'Test');
+    emitter.emit(RMU_EVENTS.open, {
+      modalId: 'test-modal',
+      modalComponent: mockComponent,
+      outletId: 'test-outlet',
+    });
+
+    emitter.emit(RMU_EVENTS.close, {
+      modalId: 'test-modal',
+      outletId: 'test-outlet',
+    });
+
+    expect(mockOpenModal).not.toHaveBeenCalled();
+    expect(mockCloseModal).not.toHaveBeenCalled();
+  });
+
+  it('should handle multiple open and close events', () => {
+    renderHook(() => useRMUEvents(mockCtx));
+
+    const mockComponent = React.createElement('div', null, 'Test');
+
+    // Emit multiple open events
+    emitter.emit(RMU_EVENTS.open, {
+      modalId: 'modal-1',
+      modalComponent: mockComponent,
+      outletId: 'outlet-1',
+    });
+
+    emitter.emit(RMU_EVENTS.open, {
+      modalId: 'modal-2',
+      modalComponent: mockComponent,
+      outletId: 'outlet-1',
+    });
+
+    expect(mockOpenModal).toHaveBeenCalledTimes(2);
+
+    // Emit multiple close events
+    emitter.emit(RMU_EVENTS.close, {
+      modalId: 'modal-1',
+      outletId: 'outlet-1',
+    });
+
+    emitter.emit(RMU_EVENTS.close, {
+      modalId: 'modal-2',
+      outletId: 'outlet-1',
+    });
+
+    expect(mockCloseModal).toHaveBeenCalledTimes(2);
+  });
+});

package/src/use-rmu-events.ts

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
-import { RMUContextState } from './types';
-import { RMU_EVENTS } from './events';
+import { RMUContextState, OpenModalPayload, CloseModalPayload } from './types';
+import { RMU_EVENTS } from './constants';
 import { emitter } from './emitter';
 
 export const useRMUEvents = (ctx: RMUContextState) => {
   const events = {
-    open: (payload: any) => ctx.openModal(payload),
-    close: (payload: any) => ctx.closeModal(payload),
+    open: (payload: OpenModalPayload) => ctx.openModal(payload),
+    close: (payload: CloseModalPayload) => ctx.closeModal(payload),
   };
 
   useEffect(() => {
@@ -19,5 +19,5 @@ export const useRMUEvents = (ctx: RMUContextState) => {
         emitter.unsubscribe(RMU_EVENTS[event], events[event]);
       });
     };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []);
 };