test: WalletConnect tests FE-443 (#427)

.github/workflows/pr-tests.yml

@@ -112,29 +112,22 @@ jobs:
           forc --version
           fuel-core --version
 
-      # Check the directory structure before deployment
-      - name: Debug Paths Before Deployment
-        run: |
-          echo "Checking paths before deployment"
-          ls -la e2e-tests/runner/src
-          ls -la examples/react-app/src/types/
-
       - name: Build & Deploy Contracts
         run: pnpm deploy:contracts:ci
         working-directory: e2e-tests/runner/scripts
 
-      # Check the directory structure after deployment
-      - name: Debug Paths After Deployment
-        run: |
-          echo "Checking paths after deployment"
-          ls -la e2e-tests/runner/src/contracts/
-          ls -la examples/react-app/src/types/
-      
-      # E2E tests running with Playwright
+      - name: Build & Deploy EVM Predicates
+        run: pnpm fuels build && pnpm fuels deploy
+        working-directory: packages/evm-predicates
+
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps chromium
         working-directory: e2e-tests/runner
 
+      - name: Build Synpress cache
+        run: xvfb-run pnpm synpress wallet-setup
+        working-directory: e2e-tests/runner
+
       - name: Run Playwright tests locally for Preview
         if: ${{ github.event_name == 'pull_request' }}
         run: xvfb-run --auto-servernum -- pnpm --filter @e2e-tests/runner test:e2e

.gitignore

@@ -36,5 +36,8 @@ yarn-error.log*
 e2e-tests/runner/playwright-report/
 e2e-tests/runner/blob-report/
 e2e-tests/runner/test-results/
+e2e-tests/runner/.cache-synpress/
 e2e-tests/runner/src/contracts/
 e2e-tests/runner/src/contracts/contract-ids.json
+/packages/evm-predicates/src/generated
+/packages/evm-predicates/predicate/out

e2e-tests/runner/common/common.ts

@@ -4,7 +4,8 @@ import type { ApproveTransferFunction, ConnectorFunctions } from './types';
 
 // biome-ignore lint/suspicious/noExportsInTest: <explanation>
 export const skipBridgeFunds = async (page: Page) => {
-  if (await page.isVisible('text=Bridge Funds')) {
+  await page.waitForTimeout(1000);
+  if (await page.isVisible('text=Bridge Funds', { timeout: 2000 })) {
     await page.click('text=Continue to application');
   }
 };

e2e-tests/runner/examples/connectors/WalletConnectConnector/WalletConnectConnector.test.ts

@@ -0,0 +1,68 @@
+import { getButtonByText, getByAriaLabel } from '@fuels/playwright-utils';
+import { testWithSynpress } from '@synthetixio/synpress';
+import { MetaMask, metaMaskFixtures } from '@synthetixio/synpress/playwright';
+import { sessionTests, transferTests } from '../../../common/common';
+import type { ConnectorFunctions } from '../../../common/types';
+import basicSetup from '../../../wallet-setup/basic.setup';
+import { fundWallet } from '../setup';
+
+const test = testWithSynpress(metaMaskFixtures(basicSetup));
+
+test.describe('WalletConnectConnector', () => {
+  let metamask: MetaMask;
+
+  test.beforeEach(async ({ context, extensionId, metamaskPage, page }) => {
+    metamask = new MetaMask(
+      context,
+      metamaskPage,
+      basicSetup.walletPassword,
+      extensionId,
+    );
+    await page.goto('/', { waitUntil: 'domcontentloaded' });
+  });
+
+  const connect: ConnectorFunctions['connect'] = async (page) => {
+    await page.goto('/');
+    const connectButton = getButtonByText(page, 'Connect Wallet', true);
+    await connectButton.click();
+    await getByAriaLabel(page, 'Connect to Ethereum Wallets', true).click();
+
+    await page.getByText('Proceed anyway').click();
+    await getButtonByText(page, 'MetaMask', true).click();
+
+    await metamask.connectToDapp();
+    // wait 3 seconds for the connection to be established
+    await page.waitForTimeout(3000);
+
+    await metamask.confirmSignature();
+  };
+
+  const approveTransfer: ConnectorFunctions['approveTransfer'] = async () => {
+    await metamask.confirmTransaction();
+  };
+
+  test('Fuel tests', async ({ page }) => {
+    await sessionTests(page, { connect, approveTransfer });
+
+    await connect(page);
+
+    const addressElement = await page.locator('#address');
+    let address: string | null = null;
+    if (addressElement) {
+      address = await addressElement.getAttribute('data-address');
+    }
+
+    if (address) {
+      await fundWallet({ publicKey: address });
+    } else {
+      throw new Error('Address is null');
+    }
+
+    await page.click('text=Disconnect');
+    await page.waitForSelector('text=/Connect Wallet/');
+
+    await transferTests(page, { connect, approveTransfer });
+
+    // await incrementTests(page, { connect, approveTransfer });
+  });
+});

e2e-tests/runner/examples/connectors/setup.ts

@@ -66,6 +66,21 @@ export const testSetup = async ({
   return { fuelWallet, fuelWalletTestHelper, masterWallet };
 };
 
+export const fundWallet = async ({ publicKey }: { publicKey: string }) => {
+  const fuelProvider = await Provider.create(VITE_FUEL_PROVIDER_URL);
+  const masterWallet = Wallet.fromMnemonic(VITE_MASTER_WALLET_MNEMONIC);
+  masterWallet.connect(fuelProvider);
+
+  const txResponse = await masterWallet.transfer(
+    publicKey,
+    bn.parseUnits('0.1'),
+  );
+
+  await txResponse.waitForResult();
+
+  return true;
+};
+
 export const transferMaxBalance = async ({
   fromWallet,
   toWallet,

e2e-tests/runner/package.json

@@ -21,7 +21,9 @@
   "devDependencies": {
     "@fuels/connectors": "workspace:*",
     "@fuels/playwright-utils": "0.41.1",
-    "@playwright/test": "1.48.1",
+    "@playwright/test": "1.48.2",
+    "@synthetixio/synpress": "4.0.3",
+    "@synthetixio/synpress-cache": "0.0.4",
     "dotenv": "16.4.5",
     "fuels": "0.96.1"
   },

e2e-tests/runner/playwright.config.ts

@@ -3,6 +3,8 @@ import {
   defineConfig,
   devices,
 } from '@playwright/test';
+import { synpressFixtures } from '@synthetixio/synpress';
+
 import dotenv from 'dotenv';
 dotenv.config();
 

e2e-tests/runner/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "strict": true
+  }
+}

e2e-tests/runner/wallet-setup/basic.setup.ts

@@ -0,0 +1,12 @@
+import { defineWalletSetup } from '@synthetixio/synpress';
+import { MetaMask } from '@synthetixio/synpress/playwright';
+
+const SEED_PHRASE =
+  'test test test test test test test test test test test junk';
+const PASSWORD = 'SynpressIsAwesomeNow!!!';
+
+export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+  const metamask = new MetaMask(context, walletPage, PASSWORD);
+
+  await metamask.importWallet(SEED_PHRASE);
+});

examples/react-app/src/components/account.tsx

@@ -40,6 +40,8 @@ export default function ConnectedAccount({ isSigning }: Props) {
         <div
           className="flex items-center space-between"
           style={{ gap: '10px' }}
+          id="address"
+          data-address={account}
         >
           <code className="block md:hidden">
             {truncAddressMiddle(account, 4)}

package.json

@@ -57,5 +57,8 @@
       "fast-xml-parser@<4.4.1": ">=4.4.1"
     }
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@synthetixio/synpress": "4.0.3"
+  }
 }

packages/evm-predicates/fuels.config.ts

@@ -1,10 +1,11 @@
 import { createConfig } from 'fuels';
 
 export default createConfig({
-  providerUrl: 'https://testnet.fuel.network/v1/graphql',
+  providerUrl: 'http://localhost:4000/v1/graphql',
   predicates: ['./predicate'],
   output: './src/generated/tmp',
   forcBuildFlags: ['--release'],
   // needs the private key to deploy the predicate
-  privateKey: '0x',
+  privateKey:
+    '0xa449b1ffee0e2205fa924c6740cc48b3b473aa28587df6dab12abc245d1f5298', // genesis private key
 });