tests: add tests to cover initial form implementation

src/GroundsForSupport.Client/package-lock.json

@@ -16,6 +16,7 @@
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.0",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.7",
         "@types/react-dom": "^19.2.3",
@@ -1197,6 +1198,20 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+      "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",

src/GroundsForSupport.Client/package.json

@@ -20,6 +20,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",

src/GroundsForSupport.Client/tests/App.spec.tsx

@@ -1,15 +1,134 @@
-import { expect, test } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 import App from '@/App.tsx';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import userEvent, { type UserEvent } from '@testing-library/user-event';
 
-test('counter button increments the count', () => {
+describe('profile info', () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  test('it should display a profile image', () => {
     const screen = render(<App />);
     
-  const button = screen.getByRole('button');
+    const profileImage = screen.getByAltText('Profile picture of Stevan Freeborn');
 
-  fireEvent.click(button);
+    expect(profileImage).toBeInTheDocument();
-  fireEvent.click(button);
+  });
 
-  expect(button).toHaveTextContent('count is 2');
+  test('it should display name', () => {
+    const screen = render(<App />);
+
+    const nameElement = screen.getByRole('heading', { name: 'Stevan Freeborn' });
+
+    expect(nameElement).toBeInTheDocument();
+  });
+});
+
+describe('form', () => {
+  test('it should have an amount input', () => {
+    const screen = render(<App />);
+
+    const amountInput = screen.getByLabelText('Amount');
+
+    expect(amountInput).toBeInTheDocument();
+  });
+
+  test('it should have an email input', () => {
+    const screen = render(<App />);
+
+    const emailInput = screen.getByLabelText('Email');
+
+    expect(emailInput).toBeInTheDocument();
+  });
+
+  test('it should have a button to submit the form', () => {
+    const screen = render(<App />);
+
+    const submitButton = screen.getByRole('button', { name: 'Buy' });
+
+    expect(submitButton).toBeInTheDocument();
+  });
+
+  test('it should require the amount to be provided', async () => {
+    const screen = render(<App />);
+
+    const submitButton = screen.getByRole('button', { name: 'Buy' });
+
+    await userEvent.click(submitButton);
+
+    const errorMessage = screen.getByText('Please enter a valid amount greater than 0.');
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  test('it should clear amount error when input changes', async () => {
+    const screen = render(<App />);
+
+    const amountInput = screen.getByLabelText('Amount');
+    const submitButton = screen.getByRole('button', { name: 'Buy' });
+
+    await userEvent.click(submitButton);
+
+    let errorMessage = screen.queryByText('Please enter a valid amount greater than 0.');
+    expect(errorMessage).toBeInTheDocument();
+
+    await userEvent.type(amountInput, '10');
+
+    errorMessage = screen.queryByText('Please enter a valid amount greater than 0.');
+
+    expect(errorMessage).not.toBeInTheDocument();
+  });
+
+  test('it should allow form to be submitted without email', async () => {
+    const windowSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
+
+    const screen = render(<App />);
+
+    const amountInput = screen.getByLabelText('Amount');
+    const submitButton = screen.getByRole('button', { name: 'Buy' });
+
+    await userEvent.type(amountInput, '10');
+    await userEvent.click(submitButton);
+
+    expect(windowSpy).toHaveBeenCalledWith('Form is valid! Amount: 10, Email: ');
+  });
+
+  test('it should validate email if provided', async () => {
+    const screen = render(<App />);
+
+    const amountInput = screen.getByLabelText('Amount');
+    const emailInput = screen.getByLabelText('Email');
+    const submitButton = screen.getByRole('button', { name: 'Buy' });
+
+    await userEvent.type(amountInput, '10');
+    await userEvent.type(emailInput, 'invalid-email');
+    await userEvent.click(submitButton);
+
+    const errorMessage = screen.getByText('Please enter a valid email address.');
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  test('it should clear email error when input changes', async () => {
+    const screen = render(<App />);
+
+    const amountInput = screen.getByLabelText('Amount');
+    const emailInput = screen.getByLabelText('Email');
+    const submitButton = screen.getByRole('button', { name: 'Buy' });
+
+    await userEvent.type(amountInput, '10');
+    await userEvent.type(emailInput, 'invalid-email');
+    await userEvent.click(submitButton);
+
+    let errorMessage = screen.queryByText('Please enter a valid email address.');
+    expect(errorMessage).toBeInTheDocument();
+
+    await userEvent.clear(emailInput);
+    await userEvent.type(emailInput, 'test@test.com');
+
+    errorMessage = screen.queryByText('Please enter a valid email address.');
+    expect(errorMessage).not.toBeInTheDocument();
+  });
 });