Checkout Form Tests

Problem/Feature Description

A small e-commerce startup has built a React checkout form that collects a customer's name, email, and delivery address before they place an order. A junior developer wrote a first draft of the component but there are no tests yet. The team lead wants tests written before the PR can be merged, specifically covering the happy path (customer fills in the form and submits) and a validation path (submit is attempted with an empty required field, and an error message appears).

The component is straightforward: it renders labelled inputs and a submit button. When submitted with all fields valid, it calls an onSubmit callback with the collected data. When a required field is missing, it displays an inline validation message next to that field.

Output Specification

Write a test file CheckoutForm.test.tsx that tests the CheckoutForm component defined in the input below. The test file should cover:

1. A happy-path test: the user fills in all fields and clicks the submit button — verify that the onSubmit callback is called with the expected data.
2. A validation test: the user clicks submit without filling in the name field — verify that a validation error message appears.

Do not modify the component source. Only write the test file.

Input Files

The following files are provided as inputs. Extract them before beginning.

=============== FILE: src/CheckoutForm.tsx =============== import React, { useState } from 'react';

interface CheckoutData { customerName: string; email: string; address: string; }

interface CheckoutFormProps { onSubmit: (data: CheckoutData) => void; }

export function CheckoutForm({ onSubmit }: CheckoutFormProps) { const [customerName, setCustomerName] = useState(''); const [email, setEmail] = useState(''); const [address, setAddress] = useState(''); const [nameError, setNameError] = useState('');

const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!customerName.trim()) { setNameError('Name is required'); return; } setNameError(''); onSubmit({ customerName, email, address }); };

return ( <form onSubmit={handleSubmit} aria-label="Checkout form"> <div> <label htmlFor="customerName">Customer name</label> <input id="customerName" value={customerName} onChange={e => setCustomerName(e.target.value)} /> {nameError && <span role="alert">{nameError}</span>} </div> <div> <label htmlFor="email">Email address</label> <input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} /> </div> <div> <label htmlFor="address">Delivery address</label> <input id="address" value={address} onChange={e => setAddress(e.target.value)} /> </div> <button type="submit">Place Order</button> </form> ); }