feat: isolate lock wallet test (#1431)

- Closes #1433

.changeset/pink-mirrors-smell.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+feat: run e2e test of Lock CRX isolated and remove from regular flow to increase its speed

.github/workflows/pr-tests.yml

@@ -94,7 +94,53 @@ jobs:
 
       - name: Stop Test Node
         run: pnpm node:clean
-
+
+  tests-e2e-crx-lock:
+    name: E2E Tests - Lock CRX
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    steps:
+      - uses: actions/checkout@v3
+      - uses: FuelLabs/github-actions/setups/node@master
+        with:
+          node-version: 18.18.0
+          pnpm-version: 8.15.7
+      - uses: FuelLabs/github-actions/setups/docker@master
+        with:
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Start Test Node
+        run: pnpm node:up
+
+      - name: Generate .env
+        run: cp packages/app/.env.example packages/app/.env
+
+      - name: Build Application
+        run: pnpm build:app
+        env:
+          ## increase node.js m memory limit for building
+          ## with sourcemaps
+          NODE_OPTIONS: "--max-old-space-size=4096"
+
+      # E2E tests running with Playwright
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run E2E Tests
+        run: xvfb-run --auto-servernum -- pnpm test:e2e:crx-lock
+        env:
+          NODE_ENV: test
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-app-report
+          path: packages/app/playwright-results
+          retention-days: 30
+
+      - name: Stop Test Node
+        run: pnpm node:clean
+
   tests-e2e-contracts:
     name: E2E Contract Tests - Local
     runs-on: buildjet-4vcpu-ubuntu-2204

package.json

@@ -51,6 +51,7 @@
     "test:clear": "pnpm -r exec jest --clearCache",
     "test:coverage": "turbo run test --parallel -- --coverage",
     "test:e2e": "NODE_ENV=test pnpm build:crx && playwright test --config=packages/app/playwright.config.ts",
+    "test:e2e:crx-lock": "NODE_ENV=test pnpm build:crx && playwright test --config=packages/app/playwright.crx-lock.config.ts",
     "test:e2e:contracts": "NODE_ENV=test pnpm build:crx && pnpm --filter=@fuel-wallet/e2e-contract-tests test:e2e",
     "test:appfile": "pnpm --filter=fuels-wallet test --",
     "ts:check": "turbo run ts:check",

packages/app/playwright.config.ts

@@ -1,11 +1,11 @@
 // biome-ignore lint/style/useNodejsImportProtocol: <explanation>
 import { join } from 'path';
-import { defineConfig } from '@playwright/test';
+import { type PlaywrightTestConfig, defineConfig } from '@playwright/test';
 import './load.envs';
 
 const PORT = process.env.PORT;
 
-export default defineConfig({
+export const playwrightConfig: PlaywrightTestConfig = {
   workers: 1,
   testMatch: join(__dirname, './playwright/**/*.test.ts'),
   testDir: join(__dirname, './playwright/'),
@@ -27,4 +27,8 @@ export default defineConfig({
     trace: 'on-first-retry',
     actionTimeout: 5000,
   },
-});
+  // ignore lock test because it takes too long and it will be tested in a separate config
+  testIgnore: [join(__dirname, './playwright/crx/lock.test.ts')],
+};
+
+export default defineConfig(playwrightConfig);

packages/app/playwright.crx-lock.config.ts

@@ -0,0 +1,10 @@
+// biome-ignore lint/style/useNodejsImportProtocol: <explanation>
+import { join } from 'path';
+import { defineConfig } from '@playwright/test';
+import { playwrightConfig } from './playwright.config';
+
+export default defineConfig({
+  ...playwrightConfig,
+  testMatch: join(__dirname, './playwright/crx/lock.test.ts'),
+  testIgnore: undefined,
+});

packages/app/playwright/crx/crx.test.ts

@@ -34,6 +34,12 @@ const WALLET_PASSWORD = 'Qwe123456$';
 
 const isLocalNetwork = process.env.VITE_FUEL_PROVIDER_URL.includes('localhost');
 
+// Increase timeout for this test
+// The timeout is set for 3 minutes
+// because some tests like reconnect
+// can take up to 1 minute before it's reconnected
+test.setTimeout(240_000);
+
 test.describe('FuelWallet Extension', () => {
   test('If user opens popup it should force open a sign-up page', async ({
     context,
@@ -657,17 +663,5 @@ test.describe('FuelWallet Extension', () => {
       const currentAccountEventResult = await onChangeAccountPromise;
       expect(currentAccountEventResult).toEqual(null);
     });
-
-    await test.step('Auto lock fuel wallet', async () => {
-      await getByAriaLabel(popupPage, 'Accounts').click();
-      await popupPage.waitForTimeout(65000);
-      await hasText(popupPage, 'Unlock your wallet to continue');
-    });
   });
 });
-
-// Increase timeout for this test
-// The timeout is set for 3 minutes
-// because some tests like reconnect
-// can take up to 1 minute before it's reconnected
-test.setTimeout(240_000);

packages/app/playwright/crx/lock.test.ts

@@ -0,0 +1,98 @@
+import { expect } from '@playwright/test';
+
+import {
+  getButtonByText,
+  getByAriaLabel,
+  getElementByText,
+  hasText,
+  reload,
+} from '../commons';
+import { WALLET_PASSWORD } from '../mocks';
+
+import { test } from './utils';
+
+// Increase timeout for this test
+// The timeout is set for 2 minutes
+// because some tests like reconnect
+// can take up to 1 minute before it's reconnected
+test.setTimeout(180_000);
+
+test.describe('Lock FuelWallet after inactivity', () => {
+  test('should lock the wallet after 1 minute of inactivity (config in .env file)', async ({
+    context,
+    baseURL,
+    extensionId,
+  }) => {
+    // Use a single instance of the page to avoid
+    // multiple waiting times, and window.fuel checking.
+    const blankPage = await context.newPage();
+
+    // Open a blank html in order for the CRX
+    // to inject fuel on the window. This is required
+    // because the CRX is injected after load state of
+    // the page.
+    await blankPage.goto(new URL('e2e.html', baseURL).href);
+
+    await test.step('Has window.fuel', async () => {
+      const hasFuel = await blankPage.evaluate(async () => {
+        // wait for the script to load
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        return typeof window.fuel === 'object';
+      });
+      expect(hasFuel).toBeTruthy();
+    });
+
+    await test.step('Create wallet', async () => {
+      const pages = context.pages();
+      const [page] = pages.filter((page) => page.url().includes('sign-up'));
+      await reload(page);
+      await getElementByText(page, /Create new wallet/i).click();
+
+      /** Accept terms */
+      await hasText(page, /Terms of use Agreement/i);
+      const agreeCheckbox = getByAriaLabel(page, 'Agree with terms');
+      await agreeCheckbox.click();
+      await getButtonByText(page, /Next: Seed Phrase/i).click();
+
+      /** Copy Mnemonic */
+      await hasText(page, /Write down seed phrase/i);
+      await getButtonByText(page, /Copy/i).click();
+      const savedCheckbox = getByAriaLabel(page, 'Confirm Saved');
+      await savedCheckbox.click();
+      await getButtonByText(page, /Next/i).click();
+
+      /** Confirm Mnemonic */
+      await hasText(page, /Confirm phrase/i);
+      await getButtonByText(page, /Paste/i).click();
+      await getButtonByText(page, /Next/i).click();
+
+      /** Adding password */
+      await hasText(page, /Create password for encryption/i);
+      const passwordInput = getByAriaLabel(page, 'Your Password');
+      await passwordInput.fill(WALLET_PASSWORD);
+      await passwordInput.press('Tab');
+      const confirmPasswordInput = getByAriaLabel(page, 'Confirm Password');
+      await confirmPasswordInput.fill(WALLET_PASSWORD);
+      await confirmPasswordInput.press('Tab');
+
+      await getButtonByText(page, /Next/i).click();
+
+      /** Account created */
+      await hasText(page, /Wallet created successfully/i, 0, 15000);
+      await page.close();
+    });
+
+    const popupPage = await test.step('Open wallet', async () => {
+      const page = await context.newPage();
+      await page.goto(`chrome-extension://${extensionId}/popup.html`);
+      await hasText(page, /Assets/i);
+      return page;
+    });
+
+    await test.step('Auto lock fuel wallet', async () => {
+      await getByAriaLabel(popupPage, 'Accounts').click();
+      await popupPage.waitForTimeout(65_000);
+      await hasText(popupPage, 'Unlock your wallet to continue');
+    });
+  });
+});