test(web): Add AmountInput tests and vitest setup

.github/workflows/ci.yml

@@ -46,6 +46,9 @@ jobs:
       - name: Check Formatting
         run: npx prettier --check .
 
+    - name: Test Web Application
+      run: pnpm --filter web test
+
   verify-go-indexer:
     name: Verify Go Indexer & API
     runs-on: ubuntu-latest

apps/web/components/shared/AmountInput.test.tsx

@@ -1,3 +1,97 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { AmountInput } from './AmountInput';
+
+const baseProps = {
+  value: '1000',
+  onChange: () => {},
+  asset: 'USDC' as const,
+};
+
+describe('AmountInput', () => {
+  it('renders an input with defaults when only required props are provided', () => {
+    render(<AmountInput {...baseProps} />);
+
+    const input = screen.getByRole('spinbutton');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'number');
+    expect(input).toHaveAttribute('step', '0.0000001');
+    expect(input).toHaveAttribute('min', '0');
+    expect(input).toHaveAttribute('placeholder', '0.00');
+    expect(input).toHaveValue(1000);
+    expect(input).not.toBeDisabled();
+    expect(input).not.toBeRequired();
+
+    expect(screen.getByText('Amount (USDC)')).toBeInTheDocument();
+    expect(screen.getAllByText('USDC').length).toBeGreaterThan(0);
+    expect(screen.queryByText('1,000 USDC')).not.toBeInTheDocument();
+  });
+
+  it('reflects prop-driven overrides for label, placeholder, asset ticker, and input state', () => {
+    render(
+      <AmountInput
+        value=""
+        onChange={() => {}}
+        asset="XLM"
+        label="Invoice Amount"
+        placeholder="0.0"
+        disabled
+        required
+      />,
+    );
+
+    const input = screen.getByRole('spinbutton');
+    expect(input).toBeDisabled();
+    expect(input).toBeRequired();
+    expect(input).toHaveAttribute('placeholder', '0.0');
+
+    expect(screen.getByText('Invoice Amount')).toBeInTheDocument();
+    expect(screen.getAllByText('XLM').length).toBeGreaterThan(0);
+  });
+
+  it('calls onChange with the entered value when the input changes', () => {
+    const onChange = vi.fn();
+    render(<AmountInput value="" onChange={onChange} asset="USDC" />);
+
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '123' } });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('123');
+  });
+
+  it('does not call onChange while disabled', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<AmountInput value="" onChange={onChange} asset="USDC" disabled />);
+
+    await user.type(screen.getByRole('spinbutton'), '123');
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('shows a styled preview only when showPreview is true and previewValue is provided', () => {
+    const { rerender } = render(
+      <AmountInput {...baseProps} value="1234.5" showPreview previewValue={1234.5} />,
+    );
+
+    expect(screen.getByText('1,234.5 USDC')).toBeInTheDocument();
+
+    rerender(
+      <AmountInput
+        {...baseProps}
+        value="1234.5"
+        showPreview
+        previewValue={1234.5}
+        previewLabel="≈ $1,250.00"
+      />,
+    );
+    expect(screen.getByText('≈ $1,250.00')).toBeInTheDocument();
+
+    rerender(<AmountInput {...baseProps} value="1234.5" showPreview previewValue={undefined} />);
+    expect(screen.queryByText('1,234.5 USDC')).not.toBeInTheDocument();
+  });
+});
 import React from "react";
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";

apps/web/package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test": "vitest run"
     "test": "vitest run --passWithNoTests",
     "test:coverage": "vitest run --coverage --passWithNoTests"
   },
@@ -36,12 +37,22 @@
     "zustand": "^5.0.14"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.35",
+    "jsdom": "^26.1.0",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "vitest": "^3.2.7"
     "@vitejs/plugin-react": "^6.0.3",
     "@vitest/coverage-v8": "^4.1.9",
     "axe-core": "^4.13.0",

apps/web/vitest.config.mts

@@ -0,0 +1,18 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+    include: ['**/*.test.{ts,tsx}'],
+    exclude: ['node_modules', '.next', 'out'],
+  },
+  resolve: {
+    alias: {
+      '@': process.cwd(),
+    },
+  },
+});

apps/web/vitest.setup.ts

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom/vitest';
 import "@testing-library/jest-dom";
 import * as matchers from "vitest-axe/matchers";
 import { expect } from "vitest";