request-iframe 0.0.4 → 0.0.6

package/react/library/__tests__/index.test.tsx

@@ -1,792 +0,0 @@
-import { renderHook, waitFor } from '@testing-library/react';
-import { useRef } from 'react';
-import { useClient, useServer, useServerHandler, useServerHandlerMap } from '../index';
-import { requestIframeClient, clearRequestIframeClientCache } from '../../../library/api/client';
-import { requestIframeServer, clearRequestIframeServerCache } from '../../../library/api/server';
-
-/**
- * Create test iframe
- */
-function createTestIframe(origin: string): HTMLIFrameElement {
-  const iframe = document.createElement('iframe');
-  iframe.src = `${origin}/test.html`;
-  document.body.appendChild(iframe);
-  return iframe;
-}
-
-/**
- * Cleanup test iframe
- */
-function cleanupIframe(iframe: HTMLIFrameElement): void {
-  if (iframe.parentNode) {
-    iframe.parentNode.removeChild(iframe);
-  }
-}
-
-describe('React Hooks', () => {
-  beforeEach(() => {
-    clearRequestIframeClientCache();
-    clearRequestIframeServerCache();
-    document.querySelectorAll('iframe').forEach((iframe) => {
-      if (iframe.parentNode) {
-        iframe.parentNode.removeChild(iframe);
-      }
-    });
-  });
-
-  afterEach(() => {
-    clearRequestIframeClientCache();
-    clearRequestIframeServerCache();
-    document.querySelectorAll('iframe').forEach((iframe) => {
-      if (iframe.parentNode) {
-        iframe.parentNode.removeChild(iframe);
-      }
-    });
-  });
-
-  describe('useClient', () => {
-    it('should return null when getTarget returns null', () => {
-      const { result } = renderHook(() => useClient(() => null));
-      expect(result.current).toBeNull();
-    });
-
-    it('should create client when getTarget returns valid target', async () => {
-      const iframe = createTestIframe('https://example.com');
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      const { result } = renderHook(() => useClient(() => iframe));
-    
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBeNull();
-      }, { timeout: 2000 });
-
-      cleanupIframe(iframe);
-    });
-
-    it('should create client with options', async () => {
-      const iframe = createTestIframe('https://example.com');
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      const options = { secretKey: 'test-key', timeout: 1000 };
-      const { result } = renderHook(() => useClient(() => iframe, options));
-      
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-        if (result.current) {
-          expect(result.current.isOpen).toBe(true);
-        }
-      }, { timeout: 2000 });
-      
-      cleanupIframe(iframe);
-    });
-
-    it('should destroy client on unmount', async () => {
-      const iframe = createTestIframe('https://example.com');
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      const { result, unmount } = renderHook(() => useClient(() => iframe));
-      
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-      }, { timeout: 2000 });
-      
-      const client = result.current;
-      expect(client).toBeDefined();
-      
-      unmount();
-      
-      // Client should be destroyed
-      if (client) {
-        expect(client.isOpen).toBe(false);
-      }
-      
-      cleanupIframe(iframe);
-    });
-
-    it('should recreate client when getTarget function changes', async () => {
-      const iframe1 = createTestIframe('https://example.com');
-      const mockContentWindow1 = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe1, 'contentWindow', {
-        value: mockContentWindow1,
-        writable: true,
-        configurable: true
-      });
-
-      const { result, rerender } = renderHook(
-        (props: { getTarget: () => HTMLIFrameElement | Window | null; iframe: HTMLIFrameElement }) => 
-          useClient(props.getTarget, undefined, [props.iframe]),
-        { initialProps: { getTarget: () => iframe1, iframe: iframe1 } }
-      );
-
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-      }, { timeout: 2000 });
-
-      const client1 = result.current;
-      expect(client1).toBeDefined();
-
-      const iframe2 = createTestIframe('https://example2.com');
-      const mockContentWindow2 = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe2, 'contentWindow', {
-        value: mockContentWindow2,
-        writable: true,
-        configurable: true
-      });
-
-      rerender({ getTarget: () => iframe2, iframe: iframe2 });
-
-      await waitFor(() => {
-        // Previous client should be destroyed
-        if (client1) {
-          expect(client1.isOpen).toBe(false);
-        }
-        // New client should be created
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBe(client1);
-      }, { timeout: 2000 });
-      
-      cleanupIframe(iframe1);
-      cleanupIframe(iframe2);
-    });
-
-    it('should handle getTarget returning null after initial mount', async () => {
-      const iframe = createTestIframe('https://example.com');
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      type Props = { getTarget: () => HTMLIFrameElement | Window | null };
-      const { result, rerender } = renderHook(
-        (props: Props) => useClient(props.getTarget),
-        { initialProps: { getTarget: () => iframe } as Props }
-      );
-
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-      }, { timeout: 2000 });
-
-      // Change getTarget to return null
-      rerender({ getTarget: () => null } as Props);
-
-      // Wait for cleanup
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Note: clientRef.current may still hold the old client until next render
-      // This is expected behavior with useRef - the component needs to re-render
-      // to reflect the change. In real usage, this would trigger a re-render.
-      
-      cleanupIframe(iframe);
-    });
-
-    it('should work with function pattern', async () => {
-      const iframeRef = { current: null as HTMLIFrameElement | null };
-      const iframe = createTestIframe('https://example.com');
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      type Props = { ver: number };
-      const { result, rerender } = renderHook(
-        ({ ver }: Props) => useClient(() => iframeRef.current, undefined, [ver]),
-        { initialProps: { ver: 0 } as Props }
-      );
-
-      // Initially null (ref not set)
-      expect(result.current).toBeNull();
-
-      // Set ref
-      iframeRef.current = iframe;
-      rerender({ ver: 1 } as Props);
-
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-      }, { timeout: 2000 });
-      
-      cleanupIframe(iframe);
-    });
-
-    it('should work with ref object directly', async () => {
-      const iframe = createTestIframe('https://example.com');
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      const { result } = renderHook(() => {
-        const iframeRef = useRef<HTMLIFrameElement | null>(iframe);
-        return useClient(iframeRef);
-      });
-
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBeNull();
-      }, { timeout: 2000 });
-      
-      cleanupIframe(iframe);
-    });
-
-    it('should recreate client when deps change', async () => {
-      const iframe = createTestIframe('https://example.com');
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      let userId = 1;
-      const { result, rerender } = renderHook(() => {
-        return useClient(() => iframe, { secretKey: `key-${userId}` }, [userId]);
-      });
-
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-      }, { timeout: 2000 });
-
-      const client1 = result.current;
-
-      // Change dependency
-      userId = 2;
-      rerender();
-
-      await waitFor(() => {
-        // Previous client should be destroyed
-        if (client1) {
-          expect(client1.isOpen).toBe(false);
-        }
-        // New client should be created
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBe(client1);
-      }, { timeout: 2000 });
-      
-      cleanupIframe(iframe);
-    });
-  });
-
-  describe('useServer', () => {
-    it('should create server instance', async () => {
-      const { result } = renderHook(() => useServer());
-      
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBeNull();
-        if (result.current) {
-          expect(result.current.isOpen).toBe(true);
-        }
-      }, { timeout: 2000 });
-    });
-
-    it('should create server with options', async () => {
-      const options = { secretKey: 'test-key', ackTimeout: 1000 };
-      const { result } = renderHook(() => useServer(options));
-      
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBeNull();
-        if (result.current) {
-          expect(result.current.secretKey).toBe('test-key');
-        }
-      }, { timeout: 2000 });
-    });
-
-    it('should destroy server on unmount', async () => {
-      const { result, unmount } = renderHook(() => useServer());
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBeNull();
-      }, { timeout: 2000 });
-      const server = result.current;
-      
-      unmount();
-      
-      // Server should be destroyed
-      if (server) {
-        expect(server.isOpen).toBe(false);
-      }
-    });
-
-    it('should create server only once on mount', async () => {
-      const { result, rerender } = renderHook(() => useServer());
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-        expect(result.current).not.toBeNull();
-      }, { timeout: 2000 });
-      const server1 = result.current;
-      
-      rerender();
-      
-      // Should return the same instance when deps is not provided (default empty array)
-      await waitFor(() => {
-        expect(result.current).toBeDefined();
-      }, { timeout: 2000 });
-      // Note: When deps is not provided, useEffect runs only once, so server should be the same
-      // But if deps changes, a new server might be created
-      expect(result.current).toBe(server1);
-    });
-
-    it('should recreate server when deps change', async () => {
-      let userId = 1;
-      const { result, rerender } = renderHook(() => {
-        return useServer({ secretKey: `key-${userId}` }, [userId]);
-      });
-
-      const server1 = result.current;
-      expect(server1).toBeDefined();
-
-      // Change dependency
-      userId = 2;
-      rerender();
-
-      await waitFor(() => {
-        // New server should be created (or same if cached by secretKey)
-        expect(result.current).toBeDefined();
-        // Note: If servers are cached by secretKey, it might be the same instance
-        // So we just verify it's defined
-      }, { timeout: 2000 });
-    });
-  });
-
-  describe('useServerHandler', () => {
-    it('should register handler when server is available', async () => {
-      const handler = jest.fn((req, res) => {
-        res.send({ success: true });
-      });
-
-      let serverInstance: any = null;
-      renderHook(() => {
-        const server = useServer();
-        serverInstance = server;
-        useServerHandler(server, 'api/test', handler, []);
-      });
-
-      // Verify handler is registered by checking server internals
-      // Since we can't easily test the full message flow, we just verify
-      // that the hook doesn't throw and the server is created
-      await waitFor(() => {
-        expect(serverInstance).toBeDefined();
-        expect(serverInstance).not.toBeNull();
-      }, { timeout: 2000 });
-      expect(handler).not.toHaveBeenCalled(); // Handler not called yet, just registered
-    });
-
-    it('should not register handler when server is null', () => {
-      const handler = jest.fn();
-
-      renderHook(() => {
-        useServerHandler(null, 'api/test', handler, []);
-      });
-
-      // Should not throw
-      expect(handler).not.toHaveBeenCalled();
-    });
-
-    it('should unregister handler on unmount', async () => {
-      const origin = 'https://example.com';
-      const iframe = createTestIframe(origin);
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      const handler = jest.fn();
-
-      const { unmount } = renderHook(() => {
-        const server = useServer();
-        useServerHandler(server, 'api/test', handler, []);
-      });
-
-      unmount();
-
-      // Handler should be unregistered
-      const client = requestIframeClient(iframe);
-      const server = requestIframeServer();
-      
-      // Try to send request - should get METHOD_NOT_FOUND
-      client.send('api/test', {}).catch(() => {});
-      
-      await waitFor(() => {
-        expect(handler).not.toHaveBeenCalled();
-      }, { timeout: 1000 });
-
-      client.destroy();
-      server.destroy();
-      cleanupIframe(iframe);
-    });
-
-    it('should re-register handler when dependencies change', () => {
-      let userId = 1;
-      const handler = jest.fn((req, res) => {
-        res.send({ userId });
-      });
-
-      const { result, rerender } = renderHook(() => {
-        const server = useServer();
-        useServerHandler(server, 'api/test', handler, [userId]);
-        return server;
-      });
-
-      // Verify server is created
-      expect(result.current).toBeDefined();
-
-      // Change dependency
-      userId = 2;
-      rerender();
-
-      // Verify server is still defined after rerender
-      expect(result.current).toBeDefined();
-    });
-
-    it('should use latest handler even when handler function reference changes', () => {
-      const handler1 = jest.fn((req, res) => {
-        res.send({ version: 1 });
-      });
-
-      type HandlerProps = { handler: jest.Mock };
-      const { rerender } = renderHook(
-        ({ handler }: HandlerProps) => {
-          const server = useServer();
-          useServerHandler(server, 'api/test', handler, []);
-          return server;
-        },
-        {
-          initialProps: {
-            handler: handler1
-          } as HandlerProps
-        }
-      );
-
-      // Update handler with new function (different reference)
-      // The wrapper should use ref to access the latest handler
-      const handler2 = jest.fn((req, res) => {
-        res.send({ version: 2 });
-      });
-      rerender({ handler: handler2 });
-
-      // Verify handlers are defined (the ref mechanism ensures latest handler is used)
-      // Note: We can't easily test the actual call without setting up full message flow,
-      // but the ref mechanism ensures the latest handler is always called
-      expect(handler1).toBeDefined();
-      expect(handler2).toBeDefined();
-    });
-
-    it('should use latest closure values in handler', async () => {
-      let userId = 1;
-      const handler1 = jest.fn((req, res) => {
-        res.send({ userId });
-      });
-
-      type HandlerClosureProps = { handler: jest.Mock };
-      const { rerender } = renderHook(
-        ({ handler }: HandlerClosureProps) => {
-          const server = useServer();
-          // Handler uses userId from closure
-          useServerHandler(server, 'api/user', handler, [userId]);
-          return server;
-        },
-        {
-          initialProps: { handler: handler1 } as HandlerClosureProps
-        }
-      );
-
-      // Wait for server to be ready
-      await new Promise(resolve => setTimeout(resolve, 100));
-
-      // Update userId and create new handler
-      userId = 2;
-      const handler2 = jest.fn((req, res) => {
-        res.send({ userId });
-      });
-      rerender({ handler: handler2 });
-
-      // Wait for update
-      await new Promise(resolve => setTimeout(resolve, 100));
-
-      // The handler should use the latest handler function via ref
-      // Note: This test verifies that the handler wrapper correctly accesses
-      // the latest handler function through the ref mechanism
-      expect(handler1).toBeDefined();
-      expect(handler2).toBeDefined();
-    });
-  });
-
-  describe('useServerHandlerMap', () => {
-    it('should register handlers using map when server is available', async () => {
-      const handlers = {
-        'api/user': jest.fn((req, res) => res.send({ user: 'test' })),
-        'api/post': jest.fn((req, res) => res.send({ post: 'test' }))
-      };
-
-      let serverInstance: any = null;
-      renderHook(() => {
-        const server = useServer();
-        serverInstance = server;
-        useServerHandlerMap(server, handlers, []);
-      });
-
-      // Verify server is created and handlers are registered
-      await waitFor(() => {
-        expect(serverInstance).toBeDefined();
-        expect(serverInstance).not.toBeNull();
-      }, { timeout: 2000 });
-      // Handlers not called yet, just registered
-      expect(handlers['api/user']).not.toHaveBeenCalled();
-      expect(handlers['api/post']).not.toHaveBeenCalled();
-    });
-
-    it('should not register handlers when server is null', () => {
-      const handlers = {
-        'api/user': jest.fn()
-      };
-
-      renderHook(() => {
-        useServerHandlerMap(null, handlers, []);
-      });
-
-      // Should not throw
-      expect(handlers['api/user']).not.toHaveBeenCalled();
-    });
-
-    it('should unregister all handlers on unmount', async () => {
-      const origin = 'https://example.com';
-      const iframe = createTestIframe(origin);
-      const mockContentWindow = {
-        postMessage: jest.fn()
-      };
-      Object.defineProperty(iframe, 'contentWindow', {
-        value: mockContentWindow,
-        writable: true,
-        configurable: true
-      });
-
-      const handlers = {
-        'api/user': jest.fn(),
-        'api/post': jest.fn()
-      };
-
-      const { unmount } = renderHook(() => {
-        const server = useServer();
-        useServerHandlerMap(server, handlers, []  );
-      });
-
-      unmount();
-
-      // Handlers should be unregistered
-      const client = requestIframeClient(iframe);
-      
-      // Try to send requests - should get METHOD_NOT_FOUND
-      client.send('api/user', {}).catch(() => {});
-      client.send('api/post', {}).catch(() => {});
-
-      await waitFor(() => {
-        expect(handlers['api/user']).not.toHaveBeenCalled();
-        expect(handlers['api/post']).not.toHaveBeenCalled();
-      }, { timeout: 1000 });
-
-      client.destroy();
-      cleanupIframe(iframe);
-    });
-
-    it('should re-register handlers when dependencies change', () => {
-      const handlers = {
-        'api/user': jest.fn((req, res) => res.send({}))
-      };
-      let userId = 1;
-
-      const { result, rerender } = renderHook(() => {
-        const server = useServer();
-        useServerHandlerMap(server, handlers, [userId]);
-        return server;
-      });
-
-      // Verify server is created
-      expect(result.current).toBeDefined();
-
-      // Change dependency
-      userId = 2;
-      rerender();
-
-      // Verify server is still defined after rerender
-      expect(result.current).toBeDefined();
-    });
-
-    it('should handle empty handlers map', () => {
-      const handlers = {};
-
-      const { result } = renderHook(() => {
-        const server = useServer();
-        useServerHandlerMap(server, handlers, []);
-        return server;
-      });
-
-      // Should not throw
-      expect(result.current).toBeDefined();
-    });
-
-    it('should use latest handlers even when map object reference changes', () => {
-      const handler1 = jest.fn((req, res) => {
-        res.send({ version: 1 });
-      });
-
-      type MapHandlerProps = { handlers: Record<string, jest.Mock> };
-      const { rerender } = renderHook(
-        ({ handlers }: MapHandlerProps) => {
-          const server = useServer();
-          useServerHandlerMap(server, handlers, []);
-          return server;
-        },
-        {
-          initialProps: {
-            handlers: {
-              'api/test': handler1
-            }
-          } as MapHandlerProps
-        }
-      );
-
-      // Create new map object with same keys but different handler
-      // The wrapper should use ref to access the latest handlers
-      const handler2 = jest.fn((req, res) => {
-        res.send({ version: 2 });
-      });
-      rerender({
-        handlers: {
-          'api/test': handler2
-        }
-      } as MapHandlerProps);
-
-      // Verify handlers are defined
-      // Note: When map object reference changes but keys are the same,
-      // the mapWrapper is not recreated (keysStr doesn't change),
-      // but the ref mechanism ensures latest handlers are always used
-      expect(handler1).toBeDefined();
-      expect(handler2).toBeDefined();
-    });
-
-    it('should re-register when map keys change', () => {
-      const handler1 = jest.fn((req, res) => res.send({ path: 'api/user' }));
-      const handler2 = jest.fn((req, res) => res.send({ path: 'api/post' }));
-
-      type HandlersMapProps = { handlers: Record<string, jest.Mock> };
-      const { rerender } = renderHook(
-        ({ handlers }: HandlersMapProps) => {
-          const server = useServer();
-          useServerHandlerMap(server, handlers, []);
-          return server;
-        },
-        {
-          initialProps: {
-            handlers: {
-              'api/user': handler1
-            }
-          } as HandlersMapProps
-        }
-      );
-
-      // Add new key to map - should trigger re-registration
-      rerender({
-        handlers: {
-          'api/user': handler1,
-          'api/post': handler2
-        }
-      } as HandlersMapProps);
-
-      // Verify handlers are defined
-      // Note: When keys change, the mapWrapper is recreated and handlers are re-registered
-      expect(handler1).toBeDefined();
-      expect(handler2).toBeDefined();
-    });
-
-    it('should use latest closure values in map handlers', async () => {
-      let userId = 1;
-      const handler1 = jest.fn((req, res) => {
-        res.send({ userId });
-      });
-
-      type MapClosureProps = { handlers: Record<string, jest.Mock> };
-      const { rerender } = renderHook(
-        ({ handlers }: MapClosureProps) => {
-          const server = useServer();
-          // Handlers use userId from closure
-          useServerHandlerMap(server, handlers, [userId]);
-          return server;
-        },
-        {
-          initialProps: {
-            handlers: {
-              'api/user': handler1
-            }
-          } as MapClosureProps
-        }
-      );
-
-      // Wait for server to be ready
-      await new Promise(resolve => setTimeout(resolve, 100));
-
-      // Update userId and create new handler
-      userId = 2;
-      const handler2 = jest.fn((req, res) => {
-        res.send({ userId });
-      });
-      rerender({
-        handlers: {
-          'api/user': handler2
-        }
-      } as MapClosureProps);
-
-      // Wait for update
-      await new Promise(resolve => setTimeout(resolve, 100));
-
-      // The handler should use the latest handler function via ref
-      // Note: This test verifies that the handler wrappers correctly access
-      // the latest handler functions through the ref mechanism
-      expect(handler1).toBeDefined();
-      expect(handler2).toBeDefined();
-    });
-  });
-});