From d6a94267011e583f245c82d246c627116a0dfd38 Mon Sep 17 00:00:00 2001 From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com> Date: Mon, 28 Oct 2024 22:30:32 -0300 Subject: [PATCH] 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 --- .../playwright/e2e/DepositHalfEth.test.ts | 6 ++- .../e2e/ForwardAndMintMulticall.test.ts | 6 ++- .../playwright/e2e/ForwardEth.test.ts | 6 ++- .../e2e/ForwardHalfAndExternalMint.test.ts | 6 ++- .../playwright/e2e/ForwardHalfAndMint.test.ts | 6 ++- .../e2e/ForwardHalfCustomAsset.test.ts | 6 ++- .../playwright/e2e/MintAsset.test.ts | 8 +++- .../playwright/e2e/utils/contract.ts | 16 +++++++- .../src/components/AssetConfigurationCard.tsx | 41 +++++++++++-------- .../components/DepositAndMintMultiCall.tsx | 34 +++++++-------- .../src/components/DepositHalfEthCard.tsx | 30 +++++++------- .../src/components/ForwardCustomAssetCard.tsx | 30 +++++++------- .../src/components/ForwardEthCard.tsx | 29 ++++++------- .../ForwardHalfAndExternalMintCard.tsx | 33 +++++++-------- .../src/components/ForwardHalfAndMintCard.tsx | 33 +++++++-------- .../components/ForwardHalfCustomAssetCard.tsx | 30 +++++++------- .../src/components/Header.tsx | 11 +++-- .../src/components/MintAssetCard.tsx | 29 ++++++------- .../e2e-contract-tests/src/hooks/useAction.ts | 32 +++++++++++++++ 19 files changed, 245 insertions(+), 147 deletions(-) create mode 100644 packages/e2e-contract-tests/src/hooks/useAction.ts diff --git a/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts b/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts index bafec20f3f..d3c64e89f9 100644 --- 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 index 76ccba6979..25913e97ab 100644 --- 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 index 0b499bbe0f..2a81145f02 100644 --- 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 index 3f3aa981d7..cf409fc7e5 100644 --- 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 index c11e69ed40..9fee610d35 100644 --- 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 index d9d2f978df..64b6e3df60 100644 --- 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 index 56cc1ec8bb..6fabe8752c 100644 --- 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 index b877da6b37..ee450339ba 100644 --- 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 index 0bf91f9c19..b1a54b31bf 100644 --- 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 (
@@ -47,23 +69,10 @@ export const AssetConfigurationCard = () => { } />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx b/packages/e2e-contract-tests/src/components/DepositAndMintMultiCall.tsx index 0176234781..71e00b4f8e 100644 --- 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(''); const [mintAmount, setMintAmount] = useState(''); 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 (
@@ -36,23 +51,10 @@ export const DepositAndMintMultiCalls = () => { value={mintAmount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx b/packages/e2e-contract-tests/src/components/DepositHalfEthCard.tsx index afdd4c4d30..59b4eb5574 100644 --- 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(''); 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 (
@@ -24,21 +37,10 @@ export const DepositHalfEthCard = () => { value={amount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx b/packages/e2e-contract-tests/src/components/ForwardCustomAssetCard.tsx index e082463434..9e4ee1e630 100644 --- 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(''); 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 (
@@ -27,21 +40,10 @@ export const ForwardCustomAssetCard = () => { value={amount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx b/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx index 0d1dc095fc..99002ee509 100644 --- a/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx +++ b/packages/e2e-contract-tests/src/components/ForwardEthCard.tsx @@ -3,14 +3,26 @@ import { bn } from 'fuels'; import { useState } from 'react'; import { deposit } from '../contract_interactions'; +import { useAction } from '../hooks/useAction'; import { useBaseAssetId } from '../hooks/useBaseAssetId'; export const ForwardEthCard = () => { const [amount, setAmount] = useState(''); 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 () => { + await deposit({ + wallet: wallet.wallet!, + amount: bn.parseUnits(amount), + assetId: baseAssetId, + }); + }, + }); + return (

Forward ETH

@@ -22,21 +34,10 @@ export const ForwardEthCard = () => { value={amount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx b/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx index 4ee6f831f9..a5e7b08f6e 100644 --- a/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx +++ b/packages/e2e-contract-tests/src/components/ForwardHalfAndExternalMintCard.tsx @@ -3,15 +3,29 @@ import { bn } from 'fuels'; import { useState } from 'react'; import { depositHalfAndExternalMint } from '../contract_interactions'; +import { useAction } from '../hooks/useAction'; import { useBaseAssetId } from '../hooks/useBaseAssetId'; export const ForwardHalfAndExternalMintCard = () => { const [forwardAmount, setForwardAmount] = useState(''); const [mintAmount, setMintAmount] = useState(''); 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 () => { + await depositHalfAndExternalMint({ + wallet: wallet.wallet!, + forwardAmount: bn.parseUnits(forwardAmount), + mintAmount: bn.parseUnits(mintAmount, 1).div(10), + assetId: baseAssetId, + baseAssetId, + }); + }, + }); + return (

Forward Half and External Mint

@@ -32,23 +46,10 @@ export const ForwardHalfAndExternalMintCard = () => { value={mintAmount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx b/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx index b345f74418..413b895fea 100644 --- a/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx +++ b/packages/e2e-contract-tests/src/components/ForwardHalfAndMintCard.tsx @@ -3,15 +3,29 @@ import { bn } from 'fuels'; import { useState } from 'react'; import { depositHalfAndMint } from '../contract_interactions'; +import { useAction } from '../hooks/useAction'; import { useBaseAssetId } from '../hooks/useBaseAssetId'; export const ForwardHalfAndMintCard = () => { const [forwardAmount, setForwardAmount] = useState(''); const [mintAmount, setMintAmount] = useState(''); 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 () => { + await depositHalfAndMint({ + wallet: wallet.wallet!, + forwardAmount: bn.parseUnits(forwardAmount), + mintAmount: bn.parseUnits(mintAmount, 1).div(10), + assetId: baseAssetId, + baseAssetId, + }); + }, + }); + return (

Forward Half and Mint

@@ -32,23 +46,10 @@ export const ForwardHalfAndMintCard = () => { value={mintAmount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx b/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx index a27b660502..f1656ad2f8 100644 --- a/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx +++ b/packages/e2e-contract-tests/src/components/ForwardHalfCustomAssetCard.tsx @@ -4,15 +4,28 @@ import { useState } from 'react'; import { MAIN_CONTRACT_ID } from '../config'; import { depositHalf } from '../contract_interactions'; +import { useAction } from '../hooks/useAction'; import { useBaseAssetId } from '../hooks/useBaseAssetId'; import { calculateAssetId } from '../utils'; export const ForwardHalfCustomAssetCard = () => { const [amount, setAmount] = useState(''); 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 (assetId && wallet.wallet && amount) { + await depositHalf({ + wallet: wallet.wallet!, + amount: bn.parseUnits(amount, 1).div(10), + assetId, + }); + } + }, + }); const assetId = !!baseAssetId && calculateAssetId(MAIN_CONTRACT_ID, baseAssetId); @@ -28,21 +41,10 @@ export const ForwardHalfCustomAssetCard = () => { value={amount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/components/Header.tsx b/packages/e2e-contract-tests/src/components/Header.tsx index 485ad95e0d..f6b597f571 100644 --- a/packages/e2e-contract-tests/src/components/Header.tsx +++ b/packages/e2e-contract-tests/src/components/Header.tsx @@ -1,11 +1,14 @@ import { useConnectUI } from '@fuels/react'; export const Header = () => { - const { connect } = useConnectUI(); + const { connect, isConnected } = useConnectUI(); return ( - + <> + +

Status: {isConnected ? 'Connected' : 'Disconnected'}

+ ); }; diff --git a/packages/e2e-contract-tests/src/components/MintAssetCard.tsx b/packages/e2e-contract-tests/src/components/MintAssetCard.tsx index 14087fab06..090bee8b12 100644 --- a/packages/e2e-contract-tests/src/components/MintAssetCard.tsx +++ b/packages/e2e-contract-tests/src/components/MintAssetCard.tsx @@ -3,14 +3,26 @@ import { bn } from 'fuels'; import { useState } from 'react'; import { mint } from '../contract_interactions'; +import { useAction } from '../hooks/useAction'; import { useBaseAssetId } from '../hooks/useBaseAssetId'; export const MintAssetCard = () => { const [amount, setAmount] = useState(''); 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 () => { + await mint({ + wallet: wallet!, + amount: bn.parseUnits(amount, 1).div(10), + subId: baseAssetId, + }); + }, + }); + return (

Mint Custom Asset

@@ -24,21 +36,10 @@ export const MintAssetCard = () => { value={amount} />
- + {error &&

{error}

}
diff --git a/packages/e2e-contract-tests/src/hooks/useAction.ts b/packages/e2e-contract-tests/src/hooks/useAction.ts new file mode 100644 index 0000000000..1985bfcf54 --- /dev/null +++ b/packages/e2e-contract-tests/src/hooks/useAction.ts @@ -0,0 +1,32 @@ +import { useCallback, useState } from 'react'; + +type UseActionParams = { + isValid: boolean; + action: () => Promise; +}; + +export const useAction = ({ isValid, action }: UseActionParams) => { + const [error, setError] = useState(null); + const [isExecuting, setIsExecuting] = useState(false); + + const execute = useCallback(async () => { + if (!isValid) return; + setIsExecuting(true); + setError(null); + try { + await action(); + } catch (err) { + setError( + (err as Error | undefined)?.message || 'An unexpected error occurred.' + ); + } finally { + setIsExecuting(false); + } + }, [isValid, action]); + + return { + disabled: !isValid || isExecuting, + execute, + error, + }; +};