From fe23085e0f8c256e3ab0419af129e8b7a7d15219 Mon Sep 17 00:00:00 2001
From: Experiments DB Dev <dev@experiments-db.local>
Date: Thu, 23 Apr 2026 10:41:17 -0400
Subject: [PATCH] fix: resolve DailyStatusForm test stall and add label
 accessibility

- Use module-level EMPTY_TEMPLATE constant as default prop to prevent
  useEffect infinite loop (new [] each render changed identity every cycle)
- Add htmlFor to date and dynamic field labels for proper a11y association
- Add role=alert to date error paragraph so tests can find it
- Update tests to pass a template with builtin fields (required by template-
  driven component design) and mock experimentsApi
- Add --max-old-space-size=8192 to test scripts to prevent OOM on full suite

All 72 frontend tests now pass across 7 suites.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/package.json                       |  4 ++--
 frontend/src/components/DailyStatusForm.jsx |  9 ++++----
 frontend/tests/DailyStatusForm.test.jsx     | 24 +++++++++++++++------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index bbf2455..cfac42d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,8 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "jest --runInBand --forceExit",
-    "test:coverage": "jest --runInBand --forceExit --coverage",
+    "test": "node --max-old-space-size=8192 node_modules/.bin/jest --runInBand --forceExit",
+    "test:coverage": "node --max-old-space-size=8192 node_modules/.bin/jest --runInBand --forceExit --coverage",
     "test:e2e": "playwright test"
   },
   "dependencies": {
diff --git a/frontend/src/components/DailyStatusForm.jsx b/frontend/src/components/DailyStatusForm.jsx
index 20bb2b6..f1f846f 100644
--- a/frontend/src/components/DailyStatusForm.jsx
+++ b/frontend/src/components/DailyStatusForm.jsx
@@ -6,6 +6,7 @@ import Alert from './ui/Alert';
 import { dailyStatusesApi, experimentsApi } from '../api/client';
 
 const BUILTIN_KEYS = new Set(['experiment_description', 'vitals', 'treatment', 'notes']);
+const EMPTY_TEMPLATE = [];
 
 // Maps field width % to a 12-column grid span
 function widthToSpan(pct) {
@@ -28,7 +29,7 @@ function getValue(status, field) {
   return status.custom_fields?.[field.fieldId] ?? '';
 }
 
-export default function DailyStatusForm({ existing, animalId, experimentId, template = [], onTemplateUpdate, onSuccess, onCancel, onRequestDelete, hasPrev, hasNext, onNavigate }) {
+export default function DailyStatusForm({ existing, animalId, experimentId, template = EMPTY_TEMPLATE, onTemplateUpdate, onSuccess, onCancel, onRequestDelete, hasPrev, hasNext, onNavigate }) {
   const today = format(new Date(), 'yyyy-MM-dd');
 
   // Active fields from template (date is always first and handled separately)
@@ -142,10 +143,10 @@ export default function DailyStatusForm({ existing, animalId, experimentId, temp
       <div className="grid grid-cols-12 gap-x-3 gap-y-2 mb-4">
         {/* Date — always full width */}
         <div className="col-span-12 flex items-center gap-2">
-          <label className="text-xs font-medium text-gray-500 whitespace-nowrap w-28 shrink-0 text-right">Date <span className="text-red-400">*</span></label>
+          <label htmlFor="date" className="text-xs font-medium text-gray-500 whitespace-nowrap w-28 shrink-0 text-right">Date <span className="text-red-400">*</span></label>
           <div className="w-36">
             <Input type="date" name="date" value={values.date} onChange={set('date')} required disabled={loading} />
-            {errors.date && <p className="text-xs text-red-500 mt-0.5">{errors.date}</p>}
+            {errors.date && <p role="alert" className="text-xs text-red-500 mt-0.5">{errors.date}</p>}
           </div>
         </div>
 
@@ -158,7 +159,7 @@ export default function DailyStatusForm({ existing, animalId, experimentId, temp
           const canSaveTag = experimentId && onTemplateUpdate && currentValue && !fieldTags.includes(currentValue) && !field.tagsDisabled;
           return (
             <div key={field.key} className={`col-span-${span} flex items-start gap-2`}>
-              <label className="text-xs font-medium text-gray-500 whitespace-nowrap w-28 shrink-0 text-right pt-1.5" title={field.label}>
+              <label htmlFor={field.key} className="text-xs font-medium text-gray-500 whitespace-nowrap w-28 shrink-0 text-right pt-1.5" title={field.label}>
                 {field.abbr || field.label}{field.unit ? <span className="font-normal text-gray-400"> ({field.unit})</span> : null}
               </label>
               <div className="flex-1 min-w-0">
diff --git a/frontend/tests/DailyStatusForm.test.jsx b/frontend/tests/DailyStatusForm.test.jsx
index 99ff51c..80ff05e 100644
--- a/frontend/tests/DailyStatusForm.test.jsx
+++ b/frontend/tests/DailyStatusForm.test.jsx
@@ -9,17 +9,27 @@ jest.mock('../src/api/client', () => ({
     create: jest.fn(),
     update: jest.fn(),
   },
+  experimentsApi: {
+    updateTemplate: jest.fn(),
+  },
 }));
 
 const ANIMAL_ID = 'animal-001';
 const onSuccess = jest.fn();
 const onCancel = jest.fn();
 
+const BUILTIN_TEMPLATE = [
+  { fieldId: 'f1', key: 'vitals', label: 'Vitals', type: 'textarea', builtin: true, active: true, width: 100 },
+  { fieldId: 'f2', key: 'treatment', label: 'Treatment', type: 'textarea', builtin: true, active: true, width: 100 },
+  { fieldId: 'f3', key: 'notes', label: 'Notes', type: 'textarea', builtin: true, active: true, width: 100 },
+  { fieldId: 'f4', key: 'experiment_description', label: 'Experiment Description', type: 'textarea', builtin: true, active: true, width: 100 },
+];
+
 beforeEach(() => jest.clearAllMocks());
 
 describe('DailyStatusForm', () => {
   it('renders date field (required) and optional fields', () => {
-    render(<DailyStatusForm animalId={ANIMAL_ID} onSuccess={onSuccess} onCancel={onCancel} />);
+    render(<DailyStatusForm animalId={ANIMAL_ID} template={BUILTIN_TEMPLATE} onSuccess={onSuccess} onCancel={onCancel} />);
     expect(screen.getByLabelText(/date/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/vitals/i)).toBeInTheDocument();
     expect(screen.getByLabelText(/treatment/i)).toBeInTheDocument();
@@ -28,13 +38,13 @@ describe('DailyStatusForm', () => {
   });
 
   it('pre-fills date with today by default', () => {
-    render(<DailyStatusForm animalId={ANIMAL_ID} onSuccess={onSuccess} onCancel={onCancel} />);
+    render(<DailyStatusForm animalId={ANIMAL_ID} template={BUILTIN_TEMPLATE} onSuccess={onSuccess} onCancel={onCancel} />);
     const today = new Date().toISOString().slice(0, 10);
     expect(screen.getByLabelText(/date/i)).toHaveValue(today);
   });
 
   it('shows error when date is cleared', async () => {
-    render(<DailyStatusForm animalId={ANIMAL_ID} onSuccess={onSuccess} onCancel={onCancel} />);
+    render(<DailyStatusForm animalId={ANIMAL_ID} template={BUILTIN_TEMPLATE} onSuccess={onSuccess} onCancel={onCancel} />);
     const dateInput = screen.getByLabelText(/date/i);
     await userEvent.clear(dateInput);
     fireEvent.click(screen.getByRole('button', { name: /log status/i }));
@@ -46,11 +56,10 @@ describe('DailyStatusForm', () => {
     const status = { id: 's-1', animal_id: ANIMAL_ID, date: '2024-06-01', vitals: 'HR 72' };
     client.dailyStatusesApi.create.mockResolvedValue(status);
 
-    render(<DailyStatusForm animalId={ANIMAL_ID} onSuccess={onSuccess} onCancel={onCancel} />);
+    render(<DailyStatusForm animalId={ANIMAL_ID} template={BUILTIN_TEMPLATE} onSuccess={onSuccess} onCancel={onCancel} />);
 
     const dateInput = screen.getByLabelText(/date/i);
-    await userEvent.clear(dateInput);
-    await userEvent.type(dateInput, '2024-06-01');
+    fireEvent.change(dateInput, { target: { value: '2024-06-01' } });
 
     await userEvent.type(screen.getByLabelText(/vitals/i), 'HR 72');
 
@@ -76,6 +85,7 @@ describe('DailyStatusForm', () => {
     render(
       <DailyStatusForm
         existing={existing}
+        template={BUILTIN_TEMPLATE}
         animalId={ANIMAL_ID}
         onSuccess={onSuccess}
         onCancel={onCancel}
@@ -86,7 +96,7 @@ describe('DailyStatusForm', () => {
   });
 
   it('calls onCancel when Cancel is clicked', () => {
-    render(<DailyStatusForm animalId={ANIMAL_ID} onSuccess={onSuccess} onCancel={onCancel} />);
+    render(<DailyStatusForm animalId={ANIMAL_ID} template={BUILTIN_TEMPLATE} onSuccess={onSuccess} onCancel={onCancel} />);
     fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
     expect(onCancel).toHaveBeenCalled();
   });