refactor: walletd testing

.github/workflows/pr.yml

@@ -32,16 +32,24 @@ jobs:
         uses: golangci/golangci-lint-action@v3
         with:
           skip-cache: true
-      - name: Compile
+      - name: NX pre-build compile targets
         shell: bash
         run: npx nx affected --target=compile --parallel=5
-      - name: Test
+      - name: Test TypeScript
         shell: bash
         run: npx nx affected --target=test --parallel=5
       - name: Test Go
         uses: n8maninger/action-golang-test@v1
         with:
           args: '-race'
+      - name: Install playwright deps for e2e
+        shell: bash
+        run: npx playwright install-deps
+      - name: Test e2e
+        shell: bash
+        run: npx nx affected --target=e2e --parallel=5
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Build
         shell: bash
         run: npx nx affected --target=build --configuration=production --parallel=5

.github/workflows/release-main.yml

@@ -29,15 +29,31 @@ jobs:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Lint
+      - name: Lint TypeScript
         shell: bash
         run: npx nx run-many --target=lint --all --parallel=5
-      - name: Compile
+      - name: Lint Go
+        uses: golangci/golangci-lint-action@v3
+        with:
+          skip-cache: true
+      - name: NX pre-build compile targets
         shell: bash
         run: npx nx run-many --target=compile --all --parallel=5
-      - name: Test
+      - name: Test TypeScript
         shell: bash
         run: npx nx run-many --target=test --all --parallel=5
+      - name: Test Go
+        uses: n8maninger/action-golang-test@v1
+        with:
+          args: '-race'
+      - name: Install playwright deps for e2e
+        shell: bash
+        run: npx playwright install-deps
+      - name: Test e2e
+        shell: bash
+        run: npx nx run-many --target=e2e --all --parallel=5
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Build for publishing
         shell: bash
         run: npx nx run-many --target=build --configuration=production --all --parallel=5

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "nrwl.angular-console",
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "ms-playwright.playwright"
   ]
 }

apps/walletd-e2e/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": ["plugin:playwright/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
+    }
+  ]
+}

apps/walletd-e2e/.gitignore

@@ -0,0 +1 @@
+output

apps/walletd-e2e/playwright.config.ts

@@ -0,0 +1,76 @@
+import { defineConfig, devices } from '@playwright/test'
+import { nxE2EPreset } from '@nx/playwright/preset'
+
+import { workspaceRoot } from '@nx/devkit'
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:3008'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    video: 'on-first-retry',
+  },
+  expect: {
+    // Raise the timeout because it is running against next dev mode
+    // which requires compilation the first to a page is visited
+    timeout: 10_000,
+  },
+  outputDir: 'output',
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npx nx serve walletd',
+    url: 'http://localhost:3008',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+})

apps/walletd-e2e/project.json

@@ -0,0 +1,19 @@
+{
+  "name": "walletd-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/walletd-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/apps/walletd-e2e"],
+      "options": {
+        "config": "apps/walletd-e2e/playwright.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  },
+  "implicitDependencies": ["walletd"]
+}

apps/walletd-e2e/src/fixtures/createWallet.ts

@@ -0,0 +1,50 @@
+import { expect, Page } from '@playwright/test'
+import { mockApiWallet } from '../mocks/mock'
+import {
+  Wallet,
+  WalletAddressesResponse,
+  WalletBalanceResponse,
+  WalletFundResponse,
+  WalletOutputsSiacoinResponse,
+} from '@siafoundation/react-walletd'
+import { mockApiWallets } from '../mocks/wallets'
+
+export async function createWallet({
+  page,
+  seed,
+  newWallet,
+  responses = {},
+}: {
+  page: Page
+  seed: string
+  newWallet: Wallet
+  responses?: {
+    balance?: WalletBalanceResponse
+    outputsSiacoin?: WalletOutputsSiacoinResponse
+    fund?: WalletFundResponse
+    addresses?: WalletAddressesResponse
+  }
+}) {
+  const wallets = await mockApiWallets({ page, createWallet: newWallet })
+  await mockApiWallet({
+    page,
+    wallet: newWallet,
+    responses,
+  })
+
+  await expect(page.getByRole('button', { name: 'Add wallet' })).toBeVisible()
+  await page.getByRole('button', { name: 'Add wallet' }).click()
+  await page.getByRole('button', { name: 'Create a wallet Generate a' }).click()
+  await page.locator('input[name=name]').fill(newWallet.name)
+  await page.locator('input[name=name]').press('Tab')
+  await page.locator('textarea[name=description]').fill(newWallet.name)
+  await page.locator('textarea[name=description]').press('Tab')
+  await page.locator('textarea[name=mnemonic]').click()
+  wallets.push(newWallet)
+  await page.getByRole('button', { name: 'Add wallet' }).click()
+  await expect(
+    page.getByText(`Wallet ${newWallet.name.slice(0, 5)}`)
+  ).toBeVisible()
+  await page.locator('input[name=mnemonic]').fill(seed)
+  await page.getByRole('button', { name: 'Continue' }).click()
+}

apps/walletd-e2e/src/fixtures/login.ts

@@ -0,0 +1,12 @@
+import { Page, expect } from '@playwright/test'
+
+export async function login({ page }: { page: Page }) {
+  await page.goto('/')
+  await expect(page).toHaveTitle('walletd')
+  await page.getByLabel('login settings').click()
+  await page.getByRole('menuitem', { name: 'Show custom API' }).click()
+  await page.locator('input[name=api]').fill('https://walletd.local')
+  await page.locator('input[name=api]').press('Tab')
+  await page.locator('input[name=password]').fill('password')
+  await page.locator('input[name=password]').press('Enter')
+}

apps/walletd-e2e/src/fixtures/navigateToWallet.ts

@@ -0,0 +1,13 @@
+import { Page } from '@playwright/test'
+import { Wallet } from '@siafoundation/react-walletd'
+
+export async function navigateToWallet({
+  page,
+  wallet,
+}: {
+  page: Page
+  wallet: Wallet
+}) {
+  await page.getByLabel('Dashboard').click()
+  await page.getByText(wallet.name).click()
+}

apps/walletd-e2e/src/fixtures/sendSiacoinDialog.ts

@@ -0,0 +1,19 @@
+import { Page } from 'playwright'
+
+export async function fillComposeTransactionSiacoin({
+  page,
+  receiveAddress,
+  changeAddress,
+  amount,
+}: {
+  page: Page
+  receiveAddress: string
+  changeAddress: string
+  amount: string
+}) {
+  await page.locator('input[name=receiveAddress]').fill(receiveAddress)
+  await page.getByLabel('customChangeAddress').click()
+  await page.locator('input[name=changeAddress]').fill(changeAddress)
+  await page.locator('input[name=siacoin]').fill(amount)
+  await page.getByRole('button', { name: 'Generate transaction' }).click()
+}

apps/walletd-e2e/src/mocks/consensusNetwork.ts

@@ -0,0 +1,54 @@
+import { ConsensusNetwork } from '@siafoundation/types'
+import { cloneDeep } from '@technically/lodash'
+import { Page } from 'playwright'
+
+const data: ConsensusNetwork = {
+  name: 'zen',
+  initialCoinbase: '300000000000000000000000000000',
+  minimumCoinbase: '300000000000000000000000000000',
+  initialTarget:
+    'bid:0000000100000000000000000000000000000000000000000000000000000000',
+  hardforkDevAddr: {
+    height: 1,
+    oldAddress:
+      'addr:000000000000000000000000000000000000000000000000000000000000000089eb0d6a8a69',
+    newAddress:
+      'addr:000000000000000000000000000000000000000000000000000000000000000089eb0d6a8a69',
+  },
+  hardforkTax: {
+    height: 2,
+  },
+  hardforkStorageProof: {
+    height: 5,
+  },
+  hardforkOak: {
+    height: 10,
+    fixHeight: 12,
+    genesisTimestamp: '2023-01-13T03:53:20-05:00',
+  },
+  hardforkASIC: {
+    height: 20,
+    oakTime: 10000000000000,
+    oakTarget:
+      'bid:0000000100000000000000000000000000000000000000000000000000000000',
+  },
+  hardforkFoundation: {
+    height: 30,
+    primaryAddress:
+      'addr:053b2def3cbdd078c19d62ce2b4f0b1a3c5e0ffbeeff01280efb1f8969b2f5bb4fdc680f0807',
+    failsafeAddress:
+      'addr:000000000000000000000000000000000000000000000000000000000000000089eb0d6a8a69',
+  },
+  hardforkV2: {
+    allowHeight: 100000,
+    requireHeight: 102000,
+  },
+}
+
+export async function mockApiConsensusNetwork({ page }: { page: Page }) {
+  const json = cloneDeep(data)
+  await page.route('**/api/consensus/network*', async (route) => {
+    await route.fulfill({ json })
+  })
+  return json
+}

apps/walletd-e2e/src/mocks/consensusTip.ts

@@ -0,0 +1,16 @@
+import { ConsensusTipResponse } from '@siafoundation/react-walletd'
+import { cloneDeep } from '@technically/lodash'
+import { Page } from 'playwright'
+
+const data: ConsensusTipResponse = {
+  height: 61676,
+  id: 'bid:00000010d5da9002b9640d920d9eb9f7502c5c3b2a796ecf800a103920bea96f',
+}
+
+export async function mockApiConsensusTipState({ page }: { page: Page }) {
+  const json = cloneDeep(data)
+  await page.route('**/api/consensus/tipstate*', async (route) => {
+    await route.fulfill({ json })
+  })
+  return json
+}