feat: add e2e tests to CI

.github/workflows/pr-tests.yml

@@ -0,0 +1,55 @@
+name: Tests
+
+on:
+  pull_request:
+    branches: [main, master]
+    types: [opened, synchronize, reopened]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  tests-e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Create .env file graphql
+        run: cp packages/graphql/.env.example packages/graphql/.env
+
+      - name: Create .env file explorer
+        run: cp packages/app-explorer/.env.example packages/app-explorer/.env
+
+      - name: Setup Node
+        uses: FuelLabs/github-actions/setups/node@master
+        with:
+          node-version: 18.19.0
+
+      - name: Setup Docker
+        uses: FuelLabs/github-actions/setups/docker@master
+        with:
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Start Test Node
+        run: pnpm node:start
+
+      # E2E tests running with Playwright
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run E2E Tests
+        run: xvfb-run --auto-servernum -- pnpm test:e2e
+
+      - uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: playwright-report
+          path: packages/e2e-tests/playwright-report/
+          retention-days: 30
+
+      - name: Stop Test Node
+        run: pnpm node:stop

packages/app-commons/src/config.ts

@@ -13,8 +13,7 @@ export const NODE_ENV = process.env.NODE_ENV;
 export const BLOCK_EXPLORER_URL = process.env.NEXT_PUBLIC_BLOCK_EXPLORER_URL;
 
 export const IS_PREVIEW = process.env.NEXT_PUBLIC_IS_PUBLIC_PREVIEW === 'true';
-export const IS_DEVELOPMENT = process.env.DEV;
-export const IS_TEST = process.env.MODE === 'test';
+export const IS_DEVELOPMENT = process.env.NODE_ENV === 'development';
 
 const ethChainName = ETH_CHAIN_NAME?.toLowerCase();
 export const IS_ETH_DEV_CHAIN = ethChainName && ethChainName === 'foundry';

packages/app-explorer/.env.example

@@ -2,8 +2,8 @@
 NEXT_PUBLIC_ALCHEMY_ID=
 NEXT_PUBLIC_INFURA_ID=
 NEXT_PUBLIC_WALLETCONNECT_ID=
-NEXT_PUBLIC_ETH_CHAIN_NAME=sepolia # options: foundry, sepolia
-NEXT_PUBLIC_FUEL_CHAIN_NAME=fuelBeta5 # options: fuelDev, fuelBeta5Dev, fuelBeta5
+NEXT_PUBLIC_ETH_CHAIN_NAME=foundry # options: foundry, sepolia
+NEXT_PUBLIC_FUEL_CHAIN_NAME=fuelDev # options: fuelDev, fuelBeta5Dev, fuelBeta5
 NEXT_PUBLIC_FUEL_VERSION=0.22.0
 NEXT_PUBLIC_IS_PUBLIC_PREVIEW=true
 NEXT_PUBLIC_WALLET_INSTALL=https://chrome.google.com/webstore/detail/fuel-wallet/dldjpboieedgcmpkchcjcbijingjcgok

packages/app-portal/package.json

@@ -6,6 +6,7 @@
   "types": "./src/index.ts",
   "scripts": {
     "ts:check": "pnpm xstate:typegen && tsc --noEmit",
+    "build": "pnpm ts:check",
     "xstate:typegen": "xstate typegen 'src/**/*.ts?(x)'"
   },
   "peerDependencies": {

packages/app-portal/src/systems/Settings/providers/ConnectProvider.tsx

@@ -42,19 +42,25 @@ const transports = {
       ),
 };
 
-export const config = createConfig({
-  chains: chainsToConnect as any,
-  connectors: [
-    injected({
-      shimDisconnect: true,
-      target: 'metaMask',
-    }),
-    coinbaseWallet({ appName: app.name, headlessMode: true }),
+const connectors: any = [
+  injected({
+    shimDisconnect: true,
+    target: 'metaMask',
+  }),
+  coinbaseWallet({ appName: app.name, headlessMode: true }),
+];
+if (WALLETCONNECT_ID) {
+  connectors.push(
     walletConnect({
       projectId: WALLETCONNECT_ID,
       showQrModal: false,
     }),
-  ],
+  );
+}
+
+export const config = createConfig({
+  chains: chainsToConnect as any,
+  connectors,
   transports,
   ssr: true,
 });

packages/e2e-tests/bridge/AssetList.test.ts

@@ -12,11 +12,10 @@ import { connectToMetamask } from './utils/wallets';
 test.describe('Asset List', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/bridge');
-
     await connectToMetamask(page);
   });
 
-  test('e2e asset list', async ({ page }) => {
+  test('e2e asset list', async ({ page, context }) => {
     await test.step('Check if ETH is in the dropdown', async () => {
       await hasDropdownSymbol(page, 'ETH');
     });
@@ -99,5 +98,7 @@ test.describe('Asset List', () => {
 
       await hasDropdownSymbol(page, 'TKN');
     });
+
+    await context.close();
   });
 });

packages/e2e-tests/bridge/fixtures/index.ts

@@ -50,7 +50,6 @@ export const test = base.extend<{
     });
     // Set context to playwright
     await use(context);
-    //await context.close();
   },
   extensionId: async ({ context }, use) => {
     let [background] = context.serviceWorkers();

packages/e2e-tests/bridge/utils/wallets.ts

@@ -15,7 +15,6 @@ const PROVIDER_URL = 'http://localhost:4000/graphql';
 
 export const connectToMetamask = async (page: Page) => {
   await page.bringToFront();
-
   const connectKitButton = getByAriaLabel(page, 'Connect Ethereum Wallet');
   await connectKitButton.click();
   const metamaskConnect = getButtonByText(page, 'Metamask');

packages/e2e-tests/playwright.config.ts

@@ -17,15 +17,16 @@ const config: PlaywrightTestConfig = defineConfig({
   // Fail the build on CI if left test.only in the source code
   forbidOnly: !!process.env.CI,
   // Retry tests on CI if they fail
-  retries: IS_CI ? 2 : 0,
+  retries: IS_CI ? 0 : 0,
+  // retries: IS_CI ? 2 : 0,
   webServer: {
     command: 'pnpm dev',
-    url: `http://localhost:${PORT}`,
+    port: Number(PORT),
     reuseExistingServer: true,
     cwd: join(__dirname, '../../'),
   },
   use: {
-    baseURL: `http://localhost:${PORT}/`,
+    baseURL: `http://127.0.0.1:${PORT}/`,
     permissions: ['clipboard-read', 'clipboard-write'],
     trace: 'on-first-retry',
     headless: false,