First setup for Tools E2E tests

.changeset/moody-years-lie.md

@@ -0,0 +1,2 @@
+---
+---

.github/workflows/e2e-tests.yaml

@@ -0,0 +1,56 @@
+name: E2E tests
+
+on: [pull_request]
+
+jobs:
+  e2e-tools:
+    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:
+          fetch-depth: 2
+          show-progress: false
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install browsers
+        run: pnpm --filter @kadena-dev/e2e-tests run install:chromium
+        working-directory: packages/tools/e2e-tests
+
+      - name: Build Tools dApp
+        run: pnpm --filter @kadena/tools...  build
+        env:
+          # Dummy values for faucet transactions.
+          FAUCET_PUBLIC_KEY: 782127638ab9cc8fa8598ff0120464ceef6f367ddcd616b47afffbdb175dcc5e
+          FAUCET_PRIVATE_KEY: 93fd78bd1e79a3b593d4732b76050b418aeefa5e4e6ea80f351b4c3a5b0dd19f
+
+      - name: Run Playwright tests
+        run: pnpm run test:e2e -- --project=tools-app
+        env:
+          CI: true
+          TESTOBJECT: '@kadena/tools'
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: packages/tools/e2e-tests/playwright-report/
+          retention-days: 30

.gitignore

@@ -91,3 +91,8 @@ packages/*/*/temp
 storybook-static
 
 temp
+
+#Playwright
+/packages/*/*/test-results
+/packages/*/*/playwright-report
+

README.md

@@ -26,78 +26,83 @@ Overview of the main packages maintained in this repository:
 
 | Package                              | Release Notes        |
 | :----------------------------------- | :------------------- |
-| [@kadena-dev/eslint-config][5]       | [![version][7]][6]   |
-| [@kadena-dev/eslint-plugin][8]       | [![version][10]][9]  |
-| [@kadena-dev/heft-rig][11]           | [![version][13]][12] |
-| [@kadena/chainweb-node-client][14]   | [![version][16]][15] |
-| [@kadena/chainweb-stream-client][17] | [![version][19]][18] |
-| [@kadena/chainwebjs][20]             | [![version][22]][21] |
-| [@kadena/client][23]                 | [![version][25]][24] |
-| [@kadena/cryptography-utils][26]     | [![version][28]][27] |
-| [@kadena/pactjs][29]                 | [![version][31]][30] |
-| [@kadena/pactjs-cli][32]             | [![version][34]][33] |
-| [@kadena/pactjs-generator][35]       | [![version][37]][36] |
-| [@kadena/types][38]                  | [![version][40]][39] |
+| [@kadena-dev/e2e-tests][5]           | [![version][7]][6]   |
+| [@kadena-dev/eslint-config][8]       | [![version][10]][9]  |
+| [@kadena-dev/eslint-plugin][11]      | [![version][13]][12] |
+| [@kadena-dev/heft-rig][14]           | [![version][16]][15] |
+| [@kadena/chainweb-node-client][17]   | [![version][19]][18] |
+| [@kadena/chainweb-stream-client][20] | [![version][22]][21] |
+| [@kadena/chainwebjs][23]             | [![version][25]][24] |
+| [@kadena/client][26]                 | [![version][28]][27] |
+| [@kadena/cryptography-utils][29]     | [![version][31]][30] |
+| [@kadena/pactjs][32]                 | [![version][34]][33] |
+| [@kadena/pactjs-cli][35]             | [![version][37]][36] |
+| [@kadena/pactjs-generator][38]       | [![version][40]][39] |
+| [@kadena/types][41]                  | [![version][43]][42] |
 
 <!--packageTable end -->
 
 ## Contributors
 
 Special thanks to the wonderful people who have contributed to this project:
 
-[![Contributors][42]][41]
+[![Contributors][45]][44]
 
 [1]: https://docs.kadena.io
 [2]: https://discord.io/kadena
 [3]: https://stackoverflow.com/questions/tagged/kadena
 [4]: ./CONTRIBUTING.md
 [5]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/eslint-config
-[6]: packages/tools/eslint-config/CHANGELOG.md
-[7]: https://img.shields.io/npm/v/@kadena-dev/eslint-config.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/e2e-tests
+[6]: packages/tools/e2e-tests/CHANGELOG.md
+[7]: https://img.shields.io/npm/v/@kadena-dev/e2e-tests.svg
 [8]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/eslint-plugin
-[9]: packages/tools/eslint-plugin/CHANGELOG.md
-[10]: https://img.shields.io/npm/v/@kadena-dev/eslint-plugin.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/eslint-config
+[9]: packages/tools/eslint-config/CHANGELOG.md
+[10]: https://img.shields.io/npm/v/@kadena-dev/eslint-config.svg
 [11]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/heft-rig
-[12]: packages/tools/heft-rig/CHANGELOG.md
-[13]: https://img.shields.io/npm/v/@kadena-dev/heft-rig.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/eslint-plugin
+[12]: packages/tools/eslint-plugin/CHANGELOG.md
+[13]: https://img.shields.io/npm/v/@kadena-dev/eslint-plugin.svg
 [14]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/chainweb-node-client
-[15]: packages/libs/chainweb-node-client/CHANGELOG.md
-[16]: https://img.shields.io/npm/v/@kadena/chainweb-node-client.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/heft-rig
+[15]: packages/tools/heft-rig/CHANGELOG.md
+[16]: https://img.shields.io/npm/v/@kadena-dev/heft-rig.svg
 [17]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/chainweb-stream-client
-[18]: packages/libs/chainweb-stream-client/CHANGELOG.md
-[19]: https://img.shields.io/npm/v/@kadena/chainweb-stream-client.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/chainweb-node-client
+[18]: packages/libs/chainweb-node-client/CHANGELOG.md
+[19]: https://img.shields.io/npm/v/@kadena/chainweb-node-client.svg
 [20]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/chainwebjs
-[21]: packages/libs/chainwebjs/CHANGELOG.md
-[22]: https://img.shields.io/npm/v/@kadena/chainwebjs.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/chainweb-stream-client
+[21]: packages/libs/chainweb-stream-client/CHANGELOG.md
+[22]: https://img.shields.io/npm/v/@kadena/chainweb-stream-client.svg
 [23]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/client
-[24]: packages/libs/client/CHANGELOG.md
-[25]: https://img.shields.io/npm/v/@kadena/client.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/chainwebjs
+[24]: packages/libs/chainwebjs/CHANGELOG.md
+[25]: https://img.shields.io/npm/v/@kadena/chainwebjs.svg
 [26]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/cryptography-utils
-[27]: packages/libs/cryptography-utils/CHANGELOG.md
-[28]: https://img.shields.io/npm/v/@kadena/cryptography-utils.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/client
+[27]: packages/libs/client/CHANGELOG.md
+[28]: https://img.shields.io/npm/v/@kadena/client.svg
 [29]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/pactjs
-[30]: packages/libs/pactjs/CHANGELOG.md
-[31]: https://img.shields.io/npm/v/@kadena/pactjs.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/cryptography-utils
+[30]: packages/libs/cryptography-utils/CHANGELOG.md
+[31]: https://img.shields.io/npm/v/@kadena/cryptography-utils.svg
 [32]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/pactjs-cli
-[33]: packages/tools/pactjs-cli/CHANGELOG.md
-[34]: https://img.shields.io/npm/v/@kadena/pactjs-cli.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/pactjs
+[33]: packages/libs/pactjs/CHANGELOG.md
+[34]: https://img.shields.io/npm/v/@kadena/pactjs.svg
 [35]:
-  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/pactjs-generator
-[36]: packages/libs/pactjs-generator/CHANGELOG.md
-[37]: https://img.shields.io/npm/v/@kadena/pactjs-generator.svg
+  https://github.com/kadena-community/kadena.js/tree/main/packages/tools/pactjs-cli
+[36]: packages/tools/pactjs-cli/CHANGELOG.md
+[37]: https://img.shields.io/npm/v/@kadena/pactjs-cli.svg
 [38]:
+  https://github.com/kadena-community/kadena.js/tree/main/packages/libs/pactjs-generator
+[39]: packages/libs/pactjs-generator/CHANGELOG.md
+[40]: https://img.shields.io/npm/v/@kadena/pactjs-generator.svg
+[41]:
   https://github.com/kadena-community/kadena.js/tree/main/packages/libs/types
-[39]: packages/libs/types/CHANGELOG.md
-[40]: https://img.shields.io/npm/v/@kadena/types.svg
-[41]: https://github.com/kadena-community/kadena.js/graphs/contributors
-[42]: https://contrib.rocks/image?repo=kadena-community/kadena.js
+[42]: packages/libs/types/CHANGELOG.md
+[43]: https://img.shields.io/npm/v/@kadena/types.svg
+[44]: https://github.com/kadena-community/kadena.js/graphs/contributors
+[45]: https://contrib.rocks/image?repo=kadena-community/kadena.js

package.json

@@ -16,6 +16,7 @@
     "publish": "changeset publish",
     "select": "git checkout .changeset/config.json && tsx --no-warnings ./packages/tools/scripts/publish-set.ts",
     "test": "turbo run test",
+    "test:e2e": "turbo run test:e2e",
     "test:integration": "turbo run test:integration",
     "version": "changeset version"
   },

packages.json

@@ -125,6 +125,12 @@
     "private": false,
     "path": "packages/libs/types"
   },
+  {
+    "name": "@kadena-dev/e2e-tests",
+    "version": "0.0.1",
+    "private": true,
+    "path": "packages/tools/e2e-tests"
+  },
   {
     "name": "@kadena-dev/eslint-config",
     "version": "1.0.0",

packages/apps/tools/src/components/Common/Layout/partials/Sidebar/MenuButton.tsx

@@ -33,6 +33,7 @@ export const MenuButton: FC<IMenuButtonProps> = ({
         onMouseEnter={(e) => Tooltip.handler(e, tooltipRef)}
         onMouseLeave={(e) => Tooltip.handler(e, tooltipRef)}
         {...rest}
+        aria-label={title}
       >
         <Icon />
       </button>

packages/tools/e2e-tests/.eslintrc.js

@@ -0,0 +1,13 @@
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+
+module.exports = {
+  extends: [
+    '@kadena-dev/eslint-config/profile/lib',
+    'plugin:playwright/recommended',
+  ],
+  parserOptions: { tsconfigRootDir: __dirname },
+  ignorePatterns: ['playwright.config.ts'],
+  rules: {
+    '@kadena-dev/typedef-var': 'off',
+  },
+};

packages/tools/e2e-tests/README.MD

@@ -0,0 +1 @@
+TODO

packages/tools/e2e-tests/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@kadena-dev/e2e-tests",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "format": "pnpm run --sequential /^format:.*/",
+    "format:lint": "pnpm run lint:src --fix",
+    "format:md": "remark README.md -o --use @kadena-dev/markdown",
+    "format:src": "prettier . --cache --write",
+    "install:chromium": "npx playwright install chromium",
+    "lint": "pnpm run /^lint:.*/",
+    "lint:fmt": "prettier . --cache --check",
+    "lint:pkg": "lint-package",
+    "lint:src": "eslint src --ext .js,.ts",
+    "test:e2e": "npx playwright test"
+  },
+  "devDependencies": {
+    "@kadena-dev/eslint-config": "workspace:*",
+    "@kadena-dev/heft-rig": "workspace:*",
+    "@kadena-dev/lint-package": "workspace:*",
+    "@kadena-dev/markdown": "workspace:*",
+    "@playwright/test": "^1.39.0",
+    "@rushstack/eslint-config": "~3.3.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-playwright": "0.16.0",
+    "prettier": "~3.0.0",
+    "prettier-plugin-packagejson": "^2.4.5"
+  }
+}

packages/tools/e2e-tests/playwright.config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: 'src/tests/*',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: process.env.CI ? 4 : 1,
+  reporter: [['github'], ['list'], ['html', { open: 'never' }]],
+  use: {
+    headless: !!process.env.CI,
+    baseURL: process.env.PLAYWRIGHT_BASE_URL
+      ? process.env.PLAYWRIGHT_BASE_URL
+      : 'http://127.0.0.1:3000',
+    channel: 'chromium',
+    trace: `retain-on-failure`,
+  },
+  expect: {
+    timeout: 10 * 1000,
+  },
+  webServer: {
+    command: `pnpm --filter ${process.env.TESTOBJECT} run start`,
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+
+  projects: [
+    {
+      name: 'tools-app',
+      testDir: 'src/tests/tools-app',
+    },
+  ],
+});

packages/tools/e2e-tests/src/fixtures/data/accounts.ts

@@ -0,0 +1,8 @@
+interface IAccounts {
+  publicKey: string;
+  secretkey: string;
+}
+export const accountsData: IAccounts = {
+  publicKey: '938c8ec66283493844c205481f220cfbd7024bda5859c7897141f6a5c6fc52c1',
+  secretkey: 'be6442bd49bb7c1c48413596da6e879f85c047bbe8236abe9f9afb63eb32705d',
+};

packages/tools/e2e-tests/src/fixtures/mocks/poll.ts

@@ -0,0 +1,48 @@
+export const pollInProgress: object = {};
+export const pollFinished: object = {
+  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/tools/e2e-tests/src/fixtures/mocks/send.ts

@@ -0,0 +1,3 @@
+export const send: object = {
+  requestKeys: ['rNk4ePNVlJGwjCaVrjKFJbh3A0agpcZq6gYLfivOHYg'],
+};

packages/tools/e2e-tests/src/helpers/mock.helper.ts

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