samsam2610/experiments-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: resolve DailyStatusForm test stall and add label accessibility

Browse Source 
- 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>
This commit is contained in:
Experiments DB Dev
2026-04-23 10:41:17 -04:00
parent 78fe3f68cc
commit fe23085e0f
3 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/DailyStatusForm.jsx
+5 -4
View File
@@ -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">