feat(e2e-connector-tests): unify connector tests FE-860

.github/workflows/pr-tests.yml

@@ -112,7 +112,7 @@ jobs:
 
       - name: Run Playwright tests locally for Preview
         if: ${{ github.event_name == 'pull_request' }}
-        run: xvfb-run --auto-servernum -- pnpm --filter e2e-tests test:e2e
+        run: xvfb-run --auto-servernum -- pnpm --filter @e2e-tests/runner test:e2e
         env:
           VITE_FUEL_PROVIDER_URL: "http://localhost:4000/v1/graphql"
           NEXT_PUBLIC_PROVIDER_URL: "http://localhost:4000/v1/graphql"

.gitignore

@@ -32,4 +32,7 @@ yarn-error.log*
 .env
 !docker/.env
 /e2e-tests/test-results
-**/*.tgz
+**/*.tgz
+e2e-tests/runner/playwright-report/
+e2e-tests/runner/blob-report/
+e2e-tests/runner/test-results/

e2e-tests/runner/.env.example

@@ -1,5 +1,18 @@
-REACT_APP_PORT=
-REACT_NEXT_PORT=
-VITE_FUEL_PROVIDER_URL="https://testnet.fuel.network/v1/graphql"
-VITE_WALLET_SECRET= # leave it empty to skip seed wallet
-VITE_MASTER_WALLET_MNEMONIC=
+# URLs for the provider
+VITE_FUEL_PROVIDER_URL="http://localhost:4000/v1/graphql"
+NEXT_PUBLIC_PROVIDER_URL="http://localhost:4000/v1/graphql"
+
+# Project and chain configuration
+NEXT_PUBLIC_WC_PROJECT_ID="your_wc_project_id"
+NEXT_PUBLIC_CHAIN_ID_NAME="testnet"
+VITE_APP_WC_PROJECT_ID="your_wc_project_id"
+VITE_CHAIN_ID_NAME="local"
+
+# Wallet configuration
+VITE_WALLET_SECRET="your_wallet_secret"
+VITE_MASTER_WALLET_MNEMONIC="your_wallet_mnemonic"
+
+# Port settings
+REACT_APP_PORT=5173
+REACT_NEXT_PORT=3002
+PORT=5173

e2e-tests/runner/common/common.ts

@@ -0,0 +1,76 @@
+import { test } from '@fuels/playwright-utils';
+import { type Page, expect } from '@playwright/test';
+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.click('text=Continue to application');
+  }
+};
+
+// biome-ignore lint/suspicious/noExportsInTest: <explanation>
+export const sessionTests = async (
+  page: Page,
+  { connect }: ConnectorFunctions,
+) => {
+  await connect(page);
+
+  await test.step('should connect, disconnect, and reconnect', async () => {
+    await skipBridgeFunds(page);
+
+    await page.click('text=Disconnect');
+    await page.waitForSelector('text=/Connect Wallet/');
+
+    await connect(page);
+    await skipBridgeFunds(page);
+
+    expect(await page.waitForSelector('text=/Your Fuel Address/')).toBeTruthy();
+  });
+
+  await test.step('should connect, refresh and stay connected', async () => {
+    await page.reload();
+    await skipBridgeFunds(page);
+    await page.waitForSelector('text=/Your Fuel Address/');
+  });
+
+  await test.step('should connect, disconnect, refresh and stay disconnected', async () => {
+    await skipBridgeFunds(page);
+    await page.click('text=Disconnect');
+    await page.waitForSelector('text=/Connect Wallet/');
+
+    await page.reload();
+    await page.waitForSelector('text=/Connect Wallet/');
+  });
+};
+
+// biome-ignore lint/suspicious/noExportsInTest: <explanation>
+export const transferTests = async (
+  page: Page,
+  { connect, approveTransfer }: ConnectorFunctions,
+) => {
+  await connect(page);
+
+  await page.click('text=Transfer 0.0001 ETH');
+  await approveTransfer(page);
+
+  expect(
+    await page.waitForSelector('text=Transferred successfully!'),
+  ).toBeTruthy();
+};
+
+// biome-ignore lint/suspicious/noExportsInTest: <explanation>
+export const incrementTests = async (
+  page: Page,
+  { approveTransfer }: ConnectorFunctions,
+) => {
+  await test.step('should connect and increment', async () => {
+    await page.click('text=Increment');
+    await approveTransfer(page);
+
+    expect(await page.waitForSelector('text=Success')).toBeTruthy();
+    expect(
+      await page.waitForSelector('text=Counter Incremented!'),
+    ).toBeTruthy();
+  });
+};

e2e-tests/runner/common/types.ts

@@ -0,0 +1,14 @@
+// types.ts
+import type { Page } from '@playwright/test';
+
+export type ConnectFunction = (page: Page) => Promise<void>;
+export type ApproveTransferFunction = (page: Page) => Promise<void>;
+
+/**
+ * Connector interface, where each wallet connector implements
+ * its own connect and approveTransfer functions.
+ */
+export interface ConnectorFunctions {
+  connect: ConnectFunction;
+  approveTransfer: ApproveTransferFunction;
+}

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

@@ -1,19 +1,17 @@
 import { getButtonByText, getByAriaLabel, test } from '@fuels/playwright-utils';
 import { type Page, expect } from '@playwright/test';
+import { sessionTests, skipBridgeFunds } from '../../../common/common';
+import type { ConnectFunction } from '../../../common/types';
 
-const connectBurner = async (page: Page, walletName = 'Burner Wallet') => {
+const connect: ConnectFunction = async (page: Page) => {
   await page.bringToFront();
   const connectButton = getButtonByText(page, 'Connect');
   await connectButton.click();
-  await getByAriaLabel(page, `Connect to ${walletName}`, true).click();
+  await getByAriaLabel(page, 'Connect to Burner Wallet', true).click();
 
   await skipBridgeFunds(page);
-};
 
-const skipBridgeFunds = async (page: Page) => {
-  if (await page.isVisible('text=Bridge Funds')) {
-    await page.click('text=Continue to application');
-  }
+  expect(await page.waitForSelector('text=/Your Fuel Address/')).toBeTruthy();
 };
 
 test.describe('BurnerWalletConnector', async () => {
@@ -23,33 +21,6 @@ test.describe('BurnerWalletConnector', async () => {
   });
 
   test('BurnerWallet Tests', async ({ page }) => {
-    await connectBurner(page);
-
-    expect(await page.waitForSelector('text=/Your Fuel Address/')).toBeTruthy();
-
-    await test.step('should connect, disconnect, and reconnect', async () => {
-      await page.click('text=Disconnect');
-      await page.waitForSelector('text=/Connect Wallet/');
-
-      await connectBurner(page);
-      expect(
-        await page.waitForSelector('text=/Your Fuel Address/'),
-      ).toBeTruthy();
-    });
-
-    await test.step('should connect, refresh and stay connected', async () => {
-      await page.reload();
-      await skipBridgeFunds(page);
-      await page.waitForSelector('text=/Your Fuel Address/');
-    });
-
-    await test.step('should connect, disconnect, refresh and stay disconnected', async () => {
-      await skipBridgeFunds(page);
-      await page.click('text=Disconnect');
-      await page.waitForSelector('text=/Connect Wallet/');
-
-      await page.reload();
-      await page.waitForSelector('text=/Connect Wallet/');
-    });
+    await sessionTests(page, { connect, approveTransfer: async () => {} });
   });
 });

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

@@ -5,23 +5,14 @@ import {
 } from '@fuels/playwright-utils';
 import type { FuelWalletTestHelper } from '@fuels/playwright-utils';
 import { test } from '@fuels/playwright-utils';
-import { type Page, expect } from '@playwright/test';
 import dotenv from 'dotenv';
 import { type WalletUnlocked, bn } from 'fuels';
+import { sessionTests, transferTests } from '../../../common/common';
+import type { ConnectorFunctions } from '../../../common/types';
 import { testSetup, transferMaxBalance } from '../setup';
 dotenv.config();
 
-const connect = async (
-  page: Page,
-  fuelWalletTestHelper: FuelWalletTestHelper,
-) => {
-  const connectButton = getButtonByText(page, 'Connect');
-  await connectButton.click();
-  await getByAriaLabel(page, 'Connect to Fuel Wallet', true).click();
-  await fuelWalletTestHelper.walletConnect();
-};
-
-const fuelPathToExtension = await downloadFuel('0.40.1');
+const fuelPathToExtension = await downloadFuel('0.41.1');
 
 test.use({
   pathToExtension: fuelPathToExtension,
@@ -34,6 +25,17 @@ test.describe('FuelWalletConnector', () => {
 
   const depositAmount = '0.0003'; // Should be enough to cover the increment and transfer
 
+  const connect: ConnectorFunctions['connect'] = async (page) => {
+    const connectButton = getButtonByText(page, 'Connect Wallet', true);
+    await connectButton.click();
+    await getByAriaLabel(page, 'Connect to Fuel Wallet', true).click();
+    await fuelWalletTestHelper.walletConnect();
+  };
+
+  const approveTransfer: ConnectorFunctions['approveTransfer'] = async () => {
+    await fuelWalletTestHelper.walletApprove();
+  };
+
   test.beforeEach(async ({ context, extensionId, page }) => {
     ({ fuelWalletTestHelper, fuelWallet, masterWallet } = await testSetup({
       context,
@@ -43,7 +45,6 @@ test.describe('FuelWalletConnector', () => {
     }));
 
     await page.goto('/');
-    await connect(page, fuelWalletTestHelper);
   });
 
   test.afterEach(async () => {
@@ -63,48 +64,8 @@ test.describe('FuelWalletConnector', () => {
       await switchButton.click();
     }
 
-    expect(await page.waitForSelector('text=Your Fuel Address')).toBeTruthy();
-
-    // await test.step('should connect and increment', async () => {
-    //   await page.click('text=Increment');
-    //   await fuelWalletTestHelper.walletApprove();
-
-    //   expect(await page.waitForSelector('text=Success')).toBeTruthy();
-    //   expect(
-    //     await page.waitForSelector('text=Counter Incremented!'),
-    //   ).toBeTruthy();
-    // });
-
-    await test.step('should connect and transfer', async () => {
-      await page.click('text=Transfer 0.0001 ETH');
-      await fuelWalletTestHelper.walletApprove();
-
-      expect(await page.waitForSelector('text=Success')).toBeTruthy();
-      expect(
-        await page.waitForSelector('text=Transferred successfully!'),
-      ).toBeTruthy();
-    });
-
-    await test.step('should connect, disconnect, and reconnect', async () => {
-      await page.click('text=Disconnect');
-      await page.waitForSelector('text=Connect Wallet');
-
-      await connect(page, fuelWalletTestHelper);
-
-      expect(await page.waitForSelector('text=Your Fuel Address')).toBeTruthy();
-    });
-
-    await test.step('should connect, refresh and stay connected', async () => {
-      await page.reload();
-      await page.waitForSelector('text=Your Fuel Address');
-    });
-
-    await test.step('should connect, disconnect, refresh and stay disconnected', async () => {
-      await page.click('text=Disconnect');
-      await page.waitForSelector('text=Connect Wallet');
+    await sessionTests(page, { connect, approveTransfer });
 
-      await page.reload();
-      await page.waitForSelector('text=Connect Wallet');
-    });
+    await transferTests(page, { connect, approveTransfer });
   });
 });

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

@@ -49,13 +49,16 @@ export const testSetup = async ({
   );
   await txResponse.waitForResult();
 
-  const fuelWalletTestHelper = await FuelWalletTestHelper.walletSetup(
+  const fuelWalletTestHelper = await FuelWalletTestHelper.walletSetup({
     context,
-    extensionId,
-    fuelProvider.url,
+    fuelExtensionId: extensionId,
+    fuelProvider: {
+      url: fuelProvider.url,
+      chainId: fuelProvider.getChainId(),
+    },
     chainName,
-    randomMnemonic,
-  );
+    mnemonic: randomMnemonic,
+  });
 
   await page.goto('/');
   await page.bringToFront();

e2e-tests/runner/package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@fuels/connectors": "workspace:*",
-    "@fuels/playwright-utils": "0.40.1",
+    "@fuels/playwright-utils": "0.41.1",
     "@playwright/test": "1.48.1",
     "dotenv": "16.4.5",
     "fuels": "0.96.1"