fix: flaky e2e contract tests (#1640)

- Contract tests now display: - Connection status - Contract call errors below each field - Buttons are now disabled when required data is not present - Replaced `timeouts` with `expect.poll` using new visual indicators
FuelLabs · Oct 29, 2024 · d6a9426 · d6a9426
1 parent 7d1d08d
commit d6a9426
Show file tree

Hide file tree

Showing 19 changed files with 245 additions and 147 deletions.
diff --git a/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts b/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts
@@ -54,7 +54,11 @@ test.describe('Deposit Half ETH', () => {
 
     const depositHalfButton = getButtonByText(page, 'Deposit Half ETH', true);
 
-    await page.waitForTimeout(3000);
+    await expect
+      .poll(() => depositHalfButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await depositHalfButton.click();
 
     const walletNotificationPage =

diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts
@@ -62,7 +62,11 @@ test.describe('Forward and Mint Multicall', () => {
       page,
       'Deposit And Mint Multicall'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfAndMintButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfAndMintButton.click();
 
     const walletNotificationPage =

diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts
@@ -52,7 +52,11 @@ test.describe('Forward Eth', () => {
     await forwardEthInput.fill(forwardEthAmount);
 
     const forwardEthButton = getButtonByText(page, 'Forward ETH');
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardEthButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardEthButton.click();
 
     const walletNotificationPage =

diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts
@@ -65,7 +65,11 @@ test.describe('Forward Half ETH and Mint External Custom Asset', () => {
       page,
       'Forward Half And External Mint'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfAndMintButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfAndMintButton.click();
 
     const walletNotificationPage =

diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts
@@ -63,7 +63,11 @@ test.describe('Forward Half ETH and Mint Custom Asset', () => {
       page,
       'Forward Half And Mint'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfAndMintButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfAndMintButton.click();
 
     const walletNotificationPage =

diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts
@@ -76,7 +76,11 @@ test.describe('Forward Half Custom Asset', () => {
       page,
       'Forward Half Custom Asset'
     );
-    await page.waitForTimeout(2500);
+    await expect
+      .poll(() => forwardHalfCustomAssetButton.isEnabled().catch(() => false), {
+        timeout: 15000,
+      })
+      .toBeTruthy();
     await forwardHalfCustomAssetButton.click();
 
     const walletNotificationPage =

diff --git a/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts b/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts
@@ -54,7 +54,9 @@ test.describe('Mint Assets', () => {
     await mintInput.fill(mintAmount);
 
     const mintButton = getButtonByText(page, 'Mint', true);
-    await page.waitForTimeout(3000);
+    await expect
+      .poll(() => mintButton.isEnabled().catch(() => false), { timeout: 15000 })
+      .toBeTruthy();
     await mintButton.click();
 
     // test asset is correct
@@ -126,7 +128,9 @@ test.describe('Mint Assets', () => {
     await decimalsInput.fill(decimals);
 
     const mintButton = getButtonByText(page, 'Mint Asset configuration');
-    await page.waitForTimeout(3000);
+    await expect
+      .poll(() => mintButton.isEnabled().catch(() => false), { timeout: 15000 })
+      .toBeTruthy();
     await mintButton.click();
 
     // test asset is correct

diff --git a/packages/e2e-contract-tests/playwright/e2e/utils/contract.ts b/packages/e2e-contract-tests/playwright/e2e/utils/contract.ts
@@ -1,5 +1,10 @@
 import type { FuelWalletTestHelper } from '@fuels/playwright-utils';
-import { getButtonByText, getByAriaLabel } from '@fuels/playwright-utils';
+import {
+  expect,
+  getButtonByText,
+  getByAriaLabel,
+  hasText,
+} from '@fuels/playwright-utils';
 import type { Page } from '@playwright/test';
 
 export const connect = async (
@@ -12,5 +17,14 @@ export const connect = async (
   await getByAriaLabel(page, `Connect to ${walletName}`, true).click();
   await fuelWalletTestHelper.walletConnect();
 
+  await expect
+    .poll(
+      () =>
+        hasText(page, 'Status: Connected')
+          .then(() => true)
+          .catch(() => false),
+      { timeout: 15000 }
+    )
+    .toBeTruthy();
   await page.waitForTimeout(3000);
 };
diff --git a/packages/e2e-contract-tests/src/components/AssetConfigurationCard.tsx b/packages/e2e-contract-tests/src/components/AssetConfigurationCard.tsx
@@ -3,6 +3,7 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { mint } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 
 export const AssetConfigurationCard = () => {
   const [assetData, setAssetData] = useState({
@@ -11,7 +12,28 @@ export const AssetConfigurationCard = () => {
     decimals: '',
   });
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
+  const { disabled, execute, error } = useAction({
+    isValid:
+      !!wallet &&
+      !!assetData.amount &&
+      !!assetData.subId &&
+      !!assetData.decimals,
+    action: async () => {
+      if (
+        wallet.wallet &&
+        assetData.amount &&
+        assetData.subId &&
+        assetData.decimals
+      ) {
+        await mint({
+          wallet: wallet.wallet!,
+          amount: bn.parseUnits(assetData.amount, Number(assetData.decimals)),
+          subId: assetData.subId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -47,23 +69,10 @@ export const AssetConfigurationCard = () => {
           }
         />
         <br />
-        <button
-          type="button"
-          onClick={async () => {
-            if (wallet.wallet) {
-              await mint({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(
-                  assetData.amount,
-                  Number(assetData.decimals)
-                ),
-                subId: assetData.subId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Mint Asset configuration
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>

diff --git a/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx b/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx
@@ -3,14 +3,29 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { depositAndMintMultiCall } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const DepositAndMintMultiCalls = () => {
   const [forwardAmount, setForwardAmount] = useState<string>('');
   const [mintAmount, setMintAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
   const baseAssetId = useBaseAssetId();
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!forwardAmount && !!mintAmount,
+    action: async () => {
+      if (baseAssetId && wallet.wallet && mintAmount && forwardAmount) {
+        await depositAndMintMultiCall({
+          wallet: wallet.wallet!,
+          forwardAmount: bn.parseUnits(forwardAmount),
+          mintAmount: bn.parseUnits(mintAmount, 1).div(10),
+          assetId: baseAssetId,
+          baseAssetId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -36,23 +51,10 @@ export const DepositAndMintMultiCalls = () => {
           value={mintAmount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet.wallet && mintAmount && forwardAmount) {
-              await depositAndMintMultiCall({
-                wallet: wallet.wallet,
-                forwardAmount: bn.parseUnits(forwardAmount),
-                mintAmount: bn.parseUnits(mintAmount, 1).div(10),
-                assetId: baseAssetId,
-                baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Deposit And Mint Multicall
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>

diff --git a/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx b/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx
@@ -3,13 +3,26 @@ import { bn } from 'fuels';
 import { useState } from 'react';
 
 import { depositHalf } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 
 export const DepositHalfEthCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
   const baseAssetId = useBaseAssetId();
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!amount,
+    action: async () => {
+      if (baseAssetId && wallet.wallet && amount) {
+        await depositHalf({
+          wallet: wallet.wallet!,
+          amount: bn.parseUnits(amount),
+          assetId: baseAssetId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -24,21 +37,10 @@ export const DepositHalfEthCard = () => {
           value={amount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!baseAssetId}
-          onClick={async () => {
-            if (baseAssetId && wallet.wallet && amount) {
-              await depositHalf({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(amount),
-                assetId: baseAssetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Deposit Half ETH
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>

diff --git a/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx b/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx
@@ -4,17 +4,30 @@ import { useState } from 'react';
 
 import { MAIN_CONTRACT_ID } from '../config';
 import { deposit } from '../contract_interactions';
+import { useAction } from '../hooks/useAction';
 import { useBaseAssetId } from '../hooks/useBaseAssetId';
 import { calculateAssetId } from '../utils';
 
 export const ForwardCustomAssetCard = () => {
   const [amount, setAmount] = useState<string>('');
   const { account } = useAccount();
-  const wallet = useWallet(account);
+  const wallet = useWallet({ account });
 
   const baseAssetId = useBaseAssetId();
   const assetId =
     !!baseAssetId && calculateAssetId(MAIN_CONTRACT_ID, baseAssetId);
+  const { disabled, execute, error } = useAction({
+    isValid: !!baseAssetId && !!wallet && !!amount,
+    action: async () => {
+      if (assetId && wallet.wallet && amount) {
+        await deposit({
+          wallet: wallet.wallet!,
+          amount: bn.parseUnits(amount, 1).div(10),
+          assetId,
+        });
+      }
+    },
+  });
 
   return (
     <div>
@@ -27,21 +40,10 @@ export const ForwardCustomAssetCard = () => {
           value={amount}
         />
         <br />
-        <button
-          type="button"
-          disabled={!assetId}
-          onClick={async () => {
-            if (assetId && wallet.wallet && amount) {
-              await deposit({
-                wallet: wallet.wallet,
-                amount: bn.parseUnits(amount, 1).div(10),
-                assetId,
-              });
-            }
-          }}
-        >
+        <button type="button" disabled={disabled} onClick={execute}>
           Forward Custom Asset
         </button>
+        {error && <p style={{ color: 'red' }}>{error}</p>}
         <hr />
       </div>
     </div>