@notabene/javascript-sdk 2.0.0-next.9 → 2.0.1

package/src/components/__tests__/EmbeddedComponent.test.ts

@@ -1,5 +1,14 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-import { CMType, HMType, HostMessage, Transaction } from '../../types';
+import {
+  AgentType,
+  CMType,
+  HMType,
+  type HostMessage,
+  type Transaction,
+  type TransactionOptions,
+  type Withdrawal,
+} from '../../types';
+import { MessageEventManager } from '../../utils/MessageEventManager';
 import EmbeddedComponent from '../EmbeddedComponent';
 
 const url = 'https://example.com';
@@ -8,9 +17,11 @@ const value: Partial<Transaction> = { amountDecimal: 100 };
 
 describe('EmbeddedComponent', () => {
   describe('creation', () => {
-    let component: EmbeddedComponent;
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
     beforeEach(() => {
-      component = new EmbeddedComponent(url, { amountDecimal: 100 });
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(url, {
+        amountDecimal: 100,
+      });
     });
 
     test('sets value', () => {
@@ -27,7 +38,6 @@ describe('EmbeddedComponent', () => {
     let parentElement: HTMLElement;
     let iframe: HTMLIFrameElement;
     let window: Window;
-    let iframeWindow: Window;
 
     beforeEach(() => {
       parentElement = {
@@ -37,7 +47,10 @@ describe('EmbeddedComponent', () => {
       iframe = {
         style: {},
         src: '',
-        contentWindow: iframeWindow,
+        contentWindow: {
+          focus: vi.fn(),
+        } as unknown as Window,
+        remove: vi.fn(),
         setAttribute: vi.fn(),
         addEventListener: vi.fn(),
       } as unknown as HTMLIFrameElement;
@@ -60,14 +73,20 @@ describe('EmbeddedComponent', () => {
     });
 
     test('mount', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       component.mount(parentId);
-      expect(iframe?.src).toBe(url);
+      expect(iframe?.src).toBe(url + '&embedded=true');
       expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
     });
 
     test('on', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -78,7 +97,10 @@ describe('EmbeddedComponent', () => {
     });
 
     test('off', () => {
-      const component = new EmbeddedComponent(url, value);
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
       const messageType = 'customEvent';
       const callback = vi.fn();
       component.on(messageType, callback);
@@ -96,7 +118,8 @@ describe('EmbeddedComponent', () => {
       let messageHandler: (event: MessageEvent) => void;
       let port: MessagePort;
       let handshake: MessageEvent;
-      let component: EmbeddedComponent;
+      let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+      let options: TransactionOptions;
 
       beforeEach(() => {
         port = {
@@ -113,7 +136,12 @@ describe('EmbeddedComponent', () => {
           .mockImplementation((event, handler) => {
             messageHandler = handler;
           });
-        component = new EmbeddedComponent(url, value);
+        options = { allowedAgentTypes: [AgentType.PRIVATE, AgentType.VASP] };
+        component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+          url,
+          value,
+          options,
+        );
         component.mount(parentId);
 
         expect(messageHandler).toBeDefined();
@@ -121,40 +149,382 @@ describe('EmbeddedComponent', () => {
       });
 
       test('send', () => {
-        const message: HostMessage = {
+        const message: HostMessage<Withdrawal, TransactionOptions> = {
           type: HMType.UPDATE,
-          value: { amountDecimal: 100 },
+          value: {
+            requestId: 'id',
+          },
+          options: { allowedAgentTypes: [AgentType.PRIVATE] },
         };
         component.send(message);
-
-        // Assert that the message is sent to the embedded component
-        // and handled correctly.
+        expect(port.postMessage).toHaveBeenCalledWith(message);
       });
 
-      test('update', () => {
-        const newValue: Partial<Transaction> = { amountDecimal: 200 };
-        component.update(newValue);
+      describe('update', () => {
+        test('with out options', () => {
+          const newValue: Partial<Transaction> = { amountDecimal: 200 };
 
-        expect(component.value).toBe(newValue);
-      });
+          const message: HostMessage<Withdrawal, TransactionOptions> = {
+            type: HMType.UPDATE,
+            value: newValue,
+            options,
+          };
+
+          component.update(newValue);
+
+          expect(component.value).toBe(newValue);
+          expect(component.options).toBe(options);
+          expect(port.postMessage).toHaveBeenCalledWith(message);
+        });
+
+        test('with options', () => {
+          const newValue: Partial<Transaction> = { amountDecimal: 200 };
+          const newOptions = { allowedAgentTypes: [AgentType.PRIVATE] };
+
+          const message: HostMessage<Withdrawal, TransactionOptions> = {
+            type: HMType.UPDATE,
+            value: newValue,
+            options: newOptions,
+          };
+
+          component.update(newValue, newOptions);
 
+          expect(component.value).toBe(newValue);
+          expect(component.options).toBe(newOptions);
+          expect(port.postMessage).toHaveBeenCalledWith(message);
+        });
+      });
       // TODO not sure this actually does what I want it to do
-      test('completion', async () => {
-        const response = { valid: true, value: 'completed' };
-        expect(port.onmessage).toBeDefined();
+      describe('completion', () => {
+        test('resolves with response and cleans up listeners', async () => {
+          const response = { valid: true, value: 'completed' };
+          const completionPromise = component.completion();
+
+          port.onmessage!({
+            data: { type: CMType.COMPLETE, response },
+          } as unknown as MessageEvent);
+
+          const result = await completionPromise;
+          expect(result).toBe(response);
 
-        const promise = component.completion();
-        // @ts-expect-error - we've already verified that port exists
-        port.onmessage({
-          data: { type: CMType.COMPLETE, response },
-        } as MessageEvent);
+          // Verify cleanup by sending another complete message - should not trigger anything
+          port.onmessage!({
+            data: { type: CMType.COMPLETE, response: { valid: false } },
+          } as unknown as MessageEvent);
 
-        promise.then((result) => {
+          // Original result should remain unchanged
           expect(result).toBe(response);
         });
-        return promise;
-        // Assert that the completion promise resolves with the expected response.
+
+        test('rejects with error and cleans up listeners', async () => {
+          const errorMessage = 'Test error';
+          const completionPromise = component.completion();
+
+          port.onmessage!({
+            data: { type: 'error', message: errorMessage },
+          } as unknown as MessageEvent);
+
+          await expect(completionPromise).rejects.toThrow(errorMessage);
+
+          // Verify cleanup by sending another error - should not trigger anything
+          port.onmessage!({
+            data: { type: 'error', message: 'Different error' },
+          } as unknown as MessageEvent);
+
+          // Original rejection should remain
+          await expect(completionPromise).rejects.toThrow(errorMessage);
+        });
       });
     });
   });
+
+  describe('modal', () => {
+    let document: Document;
+    let dialog: HTMLDialogElement;
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+
+    beforeEach(() => {
+      dialog = {
+        style: {},
+        showModal: vi.fn(),
+        close: vi.fn(),
+        remove: vi.fn(),
+        addEventListener: vi.fn(),
+        appendChild: vi.fn(), // Add this
+      } as unknown as HTMLDialogElement;
+
+      document = {
+        createElement: vi.fn().mockImplementation((tag) => {
+          if (tag === 'dialog') return dialog;
+          if (tag === 'iframe')
+            return {
+              style: {},
+              contentWindow: { focus: vi.fn() },
+              addEventListener: vi.fn(),
+            } as unknown as HTMLIFrameElement;
+        }),
+        body: {
+          appendChild: vi.fn(),
+        },
+      } as unknown as Document;
+
+      const mockDoc = document;
+      vi.stubGlobal('document', mockDoc); // Use intermediate variable
+
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
+    });
+
+    afterEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    test('modal closes on cancel message', () => {
+      component.openModal();
+
+      // Trigger cancel message through event manager
+      component['eventManager']['handleMessage']({
+        data: { type: CMType.CANCEL },
+      } as MessageEvent);
+
+      expect(dialog.close).toHaveBeenCalled();
+      expect(dialog.remove).toHaveBeenCalled();
+      // await expect(completionPromise).rejects.toThrow();
+    });
+
+    test('modal closes on completion', async () => {
+      const completionPromise = component.openModal();
+      const response = { valid: true, value: 'completed' };
+
+      // Trigger complete message through event manager
+      component['eventManager']['handleMessage']({
+        data: { type: CMType.COMPLETE, response },
+      } as MessageEvent);
+
+      expect(dialog.close).toHaveBeenCalled();
+      expect(dialog.remove).toHaveBeenCalled();
+      await expect(completionPromise).resolves.toBe(response);
+    });
+  });
+
+  describe('error handling', () => {
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+    let mockMessageManager: (typeof component)['eventManager'];
+    let document: Document;
+    let parentElement: HTMLElement;
+
+    beforeEach(() => {
+      parentElement = {
+        appendChild: vi.fn(),
+      } as unknown as HTMLElement;
+
+      document = {
+        createElement: vi.fn().mockReturnValue({
+          style: {},
+          contentWindow: { focus: vi.fn() },
+        } as unknown as HTMLIFrameElement),
+        querySelector: vi.fn().mockReturnValue(parentElement),
+      } as unknown as Document;
+
+      const mockDoc = document;
+      vi.stubGlobal('document', mockDoc);
+
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
+      mockMessageManager = component['eventManager'];
+    });
+
+    test('handles invalid messages', () => {
+      const errors = [{ attribute: 'test', message: 'error' }];
+      const newValue = { ...value, extra: 'data' };
+
+      mockMessageManager['handleMessage']({
+        data: {
+          type: CMType.INVALID,
+          errors,
+          value: newValue,
+        },
+      } as MessageEvent);
+
+      expect(component.errors).toEqual(errors);
+      expect(component.value).toEqual(newValue);
+    });
+
+    test('handles resize messages', () => {
+      const mockIframe = {
+        style: {},
+        contentWindow: { focus: vi.fn() },
+      } as unknown as HTMLIFrameElement;
+
+      document.createElement = vi.fn().mockReturnValue(mockIframe);
+      document.querySelector = vi.fn().mockReturnValue(parentElement);
+
+      component.mount(parentId);
+
+      mockMessageManager['handleMessage']({
+        data: {
+          type: CMType.RESIZE,
+          height: 500,
+        },
+      } as MessageEvent);
+
+      expect(mockIframe.style.height).toBe('500px');
+    });
+  });
+
+  describe('event management', () => {
+    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
+    let mockWindow: Window;
+    beforeEach(() => {
+      // Create a mock window without modifying global
+      mockWindow = {
+        addEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      } as unknown as Window;
+
+      vi.stubGlobal('window', mockWindow);
+
+      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
+    });
+
+    afterEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    test('multiple listeners for same event type', () => {
+      const callback1 = vi.fn();
+      const callback2 = vi.fn();
+
+      component.on('test', callback1);
+      component.on('test', callback2);
+
+      // Trigger message via component's event manager
+      component['eventManager']['handleMessage']({
+        data: { type: 'test', payload: 'data' },
+      } as MessageEvent);
+
+      expect(callback1).toHaveBeenCalled();
+      expect(callback2).toHaveBeenCalled();
+    });
+
+    test('removal of specific listener', () => {
+      const callback1 = vi.fn();
+      const callback2 = vi.fn();
+
+      component.on('test', callback1);
+      component.on('test', callback2);
+      component.off('test', callback1);
+
+      component['eventManager']['handleMessage']({
+        data: { type: 'test', payload: 'data' },
+      } as MessageEvent);
+
+      expect(callback1).not.toHaveBeenCalled();
+      expect(callback2).toHaveBeenCalled();
+    });
+  });
+
+  describe('cleanup', () => {
+    let mockIframe: HTMLIFrameElement;
+    let parentElement: HTMLElement;
+    let document: Document;
+
+    beforeEach(() => {
+      mockIframe = {
+        style: {},
+        src: '',
+        contentWindow: {
+          focus: vi.fn(),
+        } as unknown as Window,
+        remove: vi.fn(),
+      } as unknown as HTMLIFrameElement;
+
+      parentElement = {
+        appendChild: vi.fn(),
+      } as unknown as HTMLElement;
+
+      document = {
+        createElement: vi.fn().mockReturnValue(mockIframe),
+        querySelector: vi.fn().mockReturnValue(parentElement),
+      } as unknown as Document;
+
+      const mockDoc = document;
+      vi.stubGlobal('document', mockDoc);
+    });
+
+    afterEach(() => {
+      vi.unstubAllGlobals();
+    });
+
+    test('removeEmbed cleans up iframe', () => {
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
+      component.mount(parentId);
+
+      component.removeEmbed();
+      expect(mockIframe.remove).toHaveBeenCalled();
+    });
+
+    test('cleanup on unmount', () => {
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
+      const callback = vi.fn();
+      component.on('test', callback);
+
+      component.mount(parentId);
+
+      component.removeEmbed();
+
+      // Create a new event manager to simulate cleanup
+      component['eventManager'] = new MessageEventManager();
+
+      // Try to trigger message after cleanup
+      component['eventManager']['handleMessage']({
+        data: { type: 'test', payload: 'data' },
+      } as MessageEvent);
+
+      expect(callback).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('state management', () => {
+    test('maintains value and options state', () => {
+      const initialValue = { amountDecimal: 100 };
+      const initialOptions = { allowedAgentTypes: [AgentType.PRIVATE] };
+
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        initialValue,
+        initialOptions,
+      );
+
+      expect(component.value).toEqual(initialValue);
+      expect(component.options).toEqual(initialOptions);
+    });
+
+    test('updates maintain state consistency', () => {
+      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
+        url,
+        value,
+      );
+      const newValue = { amountDecimal: 200 };
+      const newOptions = { allowedAgentTypes: [AgentType.VASP] };
+
+      component.update(newValue, newOptions);
+
+      expect(component.value).toEqual(newValue);
+      expect(component.options).toEqual(newOptions);
+    });
+  });
 });