react-broadcast-sync 1.2.0 → 1.3.0

package/src/tests/useBroadcastChannel.test.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react';
+import { renderHook, act, waitFor } from '@testing-library/react';
 import { useBroadcastChannel } from '../hooks/useBroadcastChannel';
 import { getInternalMessageType } from '../utils/messageUtils';
 
@@ -6,15 +6,30 @@ let mockChannels: any[] = [];
 
 class MockBroadcastChannel {
   name: string;
-  onmessage: ((event: MessageEvent) => void) | null = null;
+  _onmessage: ((event: MessageEvent) => void) | null = null;
+  closed = false;
   postMessage = jest.fn();
-  close = jest.fn();
+  close = jest.fn(() => {
+    this.closed = true;
+    this._onmessage = null;
+  });
   addEventListener = jest.fn((event: string, callback: (event: MessageEvent) => void) => {
     if (event === 'message') {
-      this.onmessage = callback;
+      this._onmessage = callback;
+    }
+  });
+  removeEventListener = jest.fn((event: string, callback: (event: MessageEvent) => void) => {
+    if (event === 'message' && this._onmessage === callback) {
+      this._onmessage = null;
     }
   });
-  removeEventListener = jest.fn();
+
+  get onmessage() {
+    return this._onmessage;
+  }
+  set onmessage(fn) {
+    this._onmessage = fn;
+  }
 
   constructor(name: string) {
     this.name = name;
@@ -22,9 +37,8 @@ class MockBroadcastChannel {
   }
 
   simulateMessage(data: any) {
-    if (this.onmessage) {
-      this.onmessage({ data } as MessageEvent);
-    }
+    if (this.closed || !this._onmessage) return;
+    this._onmessage({ data } as MessageEvent);
   }
 }
 
@@ -65,22 +79,17 @@ describe('useBroadcastChannel', () => {
     await waitForChannel();
     const channel = mockChannels[0];
 
-    act(() => {
+    await act(async () => {
       result.current.postMessage('greeting', { text: 'hi' });
-    });
-
-    const incomingMessage = {
-      id: 'external-1',
-      type: 'greeting',
-      message: { text: 'hi' },
-      source: 'another-tab',
-      timestamp: Date.now(),
-    };
-
-    act(() => {
+      const incomingMessage = {
+        id: 'external-1',
+        type: 'greeting',
+        message: { text: 'hi' },
+        source: 'another-tab',
+        timestamp: Date.now(),
+      };
       channel.simulateMessage(incomingMessage);
     });
-
     expect(result.current.messages.length).toBe(1);
     expect(result.current.messages[0].message).toEqual({ text: 'hi' });
   });
@@ -265,30 +274,38 @@ describe('useBroadcastChannel', () => {
 
   it('handles internal clear message (single id) from other source', async () => {
     const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+
     await waitForChannel();
+
     const channel = mockChannels[0];
+    const externalSource = 'external-source';
+
+    const msg = {
+      id: 'to-clear',
+      type: 'test',
+      message: 'should be removed',
+      timestamp: Date.now(),
+      source: externalSource,
+    };
+
+    const internalClear = {
+      id: 'internal-id',
+      type: getInternalMessageType('CLEAR_SENT_MESSAGES', 'test-channel'),
+      message: { ids: ['to-clear'], types: [] },
+      timestamp: Date.now(),
+      source: externalSource,
+    };
 
     act(() => {
-      channel.simulateMessage({
-        id: 'to-clear',
-        type: 'test',
-        message: 'will be cleared',
-        source: 'another-tab',
-        timestamp: Date.now(),
-      });
+      channel.simulateMessage(msg);
     });
 
+    // await waitFor(() => {
     expect(result.current.messages.length).toBe(1);
+    // });
 
-    const internalType = getInternalMessageType('CLEAR_SENT_MESSAGES', 'test-channel');
     act(() => {
-      channel.simulateMessage({
-        id: 'internal-1',
-        type: internalType,
-        message: { ids: ['to-clear'], types: [] },
-        source: 'another-tab',
-        timestamp: Date.now(),
-      });
+      channel.simulateMessage(internalClear);
     });
 
     expect(result.current.messages.length).toBe(0);
@@ -296,40 +313,58 @@ describe('useBroadcastChannel', () => {
 
   it('handles internal clear all messages (wildcard) from other source', async () => {
     const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+
     await waitForChannel();
+
     const channel = mockChannels[0];
+    const externalSource = 'external-source';
 
-    act(() => {
-      channel.simulateMessage({
-        id: 'msg1',
-        type: 'test1',
-        message: 'first',
-        source: 'another-tab',
-        timestamp: Date.now(),
-      });
-      channel.simulateMessage({
-        id: 'msg2',
-        type: 'test2',
-        message: 'second',
-        source: 'another-tab',
-        timestamp: Date.now(),
-      });
+    const msg1 = {
+      id: 'msg1',
+      type: 'type1',
+      message: 'first',
+      timestamp: Date.now(),
+      source: externalSource,
+    };
+
+    const msg2 = {
+      id: 'msg2',
+      type: 'type2',
+      message: 'second',
+      timestamp: Date.now(),
+      source: externalSource,
+    };
+
+    const internalClear = {
+      id: 'internal-id',
+      type: getInternalMessageType('CLEAR_SENT_MESSAGES', 'test-channel'),
+      message: { ids: [], types: [] }, // wildcard
+      timestamp: Date.now(),
+      source: externalSource, // ✅ MUST match msg1/msg2
+    };
+
+    await act(async () => {
+      channel.simulateMessage(msg1);
+    });
+    await act(async () => {
+      channel.simulateMessage(msg2);
     });
 
-    expect(result.current.messages.length).toBe(2);
+    await act(() => Promise.resolve());
 
-    const internalTypeAll = getInternalMessageType('CLEAR_SENT_MESSAGES', 'test-channel');
-    act(() => {
-      channel.simulateMessage({
-        id: 'internal-2',
-        type: internalTypeAll,
-        message: { ids: [], types: [] },
-        source: 'another-tab',
-        timestamp: Date.now(),
-      });
+    await waitFor(() => {
+      expect(result.current.messages.length).toBe(2);
     });
 
-    expect(result.current.messages.length).toBe(0);
+    await act(async () => {
+      channel.simulateMessage(internalClear);
+    });
+
+    await act(() => Promise.resolve());
+
+    await waitFor(() => {
+      expect(result.current.messages.length).toBe(0); // ✅ Both cleared
+    });
   });
 
   it('performs cleanup of expired messages', async () => {
@@ -361,12 +396,14 @@ describe('useBroadcastChannel', () => {
 
   it('handles registered types filtering', async () => {
     const { result } = renderHook(() =>
-      useBroadcastChannel('test-channel', { registeredTypes: ['allowed-type'] })
+      useBroadcastChannel('test-channel', {
+        registeredTypes: ['allowed-type'],
+      })
     );
     await waitForChannel();
     const channel = mockChannels[0];
 
-    act(() => {
+    await act(async () => {
       channel.simulateMessage({
         id: 'unregistered',
         type: 'unregistered-type',
@@ -378,7 +415,7 @@ describe('useBroadcastChannel', () => {
 
     expect(result.current.messages.length).toBe(0);
 
-    act(() => {
+    await act(async () => {
       channel.simulateMessage({
         id: 'registered',
         type: 'allowed-type',
@@ -388,7 +425,9 @@ describe('useBroadcastChannel', () => {
       });
     });
 
-    expect(result.current.messages.length).toBe(1);
+    await waitFor(() => {
+      expect(result.current.messages.length).toBe(1);
+    });
   });
 
   it('handles keepLatestMessage option', async () => {
@@ -455,8 +494,10 @@ describe('useBroadcastChannel', () => {
     await waitForChannel();
     const channel = mockChannels[0];
 
-    channel.postMessage.mockImplementationOnce(() => {
-      throw new Error('Failed to post message');
+    act(() => {
+      channel.postMessage.mockImplementationOnce(() => {
+        throw new Error('Failed to post message');
+      });
     });
 
     act(() => {
@@ -516,4 +557,354 @@ describe('useBroadcastChannel', () => {
     expect(sentMessage.expirationDate).toBeDefined();
     expect(sentMessage.expirationDate).toBeGreaterThan(Date.now());
   });
+
+  it('returns null if there are no messages', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    expect(result.current.getLatestMessage()).toBeNull();
+  });
+
+  it('returns the latest message if no options are provided', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: Date.now(),
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeB',
+      message: 'second',
+      source: 'source2',
+      timestamp: Date.now() + 1,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+    });
+    expect(result.current.getLatestMessage()).toEqual(expect.objectContaining(msg2));
+  });
+
+  it('returns the latest message matching type', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: Date.now(),
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeB',
+      message: 'second',
+      source: 'source2',
+      timestamp: Date.now() + 1,
+    };
+    const msg3 = {
+      id: '3',
+      type: 'typeA',
+      message: 'third',
+      source: 'source3',
+      timestamp: Date.now() + 2,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+      channel.simulateMessage(msg3);
+    });
+    expect(result.current.getLatestMessage({ type: 'typeA' })).toEqual(
+      expect.objectContaining(msg3)
+    );
+  });
+
+  it('returns the latest message matching source', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: Date.now(),
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeB',
+      message: 'second',
+      source: 'source2',
+      timestamp: Date.now() + 1,
+    };
+    const msg3 = {
+      id: '3',
+      type: 'typeA',
+      message: 'third',
+      source: 'source1',
+      timestamp: Date.now() + 2,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+      channel.simulateMessage(msg3);
+    });
+    expect(result.current.getLatestMessage({ source: 'source1' })).toEqual(
+      expect.objectContaining(msg3)
+    );
+  });
+
+  it('returns the latest message matching both type and source', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: Date.now(),
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeB',
+      message: 'second',
+      source: 'source2',
+      timestamp: Date.now() + 1,
+    };
+    const msg3 = {
+      id: '3',
+      type: 'typeA',
+      message: 'third',
+      source: 'source1',
+      timestamp: Date.now() + 2,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+      channel.simulateMessage(msg3);
+    });
+    expect(result.current.getLatestMessage({ type: 'typeA', source: 'source1' })).toEqual(
+      expect.objectContaining(msg3)
+    );
+  });
+
+  it('returns null if no message matches the filter', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: Date.now(),
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+    });
+    expect(result.current.getLatestMessage({ type: 'typeB' })).toBeNull();
+    expect(result.current.getLatestMessage({ source: 'source2' })).toBeNull();
+    expect(result.current.getLatestMessage({ type: 'typeB', source: 'source2' })).toBeNull();
+  });
+
+  it('works with keepLatestMessage=true (only one message)', async () => {
+    const { result } = renderHook(() =>
+      useBroadcastChannel('test-channel', { keepLatestMessage: true })
+    );
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: Date.now(),
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+    });
+    expect(result.current.getLatestMessage()).toEqual(expect.objectContaining(msg1));
+  });
+
+  it('returns the latest message in correct order (last one)', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: Date.now(),
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeA',
+      message: 'second',
+      source: 'source1',
+      timestamp: Date.now() + 1,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+    });
+    expect(result.current.getLatestMessage({ type: 'typeA', source: 'source1' })).toEqual(
+      expect.objectContaining(msg2)
+    );
+  });
+
+  it('treats empty string filters as no filter (returns latest message)', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: 1000,
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeB',
+      message: 'second',
+      source: 'source2',
+      timestamp: 2000,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+    });
+    expect(result.current.getLatestMessage({ type: '', source: '' })).toEqual(
+      expect.objectContaining(msg2)
+    );
+  });
+
+  it('returns the last message in array if timestamps are the same', async () => {
+    jest.spyOn(Date, 'now').mockReturnValue(1000);
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: 1000,
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeA',
+      message: 'second',
+      source: 'source1',
+      timestamp: 1000,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+    });
+    expect(result.current.getLatestMessage({ type: 'typeA', source: 'source1' })).toEqual(
+      expect.objectContaining(msg2)
+    );
+    jest.spyOn(Date, 'now').mockRestore?.();
+  });
+
+  it('returns the last matching message if multiple match the filters', async () => {
+    const { result } = renderHook(() => useBroadcastChannel('test-channel'));
+    await waitForChannel();
+    const channel = mockChannels[0];
+    const msg1 = {
+      id: '1',
+      type: 'typeA',
+      message: 'first',
+      source: 'source1',
+      timestamp: 1000,
+    };
+    const msg2 = {
+      id: '2',
+      type: 'typeB',
+      message: 'second',
+      source: 'source2',
+      timestamp: 2000,
+    };
+    const msg3 = {
+      id: '3',
+      type: 'typeA',
+      message: 'third',
+      source: 'source1',
+      timestamp: 3000,
+    };
+    act(() => {
+      channel.simulateMessage(msg1);
+      channel.simulateMessage(msg2);
+      channel.simulateMessage(msg3);
+    });
+    // msg1 and msg3 both match typeA/source1 — expect msg3
+    expect(result.current.getLatestMessage({ type: 'typeA', source: 'source1' })).toEqual(
+      expect.objectContaining(msg3)
+    );
+  });
+
+  it('closes the BroadcastChannel and removes event listener', async () => {
+    const { result } = renderHook(() =>
+      useBroadcastChannel('test-channel', { sourceName: 'another-tab' })
+    );
+    await waitForChannel();
+    const channel = mockChannels[0];
+    expect(channel.close).not.toHaveBeenCalled();
+    result.current.closeChannel();
+    expect(channel.close).toHaveBeenCalled();
+    expect(channel.removeEventListener).toHaveBeenCalledWith('message', expect.any(Function));
+  });
+
+  it('is idempotent (safe to call multiple times)', async () => {
+    const { result } = renderHook(() =>
+      useBroadcastChannel('test-channel', { sourceName: 'another-tab' })
+    );
+    await waitForChannel();
+    const channel = mockChannels[0];
+    result.current.closeChannel();
+    expect(channel.close).toHaveBeenCalledTimes(1);
+    result.current.closeChannel();
+    // Should not throw or call close again
+    expect(channel.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not send messages after closeChannel is called', async () => {
+    const { result } = renderHook(() =>
+      useBroadcastChannel('test-channel', { sourceName: 'another-tab' })
+    );
+    await waitForChannel();
+    const channel = mockChannels[0];
+    result.current.closeChannel();
+    act(() => {
+      result.current.postMessage('test', { data: 'should not send' });
+    });
+    expect(channel.postMessage).not.toHaveBeenCalledWith(expect.objectContaining({ type: 'test' }));
+  });
+
+  it('does not receive messages after closeChannel is called', async () => {
+    const { result } = renderHook(() =>
+      useBroadcastChannel('test-channel', { sourceName: 'another-tab' })
+    );
+    await waitForChannel();
+    const channel = mockChannels[0];
+    result.current.closeChannel();
+    act(() => {
+      channel.simulateMessage({
+        id: 'should-not-receive',
+        type: 'test',
+        message: 'no',
+        source: 'external',
+        timestamp: Date.now(),
+      });
+    });
+    expect(result.current.messages).toHaveLength(0);
+  });
 });

package/src/types/types.ts

@@ -70,6 +70,11 @@ export interface ClearSentMessagesOptions extends ClearOptions {
   sync?: boolean;
 }
 
+export interface GetLatestMessageOptions {
+  source?: string;
+  type?: string;
+}
+
 /**
  * Actions and state provided by the broadcast channel hook
  */
@@ -92,6 +97,12 @@ export interface BroadcastActions {
   /** Function to clear sent messages */
   clearSentMessages: (options?: ClearSentMessagesOptions) => void;
 
+  /** Function to get the latest message by source and type */
+  getLatestMessage: (options?: GetLatestMessageOptions) => BroadcastMessage | null;
+
+  /** Explicitly close the broadcast channel and remove listeners */
+  closeChannel: () => void;
+
   /** Current error state */
   error: string | null;
 }

package/src/utils/debug.ts

@@ -40,6 +40,8 @@ export const debug = {
     duplicate: (messageId: string) => log('warn', 'Duplicate message ignored:', messageId),
     allSentCleared: () => log('info', 'All sent messages cleared'),
     allReceivedCleared: () => log('info', 'All received messages cleared'),
+    ignored: (messageType: string) =>
+      log('info', 'Message ignored due to type filter:', messageType),
   },
   cleanup: {
     started: () => log('info', 'Cleanup started'),