Add some mocking to make UI behaviour easier to control.

.github/workflows/e2e-tests.yaml

@@ -7,6 +7,10 @@ jobs:
     name: E2E - Tools
     runs-on: ubuntu-latest
     timeout-minutes: 10
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
     steps:
       - uses: actions/checkout@v4
         with:

packages/apps/tools/package.json

@@ -19,7 +19,7 @@
     "lint:src": "eslint src --ext .ts,.tsx",
     "start": "next start",
     "test": "jest --silent",
-    "test:e2e": "npx playwright test"
+    "test:e2e": "npx playwright test --ui"
   },
   "dependencies": {
     "@hookform/resolvers": "~3.1.1",

packages/apps/tools/playwright.config.ts

@@ -4,7 +4,14 @@ import { defineConfig } from "@playwright/test";
 export default defineConfig({
   ...defaultConfig,
   use: {
+    baseURL: "https://tools.kadena.io",
     ...defaultConfig.use,
     trace: 'retain-on-failure'
+  },
+  webServer: {
+    ...defaultConfig.webServer
+  },
+  expect: {
+    ...defaultConfig.expect
   }
 });

packages/apps/tools/tests/example.spec.ts

@@ -0,0 +1,21 @@
+import { test } from './page-objects';
+import {expect} from '@playwright/test'
+import {accountsData} from './fixtures/data/accounts';
+import { send } from './fixtures/mocks/send'
+import { pollFinished, pollInProgress } from './fixtures/mocks/poll';
+
+test('Fund account using the faucet @mocks', async ({ page, home, faucet , mockHelper}) => {
+
+  await page.goto('/');
+  await home.header.setNetwork("Testnet")
+  await home.header.goTo('Faucet')
+
+  await mockHelper.mockResponse('**/send', send)
+  await faucet.fundAccount(accountsData.publicKey, "0")
+
+
+  await mockHelper.mockResponse('**/poll', pollInProgress)
+  await expect(await faucet.notification.getTitle()).toHaveText('Transaction is being processed...')
+  await mockHelper.mockResponse('**/poll', pollFinished)
+  await expect(await faucet.notification.getTitle()).toHaveText('Transaction successfully completed')
+});

packages/apps/tools/tests/fixtures/mocks/poll.ts

@@ -0,0 +1,48 @@
+export const pollInProgress = {}
+export const pollFinished = {
+  "rNk4ePNVlJGwjCaVrjKFJbh3A0agpcZq6gYLfivOHYg": {
+    "gas": 940,
+    "result": {
+      "status": "success",
+      "data": "Write succeeded"
+    },
+    "reqKey": "rNk4ePNVlJGwjCaVrjKFJbh3A0agpcZq6gYLfivOHYg",
+    "logs": "GXRNaJAVVqBrZA05zJ1B66VRzos09z-s9M9LQAXdkvY",
+    "events": [
+      {
+        "params": [
+          "faucet-operation",
+          "k:db776793be0fcf8e76c75bdb35a36e67f298111dc6145c66693b0133192e2616",
+          9.4e-6
+        ],
+        "name": "TRANSFER",
+        "module": {
+          "namespace": null,
+          "name": "coin"
+        },
+        "moduleHash": "rE7DU8jlQL9x_MPYuniZJf5ICBTAEHAIFQCB4blofP4"
+      },
+      {
+        "params": [
+          "coin-faucet",
+          "938c8ec66283493844c205481f220cfbd7024bda5859c7897141f6a5c6fc52c1",
+          100
+        ],
+        "name": "TRANSFER",
+        "module": {
+          "namespace": null,
+          "name": "coin"
+        },
+        "moduleHash": "rE7DU8jlQL9x_MPYuniZJf5ICBTAEHAIFQCB4blofP4"
+      }
+    ],
+    "metaData": {
+      "blockTime": 1696849672176432,
+      "prevBlockHash": "FxZHHgag5dS7f3hyNDVnTmeVOZZkdGtyvnqbkKspzVw",
+      "blockHash": "VnK4519k7MtweHWj9lENGQuIX_3plQj67LNAhgBljSc",
+      "blockHeight": 3672752
+    },
+    "continuation": null,
+    "txId": 3753319
+  }
+}

packages/apps/tools/tests/fixtures/mocks/send.ts

@@ -0,0 +1 @@
+export const send = {"requestKeys":["rNk4ePNVlJGwjCaVrjKFJbh3A0agpcZq6gYLfivOHYg"]}

packages/apps/tools/e2e-tests/page-objects/index.ts → packages/apps/tools/tests/page-objects/index.ts

@@ -3,12 +3,14 @@ import FaucetPage from './pages/faucet.page';
 import HomePage from './pages/home.page';
 import TransactionsPage from './pages/transactions.page';
 import AccountPage from './pages/account.page';
+import MockHelper from '@kadena/e2e-components/helpers/mock.helper'
 
 export const test = baseTest.extend<{
   home: HomePage
   transactions: TransactionsPage
   faucet: FaucetPage;
   account: AccountPage
+  mockHelper: MockHelper
 }>({
   home: async ({ page }, use) => {
     await use(new HomePage(page));
@@ -22,4 +24,8 @@ export const test = baseTest.extend<{
   account: async ({ page }, use) => {
     await use(new AccountPage(page));
   },
+
+  mockHelper: async ({ page }, use) => {
+    await use(new MockHelper(page));
+  },
 });

packages/tools/e2e-components/helpers/mock.helper.ts

@@ -0,0 +1,16 @@
+import type {  Page } from '@playwright/test';
+
+export default class MockHelper {
+  private readonly _page: Page;
+  public constructor(page: Page) {
+    this._page = page;
+  }
+
+  async mockResponse(uri: string|RegExp, response: object ): Promise<void> {
+    await this._page.route(uri, async (route) => {
+      const json = response;
+      await route.fulfill({ json });
+    });
+  }
+
+}

packages/tools/e2e-components/shared-components/notificationContainer.component.ts

@@ -6,18 +6,18 @@ export default class NotificationContainerComponent {
 
   public constructor(page: Page) {
     this._page = page;
-    this._componentLocator = this._page.getByTestId("kda-notification-container");
+    this._componentLocator = this._page.getByRole("alert");
   }
 
   async getTitle(): Promise<Locator> {
     return this._componentLocator.getByRole('heading')
   }
 
   async getMessage(): Promise<Locator> {
-    return this._componentLocator.getByTestId('kda-notification-content')
+    return this._componentLocator.getByRole('generic')
   }
 
-  async close(label: string): Promise<void> {
+  async close(): Promise<void> {
     await this._page.getByRole('button', {name: 'Close Notification'}).click()
   }
 

packages/tools/heft-rig/playwright.config.base.ts

@@ -8,7 +8,7 @@
  * See https://playwright.dev/docs/test-configuration.
  */
 export const  defaultConfig = {
-  testDir: 'e2e-tests',
+  testDir: 'tests',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
@@ -25,7 +25,8 @@ export const  defaultConfig = {
     command: 'pnpm run start',
     url: 'http://127.0.0.1:3000',
     reuseExistingServer: false,
-    stdout: 'ignore',
-    stderr: 'pipe',
+  },
+  expect: {
+    timeout: 10 * 1000,
   },
 };