@notabene/javascript-sdk 2.1.0 → 2.2.0

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

@@ -1,530 +0,0 @@
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-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';
-const parentId = 'parent-container';
-const value: Partial<Transaction> = { amountDecimal: 100 };
-
-describe('EmbeddedComponent', () => {
-  describe('creation', () => {
-    let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
-    beforeEach(() => {
-      component = new EmbeddedComponent<Withdrawal, TransactionOptions>(url, {
-        amountDecimal: 100,
-      });
-    });
-
-    test('sets value', () => {
-      expect(component.value).toStrictEqual(value);
-    });
-
-    test('sets url', () => {
-      expect(component.url).toBe(url);
-    });
-  });
-
-  describe('iframe', () => {
-    let document: Document;
-    let parentElement: HTMLElement;
-    let iframe: HTMLIFrameElement;
-    let window: Window;
-
-    beforeEach(() => {
-      parentElement = {
-        appendChild: vi.fn(),
-      } as unknown as HTMLElement;
-
-      iframe = {
-        style: {},
-        src: '',
-        contentWindow: {
-          focus: vi.fn(),
-        } as unknown as Window,
-        remove: vi.fn(),
-        setAttribute: vi.fn(),
-        addEventListener: vi.fn(),
-      } as unknown as HTMLIFrameElement;
-
-      document = {
-        createElement: vi.fn().mockReturnValue(iframe),
-        querySelector: vi.fn().mockReturnValue(parentElement),
-      } as unknown as Document;
-
-      window = {
-        addEventListener: vi.fn(),
-      } as unknown as Window;
-
-      vi.stubGlobal('document', document);
-      vi.stubGlobal('window', window);
-    });
-
-    afterEach(() => {
-      vi.unstubAllGlobals();
-    });
-
-    test('mount', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      component.mount(parentId);
-      expect(iframe?.src).toBe(url + '&embedded=true');
-      expect(parentElement.appendChild).toHaveBeenCalledWith(iframe);
-    });
-
-    test('on', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      const messageType = 'customEvent';
-      const callback = vi.fn();
-      component.on(messageType, callback);
-      component.mount(parentId);
-
-      // Simulate receiving a message of the specified type
-      // and assert that the callback is called with the correct payload.
-    });
-
-    test('off', () => {
-      const component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-        url,
-        value,
-      );
-      const messageType = 'customEvent';
-      const callback = vi.fn();
-      component.on(messageType, callback);
-
-      // Simulate receiving a message of the specified type
-      // and assert that the callback is called with the correct payload.
-
-      component.off(messageType, callback);
-
-      // Simulate receiving another message of the specified type
-      // and assert that the callback is not called.
-    });
-
-    describe('connected to iframe', () => {
-      let messageHandler: (event: MessageEvent) => void;
-      let port: MessagePort;
-      let handshake: MessageEvent;
-      let component: EmbeddedComponent<Withdrawal, TransactionOptions>;
-      let options: TransactionOptions;
-
-      beforeEach(() => {
-        port = {
-          postMessage: vi.fn(),
-          start: vi.fn(),
-          onmessage: null,
-        } as unknown as MessagePort;
-        handshake = {
-          source: iframe.contentWindow,
-          ports: [port],
-        } as unknown as MessageEvent;
-        window.addEventListener = vi
-          .fn()
-          .mockImplementation((event, handler) => {
-            messageHandler = handler;
-          });
-        options = { allowedAgentTypes: [AgentType.PRIVATE, AgentType.VASP] };
-        component = new EmbeddedComponent<Withdrawal, TransactionOptions>(
-          url,
-          value,
-          options,
-        );
-        component.mount(parentId);
-
-        expect(messageHandler).toBeDefined();
-        messageHandler(handshake);
-      });
-
-      test('send', () => {
-        const message: HostMessage<Withdrawal, TransactionOptions> = {
-          type: HMType.UPDATE,
-          value: {
-            requestId: 'id',
-          },
-          options: { allowedAgentTypes: [AgentType.PRIVATE] },
-        };
-        component.send(message);
-        expect(port.postMessage).toHaveBeenCalledWith(message);
-      });
-
-      describe('update', () => {
-        test('with out options', () => {
-          const newValue: Partial<Transaction> = { amountDecimal: 200 };
-
-          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
-      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);
-
-          // Verify cleanup by sending another complete message - should not trigger anything
-          port.onmessage!({
-            data: { type: CMType.COMPLETE, response: { valid: false } },
-          } as unknown as MessageEvent);
-
-          // Original result should remain unchanged
-          expect(result).toBe(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);
-    });
-  });
-});