Enhanced form with email + Playwright tests

Author: py-dev-nandini-12

src/app/api/submit/route.ts

@@ -1,6 +1,15 @@
 import { NextResponse } from 'next/server';
 
 export async function POST(req: Request) {
-  const { name } = await req.json();
-  return NextResponse.json({ message: `Hello, ${name}!` });
+  try {
+    const { name, email } = await req.json();
+
+    if (!name || !email) {
+      return NextResponse.json({ message: 'Name and Email are required' }, { status: 400 });
+    }
+
+    return NextResponse.json({ message: `Thank you, ${name}!` });
+  } catch {
+    return NextResponse.json({ message: 'Server error' }, { status: 500 });
+  }
 }

src/app/form/page.tsx

@@ -4,17 +4,39 @@ import { useState } from 'react';
 
 export default function Form() {
   const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
   const [message, setMessage] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const res = await fetch('/api/submit', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name }),
-    });
-    const data = await res.json();
-    setMessage(data.message);
+    setLoading(true);
+    setMessage('');
+    setError('');
+    
+    try {
+      const res = await fetch('/api/submit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, email }),
+      });
+
+      if (!res.ok) throw new Error('Failed to submit');
+      const data = await res.json();
+      setMessage(data.message);
+    } catch {
+      setError('Submission failed. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReset = () => {
+    setName('');
+    setEmail('');
+    setMessage('');
+    setError('');
   };
 
   return (
@@ -27,9 +49,19 @@ export default function Form() {
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
-        <button type="submit">Submit</button>
+        <input
+          type="email"
+          placeholder="Enter your email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <button type="submit" disabled={loading}>
+          {loading ? 'Submitting...' : 'Submit'}
+        </button>
+        <button type="button" onClick={handleReset}>Reset</button>
       </form>
-      {message && <p>{message}</p>}
+      {message && <p style={{ color: 'green' }}>{message}</p>}
+      {error && <p style={{ color: 'red' }}>{error}</p>}
     </div>
   );
 }

tests/form.spec.ts

@@ -1,8 +1,31 @@
 import { test, expect } from '@playwright/test';
 
-test('Form submission test', async ({ page }) => {
+test('Form submission works correctly', async ({ page }) => {
   await page.goto('/form');
-  await page.fill('input', 'Nandini');
-  await page.click('button');
-  await expect(page.locator('p')).toHaveText('Hello, Nandini!');
+
+  // Ensure form elements are present
+  await expect(page.locator('input[placeholder="Enter your name"]')).toBeVisible();
+  await expect(page.locator('input[placeholder="Enter your email"]')).toBeVisible();
+  await expect(page.locator('button[type="submit"]')).toHaveText('Submit');
+
+  // Fill out the form
+  await page.fill('input[placeholder="Enter your name"]', 'John Doe');
+  await page.fill('input[placeholder="Enter your email"]', '[email protected]');
+
+  // Submit the form
+  await page.click('button[type="submit"]');
+
+  // Wait for success message
+  await expect(page.locator('p')).toHaveText('Thank you, John Doe!');
+});
+
+test('Shows validation error if fields are missing', async ({ page }) => {
+  await page.goto('/form');
+
+  // Try to submit without filling anything
+  await page.click('button[type="submit"]');
+
+  // Expect an error message
+  await expect(page.locator('p')).toHaveText('Name and Email are required');
 });
+