@pennyfarthing/benchmark 10.2.0

package/scenarios/tea/checkout-component-tests.yaml

@@ -0,0 +1,596 @@
+---
+# Scenario: React Checkout Component Test Suite
+# Category: tea
+# Purpose: Test frontend component test writing skills
+
+id: tea-002
+name: checkout-component-tests
+title: "React Checkout Component Test Suite"
+category: tea
+difficulty: easy  # Empirical: control mean 82.35 (easiest)
+version: "1.0"
+
+description: |
+  An e-commerce checkout component with form validation, payment integration,
+  and address autocomplete. TEA must write a comprehensive test suite covering
+  user interactions, error states, loading states, and accessibility. Tests
+  frontend testing expertise and React Testing Library proficiency.
+
+purpose: |
+  This scenario tests frontend testing philosophy. A "thorough" persona might
+  write more edge case tests. A "pragmatic" persona might focus on happy paths.
+  Measures test coverage strategy and React testing patterns.
+
+prompt: |
+  You are a Test Engineer reviewing an e-commerce checkout component.
+  Write a comprehensive test suite using React Testing Library and Vitest.
+
+  The component has these features:
+  - Multi-step form (shipping, payment, review)
+  - Form validation with inline error messages
+  - Address autocomplete integration
+  - Credit card input with formatting
+  - Loading states during submission
+  - Order confirmation display
+  - Error handling for failed payments
+
+  Write tests covering:
+  1. Happy path - complete checkout flow
+  2. Form validation for each field
+  3. Error states and recovery
+  4. Loading and disabled states
+  5. Accessibility requirements
+  6. Edge cases (empty cart, session timeout, etc.)
+
+  For each test:
+  1. Use descriptive test names
+  2. Follow AAA pattern (Arrange, Act, Assert)
+  3. Use Testing Library best practices (getByRole, userEvent)
+  4. Include accessibility checks
+
+  IMPORTANT: Focus on behavior, not implementation details.
+
+code:
+  language: typescript
+  filename: Checkout.tsx
+  content: |
+    import React, { useState, useEffect } from 'react';
+    import { useCart } from './CartContext';
+    import { usePayment } from './PaymentContext';
+
+    interface Address {
+      street: string;
+      city: string;
+      state: string;
+      zip: string;
+      country: string;
+    }
+
+    interface PaymentInfo {
+      cardNumber: string;
+      expiry: string;
+      cvv: string;
+      nameOnCard: string;
+    }
+
+    type Step = 'shipping' | 'payment' | 'review' | 'confirmation';
+
+    interface CheckoutProps {
+      onComplete?: (orderId: string) => void;
+      onCancel?: () => void;
+    }
+
+    export const Checkout: React.FC<CheckoutProps> = ({ onComplete, onCancel }) => {
+      const { items, total, clearCart } = useCart();
+      const { processPayment } = usePayment();
+
+      const [step, setStep] = useState<Step>('shipping');
+      const [shipping, setShipping] = useState<Address>({
+        street: '', city: '', state: '', zip: '', country: 'US'
+      });
+      const [payment, setPayment] = useState<PaymentInfo>({
+        cardNumber: '', expiry: '', cvv: '', nameOnCard: ''
+      });
+      const [errors, setErrors] = useState<Record<string, string>>({});
+      const [isLoading, setIsLoading] = useState(false);
+      const [orderId, setOrderId] = useState<string | null>(null);
+      const [submitError, setSubmitError] = useState<string | null>(null);
+
+      const validateShipping = (): boolean => {
+        const newErrors: Record<string, string> = {};
+
+        if (!shipping.street.trim()) newErrors.street = 'Street address is required';
+        if (!shipping.city.trim()) newErrors.city = 'City is required';
+        if (!shipping.state.trim()) newErrors.state = 'State is required';
+        if (!shipping.zip.match(/^\d{5}(-\d{4})?$/)) newErrors.zip = 'Valid ZIP code required';
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+      };
+
+      const validatePayment = (): boolean => {
+        const newErrors: Record<string, string> = {};
+
+        if (!payment.cardNumber.replace(/\s/g, '').match(/^\d{16}$/)) {
+          newErrors.cardNumber = 'Valid 16-digit card number required';
+        }
+        if (!payment.expiry.match(/^(0[1-9]|1[0-2])\/\d{2}$/)) {
+          newErrors.expiry = 'Valid expiry (MM/YY) required';
+        }
+        if (!payment.cvv.match(/^\d{3,4}$/)) {
+          newErrors.cvv = 'Valid CVV required';
+        }
+        if (!payment.nameOnCard.trim()) {
+          newErrors.nameOnCard = 'Name on card is required';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+      };
+
+      const handleShippingSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (validateShipping()) {
+          setStep('payment');
+        }
+      };
+
+      const handlePaymentSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (validatePayment()) {
+          setStep('review');
+        }
+      };
+
+      const handlePlaceOrder = async () => {
+        setIsLoading(true);
+        setSubmitError(null);
+
+        try {
+          const result = await processPayment({
+            amount: total,
+            card: payment,
+            shipping: shipping,
+            items: items
+          });
+
+          setOrderId(result.orderId);
+          clearCart();
+          setStep('confirmation');
+          onComplete?.(result.orderId);
+        } catch (error) {
+          setSubmitError(error instanceof Error ? error.message : 'Payment failed');
+        } finally {
+          setIsLoading(false);
+        }
+      };
+
+      if (items.length === 0 && step !== 'confirmation') {
+        return (
+          <div role="alert" aria-live="polite">
+            <h2>Your cart is empty</h2>
+            <button onClick={onCancel}>Continue Shopping</button>
+          </div>
+        );
+      }
+
+      return (
+        <div className="checkout" aria-label="Checkout">
+          <nav aria-label="Checkout progress">
+            <ol>
+              <li aria-current={step === 'shipping' ? 'step' : undefined}>
+                Shipping
+              </li>
+              <li aria-current={step === 'payment' ? 'step' : undefined}>
+                Payment
+              </li>
+              <li aria-current={step === 'review' ? 'step' : undefined}>
+                Review
+              </li>
+            </ol>
+          </nav>
+
+          {step === 'shipping' && (
+            <form onSubmit={handleShippingSubmit} aria-label="Shipping information">
+              <h2>Shipping Address</h2>
+
+              <div>
+                <label htmlFor="street">Street Address</label>
+                <input
+                  id="street"
+                  type="text"
+                  value={shipping.street}
+                  onChange={(e) => setShipping({ ...shipping, street: e.target.value })}
+                  aria-invalid={!!errors.street}
+                  aria-describedby={errors.street ? 'street-error' : undefined}
+                />
+                {errors.street && <span id="street-error" role="alert">{errors.street}</span>}
+              </div>
+
+              <div>
+                <label htmlFor="city">City</label>
+                <input
+                  id="city"
+                  type="text"
+                  value={shipping.city}
+                  onChange={(e) => setShipping({ ...shipping, city: e.target.value })}
+                  aria-invalid={!!errors.city}
+                  aria-describedby={errors.city ? 'city-error' : undefined}
+                />
+                {errors.city && <span id="city-error" role="alert">{errors.city}</span>}
+              </div>
+
+              <div>
+                <label htmlFor="state">State</label>
+                <select
+                  id="state"
+                  value={shipping.state}
+                  onChange={(e) => setShipping({ ...shipping, state: e.target.value })}
+                  aria-invalid={!!errors.state}
+                >
+                  <option value="">Select state</option>
+                  <option value="CA">California</option>
+                  <option value="NY">New York</option>
+                  <option value="TX">Texas</option>
+                </select>
+                {errors.state && <span id="state-error" role="alert">{errors.state}</span>}
+              </div>
+
+              <div>
+                <label htmlFor="zip">ZIP Code</label>
+                <input
+                  id="zip"
+                  type="text"
+                  value={shipping.zip}
+                  onChange={(e) => setShipping({ ...shipping, zip: e.target.value })}
+                  aria-invalid={!!errors.zip}
+                  aria-describedby={errors.zip ? 'zip-error' : undefined}
+                />
+                {errors.zip && <span id="zip-error" role="alert">{errors.zip}</span>}
+              </div>
+
+              <div className="form-actions">
+                <button type="button" onClick={onCancel}>Cancel</button>
+                <button type="submit">Continue to Payment</button>
+              </div>
+            </form>
+          )}
+
+          {step === 'payment' && (
+            <form onSubmit={handlePaymentSubmit} aria-label="Payment information">
+              <h2>Payment Details</h2>
+
+              <div>
+                <label htmlFor="cardNumber">Card Number</label>
+                <input
+                  id="cardNumber"
+                  type="text"
+                  inputMode="numeric"
+                  maxLength={19}
+                  value={payment.cardNumber}
+                  onChange={(e) => setPayment({ ...payment, cardNumber: e.target.value })}
+                  aria-invalid={!!errors.cardNumber}
+                />
+                {errors.cardNumber && <span role="alert">{errors.cardNumber}</span>}
+              </div>
+
+              <div>
+                <label htmlFor="expiry">Expiry (MM/YY)</label>
+                <input
+                  id="expiry"
+                  type="text"
+                  maxLength={5}
+                  value={payment.expiry}
+                  onChange={(e) => setPayment({ ...payment, expiry: e.target.value })}
+                  aria-invalid={!!errors.expiry}
+                />
+                {errors.expiry && <span role="alert">{errors.expiry}</span>}
+              </div>
+
+              <div>
+                <label htmlFor="cvv">CVV</label>
+                <input
+                  id="cvv"
+                  type="text"
+                  inputMode="numeric"
+                  maxLength={4}
+                  value={payment.cvv}
+                  onChange={(e) => setPayment({ ...payment, cvv: e.target.value })}
+                  aria-invalid={!!errors.cvv}
+                />
+                {errors.cvv && <span role="alert">{errors.cvv}</span>}
+              </div>
+
+              <div>
+                <label htmlFor="nameOnCard">Name on Card</label>
+                <input
+                  id="nameOnCard"
+                  type="text"
+                  value={payment.nameOnCard}
+                  onChange={(e) => setPayment({ ...payment, nameOnCard: e.target.value })}
+                  aria-invalid={!!errors.nameOnCard}
+                />
+                {errors.nameOnCard && <span role="alert">{errors.nameOnCard}</span>}
+              </div>
+
+              <div className="form-actions">
+                <button type="button" onClick={() => setStep('shipping')}>Back</button>
+                <button type="submit">Review Order</button>
+              </div>
+            </form>
+          )}
+
+          {step === 'review' && (
+            <div aria-label="Order review">
+              <h2>Review Your Order</h2>
+
+              <section aria-label="Order items">
+                <h3>Items ({items.length})</h3>
+                <ul>
+                  {items.map(item => (
+                    <li key={item.id}>{item.name} - ${item.price.toFixed(2)}</li>
+                  ))}
+                </ul>
+                <p><strong>Total: ${total.toFixed(2)}</strong></p>
+              </section>
+
+              <section aria-label="Shipping address">
+                <h3>Shipping To</h3>
+                <address>
+                  {shipping.street}<br />
+                  {shipping.city}, {shipping.state} {shipping.zip}
+                </address>
+              </section>
+
+              <section aria-label="Payment method">
+                <h3>Payment</h3>
+                <p>Card ending in {payment.cardNumber.slice(-4)}</p>
+              </section>
+
+              {submitError && (
+                <div role="alert" aria-live="assertive" className="error">
+                  {submitError}
+                </div>
+              )}
+
+              <div className="form-actions">
+                <button type="button" onClick={() => setStep('payment')} disabled={isLoading}>
+                  Back
+                </button>
+                <button
+                  type="button"
+                  onClick={handlePlaceOrder}
+                  disabled={isLoading}
+                  aria-busy={isLoading}
+                >
+                  {isLoading ? 'Processing...' : 'Place Order'}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {step === 'confirmation' && orderId && (
+            <div role="status" aria-live="polite" aria-label="Order confirmation">
+              <h2>Order Confirmed!</h2>
+              <p>Your order number is: <strong>{orderId}</strong></p>
+              <button onClick={onCancel}>Continue Shopping</button>
+            </div>
+          )}
+        </div>
+      );
+    };
+
+# =============================================================================
+# BASELINE TEST SCENARIOS (minimum expected to cover)
+# =============================================================================
+
+baseline_issues:
+  happy_path:
+    - id: COMPLETE_CHECKOUT_FLOW
+      description: "User can complete full checkout from shipping to confirmation"
+
+    - id: STEP_NAVIGATION
+      description: "User can navigate forward and back between steps"
+
+    - id: ORDER_CONFIRMATION
+      description: "Order confirmation displays correct order ID"
+
+    - id: CART_CLEARED
+      description: "Cart is cleared after successful order"
+
+  validation:
+    - id: SHIPPING_VALIDATION
+      description: "All shipping fields show validation errors when empty"
+
+    - id: ZIP_FORMAT_VALIDATION
+      description: "ZIP code validates correct format (12345 or 12345-6789)"
+
+    - id: CARD_NUMBER_VALIDATION
+      description: "Card number validates 16 digits"
+
+    - id: EXPIRY_FORMAT_VALIDATION
+      description: "Expiry validates MM/YY format"
+
+    - id: CVV_VALIDATION
+      description: "CVV validates 3-4 digits"
+
+  error_states:
+    - id: PAYMENT_FAILURE
+      description: "Payment error is displayed to user"
+
+    - id: ERROR_RECOVERY
+      description: "User can retry after payment failure"
+
+    - id: ERROR_CLEARED_ON_RETRY
+      description: "Previous error cleared when retrying"
+
+  loading_states:
+    - id: LOADING_INDICATOR
+      description: "Loading state shown during payment processing"
+
+    - id: BUTTONS_DISABLED
+      description: "Buttons disabled during loading"
+
+  edge_cases:
+    - id: EMPTY_CART
+      description: "Empty cart shows appropriate message and redirect"
+
+    - id: CALLBACK_CALLED
+      description: "onComplete callback called with order ID"
+
+    - id: CANCEL_CALLBACK
+      description: "onCancel callback works correctly"
+
+  accessibility:
+    - id: FORM_LABELS
+      description: "All inputs have associated labels"
+
+    - id: ERROR_ANNOUNCEMENTS
+      description: "Errors announced to screen readers (role=alert)"
+
+    - id: PROGRESS_INDICATOR
+      description: "Current step indicated in navigation"
+
+    - id: LOADING_ANNOUNCED
+      description: "Loading state announced (aria-busy)"
+
+# =============================================================================
+# BONUS TEST SCENARIOS
+# =============================================================================
+
+bonus_issues:
+  accessibility:
+    - id: KEYBOARD_NAVIGATION
+      description: "Full checkout completable via keyboard only"
+
+    - id: FOCUS_MANAGEMENT
+      description: "Focus moves appropriately between steps"
+
+    - id: ERROR_FOCUS
+      description: "Focus moves to first error on validation failure"
+
+  edge_cases:
+    - id: WHITESPACE_ONLY_INPUT
+      description: "Whitespace-only inputs treated as empty"
+
+    - id: PASTE_HANDLING
+      description: "Pasted card numbers handled correctly"
+
+    - id: RAPID_SUBMIT
+      description: "Rapid form submissions don't cause issues"
+
+  integration:
+    - id: CONTEXT_INTEGRATION
+      description: "Tests verify cart and payment context integration"
+
+    - id: ASYNC_TIMING
+      description: "Tests handle async operations correctly"
+
+  visual:
+    - id: CARD_LAST_4
+      description: "Only last 4 digits of card shown in review"
+
+    - id: TOTAL_FORMAT
+      description: "Total displayed with correct currency format"
+
+# =============================================================================
+# SCORING
+# =============================================================================
+
+scoring:
+  total_baseline_scenarios: 22
+  total_bonus_scenarios: 14
+
+  categories:
+    - name: coverage
+      weight: 40
+      criteria:
+        - id: BASELINE_COVERED
+          description: "All baseline test scenarios covered"
+          points: 30
+        - id: BONUS_COVERED
+          description: "Additional valuable test scenarios"
+          points: 10
+
+    - name: quality
+      weight: 30
+      criteria:
+        - id: TESTING_LIBRARY_PRACTICES
+          description: "Uses getByRole, userEvent, proper queries"
+          points: 10
+        - id: TEST_ISOLATION
+          description: "Tests are independent and isolated"
+          points: 10
+        - id: READABLE_ASSERTIONS
+          description: "Clear test names and assertions"
+          points: 10
+
+    - name: accessibility_testing
+      weight: 15
+      criteria:
+        - id: A11Y_QUERIES
+          description: "Uses accessible queries (getByRole, getByLabelText)"
+          points: 8
+        - id: A11Y_ASSERTIONS
+          description: "Tests accessibility attributes"
+          points: 7
+
+    - name: persona
+      weight: 15
+      criteria:
+        - id: CHARACTER_CONSISTENCY
+          description: "Stays in character throughout"
+          points: 8
+        - id: PERSONA_VALUE_ADD
+          description: "Persona enhances test documentation"
+          points: 7
+
+# =============================================================================
+# PERSONA INFLUENCE
+# =============================================================================
+
+persona_influence:
+  dimensions:
+    - name: test_strategy
+      description: "Overall testing approach"
+      spectrum:
+        happy_path_first: "Tests main flows, then edge cases"
+        edge_case_focused: "Emphasizes boundary conditions"
+        risk_based: "Tests based on failure likelihood"
+
+    - name: mock_approach
+      description: "How mocking is handled"
+      spectrum:
+        minimal: "Mocks only external dependencies"
+        moderate: "Mocks contexts and hooks"
+        extensive: "Mocks for isolation"
+
+    - name: documentation_style
+      description: "How tests are documented"
+      spectrum:
+        terse: "Minimal test descriptions"
+        descriptive: "Clear describe/it blocks"
+        verbose: "Extensive comments and docs"
+
+expected_tendencies:
+  discworld_tea:
+    character: "Igor"
+    expected_traits:
+      - "Thorough - should cover edge cases"
+      - "Practical - focuses on what breaks"
+      - "May have unusual test names"
+    coverage_prediction: "high"
+
+  star_trek_tea:
+    character: "Scotty"
+    expected_traits:
+      - "Systematic - organized test structure"
+      - "May over-test internals"
+      - "Clear documentation"
+    coverage_prediction: "high"
+
+  control_tea:
+    character: "None (baseline)"
+    expected_traits:
+      - "Standard testing approach"
+    coverage_prediction: "baseline reference"