Feature/1263 create drips network bounty validation script and checklist

react/e2e/vaults.spec.ts

@@ -1,5 +1,6 @@
 // SPDX-License-Identifier: MIT
 import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
 import { installFreighterStub, installNetworkStubs, MOCK_PUBLIC_KEY, MOCK_TX_HASH } from './stubs';
 
 test.describe('Vaults Dashboard flow', () => {
@@ -68,7 +69,6 @@ test.describe('Vaults Dashboard flow', () => {
   });
 });
 
-
 /**
  * E2E tests for VaultsScreen Withdrawals & Share Redemptions (#1258)
  * Verifies withdraw input validation, MAX shares button, share preview,
@@ -88,9 +88,9 @@ test.describe('VaultsScreen Withdrawals & Share Redemptions (#1258)', () => {
     // Try typing invalid negative amount or excessively large amount
     await withdrawInput.fill('-50');
     const submitBtn = page.locator('button:has-text("Withdraw"), [data-testid="submit-withdraw-btn"]');
-    
+
     // Validation error or disabled state check
-   0 const errorAlert = page.locator('.error-message, [role="alert"]');
+    const errorAlert = page.locator('.error-message, [role="alert"]');
     if (await errorAlert.isVisible()) {
       await expect(errorAlert).toContainText(/invalid|greater than zero|exceeds/i);
     }
@@ -147,4 +147,67 @@ test.describe('VaultsScreen Withdrawals & Share Redemptions (#1258)', () => {
     const connectPrompt = page.locator('.wallet-disconnected-alert, text=/connect wallet/i');
     await expect(connectPrompt).toBeVisible();
   });
-});
+});
+
+test.describe('VaultsScreen Metrics & Deposit Flow (#1257)', () => {
+  test.beforeEach(async ({ page }) => {
+    // Intercept RPC or vault API calls if needed, or navigate to Vaults view
+    await page.goto('/vaults');
+    await page.waitForLoadState('domcontentloaded');
+  });
+
+  test('should render vault metric cards and APY chart correctly', async ({ page }) => {
+    // Assert total assets metric card is visible and populated
+    const totalAssetsCard = page.locator('[data-testid="vault-total-assets"], .vault-metrics-assets');
+    await expect(totalAssetsCard).toBeVisible({ timeout: 10000 });
+
+    // Assert shares and APY chart are visible
+    const apyChart = page.locator('[data-testid="vault-apy-chart"], canvas, .recharts-surface');
+    await expect(apyChart).toBeVisible();
+  });
+
+  test('should pass automated WCAG 2.1 AA accessibility audit on VaultsScreen', async ({ page }) => {
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+      .analyze();
+
+    if (accessibilityScanResults.violations.length > 0) {
+      console.error('Accessibility violations found:', JSON.stringify(accessibilityScanResults.violations, null, 2));
+    }
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('should successfully simulate wallet connection, deposit amount, slippage selection, and confirmation', async ({ page }) => {
+    // 1. Simulate Wallet Connection using mock fixture
+    const connectWalletBtn = page.locator('button:has-text("Connect Wallet"), [data-testid="connect-wallet-btn"]');
+    if (await connectWalletBtn.isVisible()) {
+      await connectWalletBtn.click();
+      // Select mock wallet provider
+      const mockProviderOption = page.locator('text=Freighter Mock, text=Mock Wallet, [data-testid="mock-wallet-option"]');
+      if (await mockProviderOption.isVisible()) {
+        await mockProviderOption.click();
+      }
+    }
+
+    // 2. Enter deposit amount
+    const depositInput = page.locator('input[name="depositAmount"], [data-testid="deposit-amount-input"]');
+    await expect(depositInput).toBeVisible();
+    await depositInput.fill('150.00');
+
+    // 3. Test slippage selector
+    const slippageButton = page.locator('button:has-text("0.5%"), [data-testid="slippage-btn-0.5"]');
+    if (await slippageButton.isVisible()) {
+      await slippageButton.click();
+    }
+
+    // 4. Confirm deposit
+    const submitDepositBtn = page.locator('button:has-text("Deposit"), [data-testid="confirm-deposit-btn"]');
+    await expect(submitDepositBtn).toBeEnabled();
+    await submitDepositBtn.click();
+
+    // 5. Verify transaction success confirmation modal / alert
+    const successMessage = page.locator('text=Deposit Successful, text=Transaction Confirmed, [data-testid="tx-success-alert"]');
+    await expect(successMessage).toBeVisible({ timeout: 15000 });
+  });
+});

react/playwright.config.ts

@@ -2,20 +2,23 @@ import { defineConfig, devices } from '@playwright/test';
 import path from 'path';
 
 /**
- * Playwright configuration for the bc-forge React demo smoke tests.
+ * Playwright configuration for the bc-forge React demo smoke & E2E tests.
  *
  * Run with:
  *   npm run e2e   (from react/)
- *
- * The config spins up the Vite demo server automatically before the suite
- * and tears it down when done, so no manual `npm run dev` is required.
  */
 export default defineConfig({
   testDir: path.join(__dirname, 'e2e'),
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000,
+  },
+  fullyParallel: true,
   /* Run tests in a single worker to keep CI resource usage low */
   workers: 1,
   /* Retry once on CI to tolerate transient flakiness */
   retries: process.env.CI ? 1 : 0,
+  forbidOnly: !!process.env.CI,
   /* Reporter: list locally, github annotations on CI */
   reporter: process.env.CI ? 'github' : 'list',
   use: {
@@ -25,42 +28,6 @@ export default defineConfig({
     /* No wallet extensions — run headless with no extension flags */
     headless: true,
   },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
-  /* Automatically start the Vite demo server */
-  webServer: {
-    command: 'npm run dev',
-    cwd: path.join(__dirname, 'demo'),
-    url: 'http://localhost:5173',
-    reuseExistingServer: !process.env.CI,
-    timeout: 60_000,
-  },
-});
-
-
-
-/**
- * Playwright Configuration with Mobile Viewport Projects (#1260)
- */
-export default defineConfig({
-  testDir: './e2e',
-  timeout: 30 * 1000,
-  expect: {
-    timeout: 5000,
-  },
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
-  use: {
-    baseURL: 'http://localhost:3000',
-    trace: 'on-first-retry',
-  },
   projects: [
     {
       name: 'Desktop Chrome',
@@ -76,9 +43,12 @@ export default defineConfig({
       use: { ...devices['Pixel 7'] },
     },
   ],
+  /* Automatically start the Vite demo server */
   webServer: {
     command: 'npm run dev',
-    url: 'http://localhost:3000',
+    cwd: path.join(__dirname, 'demo'),
+    url: 'http://localhost:5173',
     reuseExistingServer: !process.env.CI,
+    timeout: 60_000,
   },
-});
+});

react/visual/screens.visual.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Visual Regression Snapshot Test Suite (#1259)
+ * Captures pixel-perfect baseline screenshots of core screens in light and dark mode.
+ */
+const coreScreens = [
+  { name: 'landing', path: '/' },
+  { name: 'vaults', path: '/vaults' },
+  { name: 'admin', path: '/admin' },
+];
+
+for (const screen of coreScreens) {
+  test(`visual snapshot: ${screen.name} screen`, async ({ page }) => {
+    await page.goto(screen.path);
+    await page.waitForLoadState('networkidle');
+
+    // Ensure animations or dynamic tickers are settled if applicable
+    await page.waitForTimeout(500);
+
+    // Compare full page screenshot against baseline with maxDiffPixels: 0
+    await expect(page).toHaveScreenshot(`${screen.name}.png`, {
+      fullPage: true,
+    });
+  });
+}

scripts/verify-frontend-bounty.mjs

@@ -0,0 +1,37 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+/**
+ * Drips.network Bounty Verification Script (#1263)
+ * Validates Phase 3 frontend test suites, CI workflows, and required artifacts.
+ */
+const REQUIRED_FILES = [
+  '.github/workflows/frontend-e2e.yml',
+  'react/e2e/vaults.spec.ts',
+  'react/playwright.visual.config.ts',
+  'docs/BOUNTIES.md'
+];
+
+function verifyBountyDeliverables() {
+  console.log('🔍 Starting Drips.network Phase 3 Bounty Verification...');
+  let missingFiles = 0;
+
+  for (const filePath of REQUIRED_FILES) {
+    const fullPath = path.resolve(process.cwd(), filePath);
+    if (fs.existsSync(fullPath)) {
+      console.log(`  ✅ Verified: ${filePath}`);
+    } else {
+      console.error(`  ❌ Missing required artifact: ${filePath}`);
+      missingFiles++;
+    }
+  }
+
+  if (missingFiles > 0) {
+    console.error(`\n❌ Verification failed! ${missingFiles} required Phase 3 artifact(s) missing.`);
+    process.exit(1);
+  }
+
+  console.log('\n🎉 All Phase 3 deliverables successfully verified for Drips.network bounty sign-off!');
+}
+
+verifyBountyDeliverables();