feat: automated e2e test

skip-mev · Feb 23, 2024 · 30ee5ab · 30ee5ab
1 parent d7249c8
commit 30ee5ab
Show file tree

Hide file tree

Showing 22 changed files with 324 additions and 590 deletions.
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
diff --git a/env.d.ts b/env.d.ts
@@ -11,6 +11,7 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID?: string;
     readonly RESEND_API_KEY?: string;
     readonly WALLETCONNECT_VERIFY_KEY?: string;
+    readonly WORD_PHRASE_KEY?: string;
   }
 }
 

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -2,9 +2,11 @@ import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
   testDir: "./tests",
+  globalSetup: "./tests/lib/globalSetup.ts",
+  timeout: 600000,
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 2,
   workers: 1,
   reporter: "html",
   use: {
@@ -17,4 +19,9 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
     },
   ],
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
 });
diff --git a/src/components/AssetSelect/AssetSelectContent.tsx b/src/components/AssetSelect/AssetSelectContent.tsx
@@ -89,6 +89,7 @@ function AssetSelectContent({ assets = [], balances, onChange, onClose, showChai
           {filteredAssets.map((asset) => (
             <button
               key={`${asset.chainID}-${asset.denom}`}
+              data-testid="asset-item"
               className="flex w-full items-center gap-4 rounded-xl p-4 text-left transition-colors hover:bg-[#ECD9D9] focus:-outline-offset-2"
               onClick={() => (onClose(), onChange?.(asset))}
             >

diff --git a/src/components/AssetSelect/index.tsx b/src/components/AssetSelect/index.tsx
@@ -32,6 +32,7 @@ function AssetSelect({ asset, assets, balances, onChange, showChainInfo, isBalan
             "disabled:cursor-not-allowed disabled:opacity-50",
           )}
           disabled={!assets || assets.length === 0}
+          data-testid="select-asset"
         >
           {asset && (
             <img

diff --git a/src/components/ChainSelect/ChainSelectContent.tsx b/src/components/ChainSelect/ChainSelectContent.tsx
@@ -84,6 +84,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
                 className="flex w-full items-center gap-4 rounded-xl p-4 text-left transition-colors hover:bg-[#ECD9D9] focus:-outline-offset-2"
                 key={chain.chainID}
                 onClick={() => onChange(chain)}
+                data-testid="chain-item"
               >
                 <img
                   alt={chain.prettyName}

diff --git a/src/components/ChainSelect/ChainSelectTrigger.tsx b/src/components/ChainSelect/ChainSelectTrigger.tsx
@@ -18,6 +18,7 @@ const ChainSelectTrigger = forwardRef<HTMLButtonElement, Props>(
           "border border-neutral-200 hover:border-neutral-300",
         )}
         ref={ref}
+        data-testid={"select-chain"}
         {...props}
       >
         <span className="flex-1">{chain ? chain.prettyName : "Select Chain"}</span>

diff --git a/src/components/RouteDisplay/Step.tsx b/src/components/RouteDisplay/Step.tsx
@@ -4,19 +4,33 @@ import { Spinner } from "../Icons/Spinner";
 
 export const Step = {
   SuccessState: () => (
-    <div className="rounded bg-white">
+    <div
+      className="rounded bg-white"
+      data-testid="state-success"
+    >
       <CheckCircleIcon className="h-6 w-6 text-green-400" />
     </div>
   ),
   FailureState: () => (
-    <div className="rounded bg-white">
+    <div
+      className="rounded bg-white"
+      data-testid="state-failed"
+    >
       <XCircleIcon className="h-6 w-6 text-red-400" />
     </div>
   ),
   LoadingState: () => (
-    <div className="rounded-full border-2 bg-white p-1">
+    <div
+      className="rounded-full border-2 bg-white p-1"
+      data-testid="state-loading"
+    >
       <Spinner className="h-4 w-4 text-[#FF486E]" />
     </div>
   ),
-  DefaultState: () => <div className="h-2 w-2 rounded-full bg-neutral-200" />,
+  DefaultState: () => (
+    <div
+      className="h-2 w-2 rounded-full bg-neutral-200"
+      data-testid="state-idle"
+    />
+  ),
 };
diff --git a/src/components/RouteDisplay/SwapStep.tsx b/src/components/RouteDisplay/SwapStep.tsx
@@ -74,9 +74,22 @@ export const SwapStep = ({ action, actions, statusData }: SwapStepProps) => {
     }
   }, [isSwapFirstStep, state]);
 
+  const dataTestValue = JSON.stringify({
+    sourceChain: action.chain,
+    destinationChain: action.chain,
+    sourceAsset: action.sourceAsset,
+    destinationAsset: action.destinationAsset,
+    bridgeOrVenue: action.venue,
+    type: action.type,
+  });
+
   if (!assetIn && assetOut) {
     return (
-      <div className="flex items-center gap-2">
+      <div
+        className="flex items-center gap-2"
+        data-testid={`operation-step-${operationIndex}`}
+        data-test-value={dataTestValue}
+      >
         <div className="flex h-14 w-14 items-center justify-center">{renderSwapState}</div>
         <div className="max-w-[18rem]">
           <Gap.Parent className="text-sm text-neutral-500">
@@ -105,6 +118,7 @@ export const SwapStep = ({ action, actions, statusData }: SwapStepProps) => {
             <AdaptiveLink
               className="text-xs font-semibold text-[#FF486E] underline"
               href={explorerLink.link}
+              data-testid={`explorer-link`}
             >
               {explorerLink.shorthand}
             </AdaptiveLink>
@@ -157,7 +171,11 @@ export const SwapStep = ({ action, actions, statusData }: SwapStepProps) => {
   }
 
   return (
-    <div className="flex items-center gap-2">
+    <div
+      className="flex items-center gap-2"
+      data-testid={`operation-step-${operationIndex}`}
+      data-test-value={dataTestValue}
+    >
       <div className="flex h-14 w-14 items-center justify-center">{renderSwapState}</div>
       <div className="max-w-[18rem]">
         <Gap.Parent className="text-sm text-neutral-500">
@@ -193,6 +211,7 @@ export const SwapStep = ({ action, actions, statusData }: SwapStepProps) => {
           <AdaptiveLink
             className="text-xs font-semibold text-[#FF486E] underline"
             href={explorerLink.link}
+            data-testid={`explorer-link`}
           >
             {explorerLink.shorthand}
           </AdaptiveLink>

diff --git a/src/components/RouteDisplay/TransferStep.tsx b/src/components/RouteDisplay/TransferStep.tsx
@@ -74,14 +74,27 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
     return prevAsset;
   })();
 
+  const dataTestValue = JSON.stringify({
+    sourceChain: action.sourceChain,
+    destinationChain: action.destinationChain,
+    sourceAsset: action.asset,
+    destinationAsset: action.asset,
+    bridgeOrVenue: action.bridgeID,
+    type: action.type,
+  });
+
   if (!sourceChain || !destinationChain) {
     // this should be unreachable
     return null;
   }
 
   if (!asset) {
     return (
-      <div className="flex items-center gap-2">
+      <div
+        className="flex items-center gap-2"
+        data-testid={`operation-step-${operationIndex}`}
+        data-test-value={dataTestValue}
+      >
         <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center">{renderTransferState}</div>
         <div className="max-w-[18rem] space-y-1 text-sm text-neutral-500">
           <Gap.Parent>
@@ -130,6 +143,7 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
             <AdaptiveLink
               className="text-xs font-semibold text-[#FF486E] underline"
               href={explorerLink.link}
+              data-testid={`explorer-link`}
             >
               {explorerLink.shorthand}
             </AdaptiveLink>
@@ -140,7 +154,11 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
   }
 
   return (
-    <div className="flex items-center gap-2">
+    <div
+      className="flex items-center gap-2"
+      data-testid={`operation-step-${operationIndex}`}
+      data-test-value={dataTestValue}
+    >
       <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center">{renderTransferState}</div>
       <div className="max-w-[18rem] space-y-1 text-sm text-neutral-500">
         <Gap.Parent>
@@ -197,6 +215,7 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
           <AdaptiveLink
             className="text-xs font-semibold text-[#FF486E] underline"
             href={explorerLink.link}
+            data-testid={`explorer-link`}
           >
             {explorerLink.shorthand}
           </AdaptiveLink>

diff --git a/src/components/RouteDisplay/index.tsx b/src/components/RouteDisplay/index.tsx
@@ -54,7 +54,11 @@ export const RouteDisplay = ({ route, isRouteExpanded, setIsRouteExpanded, broad
       <div className="absolute inset-y-0 flex w-14 items-center justify-center py-7">
         <div className="h-full w-0.5 bg-neutral-200"></div>
       </div>
-      <div className="relative flex h-full flex-col justify-between gap-4">
+      <div
+        className="relative flex h-full flex-col justify-between gap-4"
+        data-testid="operations"
+        data-test-value={actions.length}
+      >
         <div className="flex items-center justify-between pr-4">
           <RouteEnd
             amount={amountIn}

diff --git a/src/components/TransactionDialog/TransactionDialogContent.tsx b/src/components/TransactionDialog/TransactionDialogContent.tsx
@@ -196,7 +196,10 @@ function TransactionDialogContent({ route, onClose, isAmountError, transactionCo
         />
       </div>
 
-      <div className="flex-1 space-y-6">
+      <div
+        className="flex-1 space-y-6"
+        data-testid="tx-hash-list"
+      >
         {broadcastedTxs.map(({ txHash }, i) => (
           <div
             key={`tx-${i}`}
@@ -219,6 +222,8 @@ function TransactionDialogContent({ route, onClose, isAmountError, transactionCo
                   href={broadcastedTxs[i].explorerLink}
                   target="_blank"
                   rel="noopener noreferrer"
+                  data-testid={`tx-hash-${i + 1}`}
+                  data-test-value={txHash}
                 >
                   <span>
                     {txHash.slice(0, 6)}
@@ -289,7 +294,11 @@ function TransactionDialogContent({ route, onClose, isAmountError, transactionCo
         <div className="flex w-full items-center rounded-md bg-black p-3 text-left text-xs font-medium uppercase text-white/50">
           <p className="flex-1">
             This route requires{" "}
-            <span className="text-white">
+            <span
+              className="text-white"
+              data-testid="transactions-count"
+              data-test-value={transactionCount}
+            >
               {transactionCount} Transaction
               {transactionCount > 1 ? "s" : ""}
             </span>{" "}

diff --git a/src/components/TransactionSuccessView.tsx b/src/components/TransactionSuccessView.tsx
@@ -41,7 +41,7 @@ const TransactionSuccessView: FC<{
           />
         </svg>
       </div>
-      <div>
+      <div data-testid="transaction-success">
         <p className="mb-4 text-3xl font-bold">{route.doesSwap ? "Swap" : "Transfer"} Successful</p>
       </div>
       <p className="pb-8 text-center font-medium text-neutral-400">

diff --git a/src/components/__tests__/ConnectWalletButtonSmall.test.tsx b/src/components/__tests__/ConnectWalletButtonSmall.test.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,7 @@ const TransactionSuccessView: FC<{ @@
               />
             </svg>
           </div>
-          <div>
+          <div data-testid="transaction-success">
             <p className="mb-4 text-3xl font-bold">{route.doesSwap ? "Swap" : "Transfer"} Successful</p>
           </div>
           <p className="pb-8 text-center font-medium text-neutral-400">
@@ Expand Down @@