[CM-1020]feat:Adding tests for all Commerce Widget Flows (#2358)

immutable · Oct 31, 2024 · 31cd0f2 · 31cd0f2
1 parent 556e4df
commit 31cd0f2
Show file tree

Hide file tree

Showing 18 changed files with 874 additions and 73 deletions.
diff --git a/tests/func-tests/checkout/widgets-nextjs/package.json b/tests/func-tests/checkout/widgets-nextjs/package.json
@@ -7,14 +7,15 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "func-test:ci": "playwright test",
+    "test": "playwright test",
+    "func-test:ci": "yarn test",
     "test:ui": "playwright test --ui",
     "test:remotewidgets": "USE_REMOTE_WIDGETS=true playwright test"
   },
   "dependencies": {
     "@biom3/react": "^0.25.21",
     "@ethersproject/providers": "^5.7.2",
-    "@imtbl/sdk": "1.61.0",
+    "@imtbl/sdk": "1.63.0",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18"

diff --git a/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-add-tokens/page.tsx b/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-add-tokens/page.tsx
@@ -0,0 +1,75 @@
+"use client";
+import { Box } from '@biom3/react';
+import { checkout } from '@imtbl/sdk';
+import { CommerceFlowType, ConnectionSuccess } from '@imtbl/sdk/checkout';
+import { useEffect } from 'react';
+import { useCommerceWidget } from '../../hooks/useCommerceWidget';
+
+function CommerceAddTokens() {
+
+  const { widget } = useCommerceWidget();
+
+
+  useEffect(() => {
+    if (!widget) return;
+    widget.mount("widget-root", {
+      flow: CommerceFlowType.ADD_TOKENS,
+    });
+
+    widget.addListener(
+      checkout.CommerceEventType.SUCCESS,
+      (payload: checkout.CommerceSuccessEvent) => {
+        const { type, data } = payload;
+
+        // capture transaction hash after user adds tokens
+        if (type === checkout.CommerceSuccessEventType.ADD_TOKENS_SUCCESS) {
+          const { transactionHash } = data;
+          console.log('Add Tokens Success: ', transactionHash);
+        }
+      }
+    );
+
+    // detect when user fails to add tokens
+    widget.addListener(
+      checkout.CommerceEventType.FAILURE,
+      (payload: checkout.CommerceFailureEvent) => {
+        const { type, data } = payload;
+
+        if (type === checkout.CommerceFailureEventType.ADD_TOKENS_FAILED) {
+          console.log('failed to add tokens', data.reason);
+        }
+      }
+    );
+
+    // remove widget from view when closed
+    widget.addListener(checkout.CommerceEventType.CLOSE, () => {
+      widget.unmount();
+    });
+
+    // clean up event listeners
+    return () => {
+      widget.removeListener(checkout.CommerceEventType.SUCCESS);
+      widget.removeListener(checkout.CommerceEventType.FAILURE);
+      widget.removeListener(checkout.CommerceEventType.CLOSE);
+    };
+
+
+  }, [widget]);
+
+
+  return (
+    <div>
+      <Box
+        id="widget-root"
+        sx={{
+          minw: "430px",
+          minh: "650px",
+          bg: "base.color.translucent.standard.300",
+          brad: "base.borderRadius.x5",
+        }}
+      />
+    </div>
+  )
+}
+
+export default CommerceAddTokens;
diff --git a/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-bridge/page.tsx b/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-bridge/page.tsx
@@ -0,0 +1,75 @@
+"use client";
+import { Box } from '@biom3/react';
+import { checkout } from '@imtbl/sdk';
+import { CommerceFlowType } from '@imtbl/sdk/checkout';
+import { useEffect } from 'react';
+import { useCommerceWidget } from '../../hooks/useCommerceWidget';
+
+
+function CommerceBridge() {
+
+  const { widget } = useCommerceWidget();
+
+
+  useEffect(() => {
+    if (!widget) return;
+    widget.mount("widget-root", {
+      flow: CommerceFlowType.BRIDGE,
+    });
+
+    widget.addListener(
+      checkout.CommerceEventType.SUCCESS,
+      (payload: checkout.CommerceSuccessEvent) => {
+        const { type, data } = payload;
+
+        // capture provider after user executes bridge
+        if (type === checkout.CommerceSuccessEventType.BRIDGE_SUCCESS) {
+          console.log('bridge success', data.transactionHash);
+        }
+      }
+    );
+
+    // detect when user fails to execute bridge
+    widget.addListener(
+      checkout.CommerceEventType.FAILURE,
+      (payload: checkout.CommerceFailureEvent) => {
+        const { type, data } = payload;
+
+        if (type === checkout.CommerceFailureEventType.BRIDGE_FAILED) {
+          console.log('failed to execute bridge', data.reason);
+        }
+      }
+    );
+
+    // remove widget from view when closed
+    widget.addListener(checkout.CommerceEventType.CLOSE, () => {
+      widget.unmount();
+    });
+
+    // clean up event listeners
+    return () => {
+      widget.removeListener(checkout.CommerceEventType.SUCCESS);
+      widget.removeListener(checkout.CommerceEventType.FAILURE);
+      widget.removeListener(checkout.CommerceEventType.CLOSE);
+    };
+
+
+  }, [widget]);
+
+
+  return (
+    <div>
+      <Box
+        id="widget-root"
+        sx={{
+          minw: "430px",
+          minh: "650px",
+          bg: "base.color.translucent.standard.300",
+          brad: "base.borderRadius.x5",
+        }}
+      />
+    </div>
+  )
+}
+
+export default CommerceBridge;
diff --git a/...t/widgets-nextjs/src/app/widgets/page.tsx → ...-nextjs/src/app/commerce-connect/page.tsx b/...t/widgets-nextjs/src/app/widgets/page.tsx → ...-nextjs/src/app/commerce-connect/page.tsx
@@ -1,32 +1,19 @@
 "use client";
 import { Box } from '@biom3/react';
 import { checkout } from '@imtbl/sdk';
-import { CommerceFlowType, ConnectionSuccess, Widget, WidgetType } from '@imtbl/sdk/checkout';
-import { useEffect, useState } from 'react';
+import { CommerceFlowType, ConnectionSuccess } from '@imtbl/sdk/checkout';
+import { useEffect } from 'react';
+import { useCommerceWidget } from '../../hooks/useCommerceWidget';
 
-const checkoutSDK = new checkout.Checkout();
+function CommerceConnect() {
 
-function Widgets() {
-
-  const [widget, setWidget] = useState<Widget<WidgetType.IMMUTABLE_COMMERCE>>();
-
-  useEffect(() => {
-
-    const loadWidgets = async () => {
-      const widgetsFactory = await checkoutSDK.widgets({ config: {} });
-
-      const widget = widgetsFactory.create(WidgetType.IMMUTABLE_COMMERCE, {})
-      setWidget(widget);
-    }
-
-    loadWidgets();
-  }, []);
+  const { widget } = useCommerceWidget();
 
 
   useEffect(() => {
     if (!widget) return;
     widget.mount("widget-root", {
-      flow: CommerceFlowType.WALLET,
+      flow: CommerceFlowType.CONNECT,
     });
 
     widget.addListener(
@@ -38,10 +25,6 @@ function Widgets() {
         if (type === checkout.CommerceSuccessEventType.CONNECT_SUCCESS) {
           const { walletProviderName } = data as ConnectionSuccess;
           console.log('connected to ', walletProviderName);
-          // setProvider(data.provider);
-
-          // optional, immediately close the widget
-          // widget.unmount();
         }
       }
     );
@@ -66,7 +49,7 @@ function Widgets() {
     // clean up event listeners
     return () => {
       widget.removeListener(checkout.CommerceEventType.SUCCESS);
-      widget.removeListener(checkout.CommerceEventType.DISCONNECTED);
+      widget.removeListener(checkout.CommerceEventType.FAILURE);
       widget.removeListener(checkout.CommerceEventType.CLOSE);
     };
 
@@ -89,4 +72,4 @@ function Widgets() {
   )
 }
 
-export default Widgets;
+export default CommerceConnect;
diff --git a/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-onramp/page.tsx b/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-onramp/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { Box } from '@biom3/react';
+import { Web3Provider } from '@ethersproject/providers';
+import { checkout } from '@imtbl/sdk';
+import { CommerceFlowType } from '@imtbl/sdk/checkout';
+import { useEffect, useMemo } from 'react';
+import { useCommerceWidget } from '../../hooks/useCommerceWidget';
+import { MockProvider } from '../utils/mockProvider';
+
+function CommerceOnRamp() {
+  const { widget, factory } = useCommerceWidget();
+  const provider = useMemo(() => new Web3Provider(new MockProvider()), []);
+
+  useEffect(() => {
+    if (!widget || !factory) return;
+
+    factory.updateProvider(provider);
+
+    widget.mount("widget-root", {
+      flow: CommerceFlowType.ONRAMP,
+    });
+
+    widget.addListener(
+      checkout.CommerceEventType.SUCCESS,
+      (payload: checkout.CommerceSuccessEvent) => {
+        const { type, data } = payload;
+
+        // capture provider after user onramp
+        if (type === checkout.CommerceSuccessEventType.ONRAMP_SUCCESS) {
+          const { transactionHash } = data;
+          console.log('onramp success', transactionHash);
+        }
+      }
+    );
+
+    // detect when user fails to onramp
+    widget.addListener(
+      checkout.CommerceEventType.FAILURE,
+      (payload: checkout.CommerceFailureEvent) => {
+        const { type, data } = payload;
+
+        if (type === checkout.CommerceFailureEventType.ONRAMP_FAILED) {
+          console.log('failed to onramp', data.reason);
+        }
+      }
+    );
+
+    // remove widget from view when closed
+    widget.addListener(checkout.CommerceEventType.CLOSE, () => {
+      widget.unmount();
+    });
+
+    // clean up event listeners
+    return () => {
+      widget.removeListener(checkout.CommerceEventType.SUCCESS);
+      widget.removeListener(checkout.CommerceEventType.FAILURE);
+      widget.removeListener(checkout.CommerceEventType.CLOSE);
+    };
+
+
+  }, [widget, factory, provider]);
+
+
+  return (
+    <div>
+      <Box
+        id="widget-root"
+        sx={{
+          minw: "430px",
+          minh: "650px",
+          bg: "base.color.translucent.standard.300",
+          brad: "base.borderRadius.x5",
+        }}
+      />
+    </div>
+  )
+}
+
+export default CommerceOnRamp;
diff --git a/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-sale/page.tsx b/tests/func-tests/checkout/widgets-nextjs/src/app/commerce-sale/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { Box } from '@biom3/react';
+import { Web3Provider } from '@ethersproject/providers';
+import { checkout } from '@imtbl/sdk';
+import { CommerceFlowType } from '@imtbl/sdk/checkout';
+import { useEffect, useMemo } from 'react';
+import { useCommerceWidget } from '../../hooks/useCommerceWidget';
+import { MockProvider } from '../utils/mockProvider';
+
+function CommerceSale() {
+  const { widget, factory } = useCommerceWidget();
+  const provider = useMemo(() => new Web3Provider(new MockProvider()), []);
+
+  useEffect(() => {
+    if (!widget || !factory) return;
+
+    factory.updateProvider(provider);
+
+    widget.mount("widget-root", {
+      flow: CommerceFlowType.SALE,
+    });
+
+    widget.addListener(
+      checkout.CommerceEventType.SUCCESS,
+      (payload: checkout.CommerceSuccessEvent) => {
+        const { type, data } = payload;
+
+        // capture provider after user completes sale
+        if (type === checkout.CommerceSuccessEventType.SALE_SUCCESS) {
+          const { transactionHash } = data;
+          console.log('sale success', transactionHash);
+        }
+      }
+    );
+
+    // detect when user fails to complete sale
+    widget.addListener(
+      checkout.CommerceEventType.FAILURE,
+      (payload: checkout.CommerceFailureEvent) => {
+        const { type, data } = payload;
+
+        if (type === checkout.CommerceFailureEventType.SALE_FAILED) {
+          console.log('failed to sale', data.reason);
+        }
+      }
+    );
+
+    // remove widget from view when closed
+    widget.addListener(checkout.CommerceEventType.CLOSE, () => {
+      widget.unmount();
+    });
+
+    // clean up event listeners
+    return () => {
+      widget.removeListener(checkout.CommerceEventType.SUCCESS);
+      widget.removeListener(checkout.CommerceEventType.FAILURE);
+      widget.removeListener(checkout.CommerceEventType.CLOSE);
+    };
+
+
+  }, [widget, factory, provider]);
+
+
+  return (
+    <div>
+      <Box
+        id="widget-root"
+        sx={{
+          minw: "430px",
+          minh: "650px",
+          bg: "base.color.translucent.standard.300",
+          brad: "base.borderRadius.x5",
+        }}
+      />
+    </div>
+  )
+}
+
+export default CommerceSale;