zh-web-sdk 2.16.1 → 2.17.0

package/src/iframe-container/__tests__/AppContainer.test.tsx

@@ -1,300 +0,0 @@
-import React from "react";
-import { screen, waitFor } from "@testing-library/react";
-import AppContainer from "../AppContainer";
-import { AppIdentifier } from "../../types";
-import { renderWithProviders } from "../../utils/test-utils";
-
-// Mock @connect-xyz/auth-react
-jest.mock("@connect-xyz/auth-react", () => ({
-  Auth: () => React.createElement("div", { "data-testid": "auth-component" }, "Auth Component"),
-}));
-
-// Mock auth-to-fund-mapper
-jest.mock("../../utils/auth-to-fund-mapper", () => ({
-  createAuthToFundCallbacks: () => ({
-    onLoaded: jest.fn(),
-    onClose: jest.fn(),
-    onDeposit: jest.fn(),
-    onError: jest.fn(),
-    onEvent: jest.fn(),
-  }),
-}));
-
-describe("AppContainer", () => {
-  test.each([
-    [AppIdentifier.CRYPTO_WITHDRAWALS, "Crypto Withdrawals"],
-    [AppIdentifier.FIAT_DEPOSITS, "Fiat Deposits"],
-    [AppIdentifier.FIAT_WITHDRAWALS, "Fiat Withdrawals"],
-    [AppIdentifier.CRYPTO_BUY, "Crypto Buy"],
-    [AppIdentifier.CRYPTO_SELL, "Crypto Sell"],
-    [AppIdentifier.CSP_CRYPTO_WITHDRAWALS, "CBP Crypto Withdrawals"],
-    [AppIdentifier.CSP_FIAT_WITHDRAWALS, "CBP Fiat Withdrawals"],
-    [AppIdentifier.CSP_CRYPTO_SELL, "Crypto Sell"],
-    [AppIdentifier.FUND, "Fund"],
-    [AppIdentifier.PROFILE, "Profile"],
-    [AppIdentifier.CRYPTO_ACCOUNT_LINK, "Crypto Account Link"],
-    [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS, "Crypto Account Link Payouts"],
-    [AppIdentifier.PAYOUTS, "Payouts"],
-    [AppIdentifier.PAY, "Pay"],
-    [AppIdentifier.FIAT_ACCOUNT_LINK, "Fiat Account Link"],
-  ])(
-    "should render AppContainer correctly for %s",
-    async (appIdentifier, title) => {
-      renderWithProviders(
-        <AppContainer
-          appIdentifier={appIdentifier}
-          zeroHashAppURL={"https://testurl.com/"}
-        />,
-        {
-          preloadedState: {
-            [appIdentifier]: {
-              isAppActive: true,
-              isAppLoaded: true,
-              jwt: "jwt",
-            },
-          },
-        }
-      );
-
-      // Trigger STYLE_CONFIG to load the iframe
-      const event = new MessageEvent("message", {
-        data: {
-          type: "STYLE_CONFIG",
-          modalStyle: { padding: 0, backgroundColor: "#FFF" },
-          appWrapperStyle: {},
-          iframeWrapperStyle: {},
-          iframeStyle: { width: "100%", height: "100%", border: "none", margin: 0, padding: 0, overflow: "hidden" },
-        },
-        origin: "https://testurl.com",
-      });
-      window.dispatchEvent(event);
-
-      // Wait for iframe to appear after styles are loaded
-      await waitFor(() => {
-        const iframe = screen.getByTitle(title);
-        expect(iframe).toBeDefined();
-      });
-
-      const iframe = screen.getByTitle(title);
-      expect(iframe.style.width).toBe("100%");
-      expect(iframe.style.height).toBe("100%");
-
-      const iframeSrc = new URL(iframe.getAttribute("src") as string);
-      expect(iframeSrc.origin).toBe("https://testurl.com");
-      expect(iframeSrc.searchParams.get("origin")).toBe("http://localhost");
-      expect(screen.getByTitle(title)).toBeDefined();
-
-      // Verify that postMessage has been called
-    }
-  );
-
-  describe("Fund App - useAuth toggle", () => {
-    it("should render iframe when useAuth is false", () => {
-      renderWithProviders(
-        <AppContainer
-          appIdentifier={AppIdentifier.FUND}
-          zeroHashAppURL="https://testurl.com/"
-        />,
-        {
-          preloadedState: {
-            fund: {
-              isAppActive: true,
-              isAppLoaded: true,
-              jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJ6ZXJvaGFzaCJ9.test",
-              useAuth: false,
-            },
-          },
-        }
-      );
-
-      const iframe = screen.getByTitle("Fund");
-      expect(iframe).toBeDefined();
-      expect(iframe.tagName).toBe("IFRAME");
-
-      expect(screen.queryByTestId("auth-component")).toBeNull();
-    });
-
-    it("should render Auth component when useAuth is true", () => {
-      renderWithProviders(
-        <AppContainer
-          appIdentifier={AppIdentifier.FUND}
-          zeroHashAppURL="https://testurl.com/"
-        />,
-        {
-          preloadedState: {
-            fund: {
-              isAppActive: true,
-              isAppLoaded: true,
-              jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2Nvbm5lY3QteHl6LnVzLmF1dGgwLmNvbS8ifQ.test",
-              useAuth: true,
-            },
-          },
-        }
-      );
-
-      const authComponent = screen.getByTestId("auth-component");
-      expect(authComponent).toBeDefined();
-      expect(authComponent.textContent).toBe("Auth Component");
-
-      expect(screen.queryByTitle("Fund")).toBeNull();
-    });
-  });
-
-  describe("Dynamic Styling via postMessage", () => {
-    it("should apply styles from STYLE_CONFIG postMessage event", async () => {
-      renderWithProviders(
-        <AppContainer
-          appIdentifier={AppIdentifier.CRYPTO_WITHDRAWALS}
-          zeroHashAppURL="https://testurl.com/"
-        />,
-        {
-          preloadedState: {
-            ["crypto-withdrawals"]: {
-              isAppActive: true,
-              isAppLoaded: true,
-              jwt: "jwt",
-            },
-          },
-        }
-      );
-
-      // Send STYLE_CONFIG postMessage with custom styles using the correct origin
-      const event = new MessageEvent("message", {
-        data: {
-          type: "STYLE_CONFIG",
-          modalStyle: {
-            padding: "20px",
-            backgroundColor: "#000",
-            height: "calc(100% - 50px)",
-            maxWidth: "calc(100% - 60px)",
-          },
-          appWrapperStyle: { zIndex: 9999 },
-          iframeWrapperStyle: { overflow: "visible" },
-          iframeStyle: { borderRadius: "8px" },
-        },
-        origin: "https://testurl.com",
-      });
-
-      window.dispatchEvent(event);
-
-      // Wait for iframe to appear and styles to be applied
-      await waitFor(() => {
-        const iframe = screen.getByTitle("Crypto Withdrawals");
-        expect(iframe).toBeDefined();
-        expect(iframe.style.borderRadius).toBe("8px");
-      });
-    });
-
-    it("should reject STYLE_CONFIG event from mismatched origin", async () => {
-      renderWithProviders(
-        <AppContainer
-          appIdentifier={AppIdentifier.CRYPTO_WITHDRAWALS}
-          zeroHashAppURL="https://testurl.com/"
-        />,
-        {
-          preloadedState: {
-            ["crypto-withdrawals"]: {
-              isAppActive: true,
-              isAppLoaded: true,
-              jwt: "jwt",
-            },
-          },
-        }
-      );
-
-      const iframe = screen.getByTitle("Crypto Withdrawals");
-      const initialBorderRadius = iframe.style.borderRadius;
-
-      // Send STYLE_CONFIG from wrong origin
-      const event = new MessageEvent("message", {
-        data: {
-          type: "STYLE_CONFIG",
-          modalStyle: { backgroundColor: "#000" },
-          appWrapperStyle: {},
-          iframeWrapperStyle: {},
-          iframeStyle: { borderRadius: "16px" },
-        },
-        origin: "https://untrusted.com",
-      });
-
-      window.dispatchEvent(event);
-
-      // Verify styles from untrusted origin were not applied (should keep initial value)
-      expect(iframe.style.borderRadius).toBe(initialBorderRadius);
-    });
-
-    it("should update iframe styles when STYLE_CONFIG event is received", async () => {
-      renderWithProviders(
-        <AppContainer
-          appIdentifier={AppIdentifier.CRYPTO_WITHDRAWALS}
-          zeroHashAppURL="https://testurl.com/"
-        />,
-        {
-          preloadedState: {
-            ["crypto-withdrawals"]: {
-              isAppActive: true,
-              isAppLoaded: true,
-              jwt: "jwt",
-            },
-          },
-        }
-      );
-
-      const iframe = screen.getByTitle("Crypto Withdrawals");
-
-      // Send STYLE_CONFIG with borderRadius
-      const event = new MessageEvent("message", {
-        data: {
-          type: "STYLE_CONFIG",
-          iframeStyle: {
-            width: "100%",
-            height: "100%",
-            border: "none",
-            margin: 0,
-            padding: 0,
-            overflow: "hidden",
-            borderRadius: "16px",
-          },
-          modalStyle: { padding: 0, backgroundColor: "#FFF" },
-          appWrapperStyle: {},
-          iframeWrapperStyle: {},
-        },
-        origin: "https://testurl.com",
-      });
-
-      window.dispatchEvent(event);
-
-      // Wait for borderRadius to be applied
-      await waitFor(() => {
-        expect(iframe.style.borderRadius).toBe("16px");
-      });
-    });
-
-    it("should initialize state with default styles from styles.ts", () => {
-      renderWithProviders(
-        <AppContainer
-          appIdentifier={AppIdentifier.CRYPTO_WITHDRAWALS}
-          zeroHashAppURL="https://testurl.com/"
-        />,
-        {
-          preloadedState: {
-            ["crypto-withdrawals"]: {
-              isAppActive: true,
-              isAppLoaded: true,
-              jwt: "jwt",
-            },
-          },
-        }
-      );
-
-      const wrapperDiv = screen.getByTitle("Crypto Withdrawals").closest("div")?.parentElement?.parentElement;
-
-      // Verify wrapper has default appWrapperStyle applied
-      if (wrapperDiv) {
-        expect(wrapperDiv.style.position).toBe("fixed");
-        expect(wrapperDiv.style.zIndex).toBe("999999");
-        expect(wrapperDiv.style.display).toBe("flex");
-      }
-    });
-  });
-});