request-iframe 0.0.1 → 0.0.2

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

@@ -0,0 +1,799 @@
+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 }) => useClient(props.getTarget),
+        { initialProps: { getTarget: () => 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 });
+
+      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
+      });
+
+      const { result, rerender } = renderHook(() => useClient(() => iframeRef.current));
+
+      // Initially null (ref not set)
+      expect(result.current).toBeNull();
+
+      // Set ref
+      iframeRef.current = iframe;
+      rerender();
+
+      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', () => {
+      const { result } = renderHook(() => useServer());
+      
+      expect(result.current).toBeDefined();
+      if (result.current) {
+        expect(result.current.isOpen).toBe(true);
+      }
+    });
+
+    it('should create server with options', () => {
+      const options = { secretKey: 'test-key', ackTimeout: 1000 };
+      const { result } = renderHook(() => useServer(options));
+      
+      expect(result.current).toBeDefined();
+      if (result.current) {
+        expect(result.current.secretKey).toBe('test-key');
+      }
+    });
+
+    it('should destroy server on unmount', async () => {
+      const { result, unmount } = renderHook(() => useServer());
+      const server = result.current;
+      
+      expect(server).toBeDefined();
+      
+      unmount();
+      
+      // Server should be destroyed
+      if (server) {
+        expect(server.isOpen).toBe(false);
+      }
+    });
+
+    it('should create server only once on mount', () => {
+      const { result, rerender } = renderHook(() => useServer());
+      const server1 = result.current;
+      
+      expect(server1).toBeDefined();
+      
+      rerender();
+      
+      // Should return the same instance (not null)
+      expect(result.current).toBeDefined();
+      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(() => {
+        // Previous server should be destroyed
+        if (server1) {
+          expect(server1.isOpen).toBe(false);
+        }
+        // New server should be created
+        expect(result.current).toBeDefined();
+        expect(result.current).not.toBe(server1);
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('useServerHandler', () => {
+    it('should register handler when server is available', async () => {
+      const origin = 'https://example.com';
+      const iframe = createTestIframe(origin);
+      const mockContentWindow = {
+        postMessage: jest.fn((msg: any) => {
+          if (msg.type === 'request') {
+            // Send ACK
+            window.dispatchEvent(
+              new MessageEvent('message', {
+                data: {
+                  __requestIframe__: 1,
+                  type: 'ack',
+                  requestId: msg.requestId,
+                  path: msg.path,
+                  timestamp: Date.now()
+                },
+                origin,
+                source: mockContentWindow as any
+              })
+            );
+            // Send response
+            setTimeout(() => {
+              window.dispatchEvent(
+                new MessageEvent('message', {
+                  data: {
+                    __requestIframe__: 1,
+                    type: 'response',
+                    requestId: msg.requestId,
+                    data: { success: true },
+                    status: 200,
+                    statusText: 'OK',
+                    timestamp: Date.now()
+                  },
+                  origin,
+                  source: mockContentWindow as any
+                })
+              );
+            }, 10);
+          }
+        })
+      };
+      Object.defineProperty(iframe, 'contentWindow', {
+        value: mockContentWindow,
+        writable: true,
+        configurable: true
+      });
+
+      const handler = jest.fn((req, res) => {
+        res.send({ success: true });
+      });
+
+      renderHook(() => {
+        const server = useServer();
+        useServerHandler(server, 'api/test', handler);
+      });
+
+      // Wait for handler to be registered
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Send a test request
+      const client = requestIframeClient(iframe);
+      await client.send('api/test', {});
+      
+      await waitFor(() => {
+        expect(handler).toHaveBeenCalled();
+      }, { timeout: 3000 });
+
+      client.destroy();
+      cleanupIframe(iframe);
+    });
+
+    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', async () => {
+      const origin = 'https://example.com';
+      const iframe = createTestIframe(origin);
+      const mockContentWindow = {
+        postMessage: jest.fn((msg: any) => {
+          if (msg.type === 'request') {
+            window.dispatchEvent(
+              new MessageEvent('message', {
+                data: {
+                  __requestIframe__: 1,
+                  type: 'ack',
+                  requestId: msg.requestId,
+                  path: msg.path,
+                  timestamp: Date.now()
+                },
+                origin,
+                source: mockContentWindow as any
+              })
+            );
+            setTimeout(() => {
+              window.dispatchEvent(
+                new MessageEvent('message', {
+                  data: {
+                    __requestIframe__: 1,
+                    type: 'response',
+                    requestId: msg.requestId,
+                    data: { success: true },
+                    status: 200,
+                    statusText: 'OK',
+                    timestamp: Date.now()
+                  },
+                  origin,
+                  source: mockContentWindow as any
+                })
+              );
+            }, 10);
+          }
+        })
+      };
+      Object.defineProperty(iframe, 'contentWindow', {
+        value: mockContentWindow,
+        writable: true,
+        configurable: true
+      });
+
+      let userId = 1;
+      const handler = jest.fn((req, res) => {
+        res.send({ userId });
+      });
+
+      const { rerender } = renderHook(() => {
+        const server = useServer();
+        useServerHandler(server, 'api/test', handler, [userId]);
+      });
+
+      // Wait for initial registration
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      const client = requestIframeClient(iframe);
+      await client.send('api/test', {});
+
+      await waitFor(() => {
+        expect(handler).toHaveBeenCalledTimes(1);
+      }, { timeout: 3000 });
+
+      // Change dependency
+      userId = 2;
+      rerender();
+
+      // Wait for re-registration
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      await client.send('api/test', {});
+
+      await waitFor(() => {
+        expect(handler).toHaveBeenCalledTimes(2);
+      }, { timeout: 3000 });
+
+      client.destroy();
+      cleanupIframe(iframe);
+    });
+  });
+
+  describe('useServerHandlerMap', () => {
+    it('should register handlers using map when server is available', async () => {
+      const origin = 'https://example.com';
+      const iframe = createTestIframe(origin);
+      const mockContentWindow = {
+        postMessage: jest.fn((msg: any) => {
+          if (msg.type === 'request') {
+            window.dispatchEvent(
+              new MessageEvent('message', {
+                data: {
+                  __requestIframe__: 1,
+                  type: 'ack',
+                  requestId: msg.requestId,
+                  path: msg.path,
+                  timestamp: Date.now()
+                },
+                origin,
+                source: mockContentWindow as any
+              })
+            );
+            setTimeout(() => {
+              window.dispatchEvent(
+                new MessageEvent('message', {
+                  data: {
+                    __requestIframe__: 1,
+                    type: 'response',
+                    requestId: msg.requestId,
+                    data: { success: true },
+                    status: 200,
+                    statusText: 'OK',
+                    timestamp: Date.now()
+                  },
+                  origin,
+                  source: mockContentWindow as any
+                })
+              );
+            }, 10);
+          }
+        })
+      };
+      Object.defineProperty(iframe, 'contentWindow', {
+        value: mockContentWindow,
+        writable: true,
+        configurable: true
+      });
+
+      const handlers = {
+        'api/user': jest.fn((req, res) => res.send({ user: 'test' })),
+        'api/post': jest.fn((req, res) => res.send({ post: 'test' }))
+      };
+
+      renderHook(() => {
+        const server = useServer();
+        useServerHandlerMap(server, handlers);
+      });
+
+      // Wait for handlers to be registered
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Send test requests
+      const client = requestIframeClient(iframe);
+      await client.send('api/user', {});
+      await client.send('api/post', {});
+
+      await waitFor(() => {
+        expect(handlers['api/user']).toHaveBeenCalled();
+        expect(handlers['api/post']).toHaveBeenCalled();
+      }, { timeout: 3000 });
+
+      client.destroy();
+      cleanupIframe(iframe);
+    });
+
+    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', async () => {
+      const origin = 'https://example.com';
+      const iframe = createTestIframe(origin);
+      const mockContentWindow = {
+        postMessage: jest.fn((msg: any) => {
+          if (msg.type === 'request') {
+            window.dispatchEvent(
+              new MessageEvent('message', {
+                data: {
+                  __requestIframe__: 1,
+                  type: 'ack',
+                  requestId: msg.requestId,
+                  path: msg.path,
+                  timestamp: Date.now()
+                },
+                origin,
+                source: mockContentWindow as any
+              })
+            );
+            setTimeout(() => {
+              window.dispatchEvent(
+                new MessageEvent('message', {
+                  data: {
+                    __requestIframe__: 1,
+                    type: 'response',
+                    requestId: msg.requestId,
+                    data: { success: true },
+                    status: 200,
+                    statusText: 'OK',
+                    timestamp: Date.now()
+                  },
+                  origin,
+                  source: mockContentWindow as any
+                })
+              );
+            }, 10);
+          }
+        })
+      };
+      Object.defineProperty(iframe, 'contentWindow', {
+        value: mockContentWindow,
+        writable: true,
+        configurable: true
+      });
+
+      const handlers = {
+        'api/user': jest.fn((req, res) => res.send({}))
+      };
+      let userId = 1;
+
+      const { rerender } = renderHook(() => {
+        const server = useServer();
+        useServerHandlerMap(server, handlers, [userId]);
+      });
+
+      // Wait for initial registration
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      const client = requestIframeClient(iframe);
+      await client.send('api/user', {});
+
+      await waitFor(() => {
+        expect(handlers['api/user']).toHaveBeenCalledTimes(1);
+      }, { timeout: 3000 });
+
+      // Change dependency
+      userId = 2;
+      rerender();
+
+      // Wait for re-registration
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      await client.send('api/user', {});
+
+      await waitFor(() => {
+        expect(handlers['api/user']).toHaveBeenCalledTimes(2);
+      }, { timeout: 3000 });
+
+      client.destroy();
+      cleanupIframe(iframe);
+    });
+
+    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();
+    });
+  });
+});