Experiments DB Dev
9535f86970
New ExperimentCalendar component added as a third view mode (List / Group / Calendar)
on the Experiment Detail page.
Backend:
- GET /api/experiments/:id/calendar?field=<fieldIdOrBuiltinKey>
Returns { field, days: { "YYYY-MM-DD": count } } where count = number of
subjects with a non-null/non-empty value for the chosen field on that date.
Supports both builtin fields (vitals, treatment, notes, experiment_description)
and custom fields addressed by fieldId UUID.
Frontend:
- ExperimentCalendar component: navigable monthly grid, field selector
(defaults to first field with "weight" in label, else first active field),
blue badges showing subject count per day, click to open modal with all
subjects' data for that day.
- Integrated into ExperimentDetail as displayMode "calendar", persisted
in localStorage alongside the existing list/group modes.
- experimentsApi.getCalendar() added to API client.
Tests:
- backend/tests/calendar.test.js: 8 unit tests (404, empty days, builtin
count, custom field count, whitespace ignored, multi-month, field echo,
missing param).
- frontend/tests/ExperimentCalendar.test.jsx: 13 RTL tests covering
rendering, default field selection, count badges, month navigation,
field-change re-fetch, day click modal, and multi-subject display.
All 47 backend + 13 calendar frontend tests passing.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
298 lines
11 KiB
React
298 lines
11 KiB
React
import React from 'react';
|
||
import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
|
||
import ExperimentCalendar from '../src/components/ExperimentCalendar';
|
||
import { experimentsApi } from '../src/api/client';
|
||
|
||
jest.mock('../src/api/client', () => ({
|
||
experimentsApi: {
|
||
getCalendar: jest.fn(),
|
||
},
|
||
}));
|
||
|
||
const EXP_ID = 'aaaaaaaa-0000-0000-0000-000000000001';
|
||
|
||
const TEMPLATE = [
|
||
{ fieldId: '00000000-0000-0000-0000-000000000002', key: 'vitals', label: 'Vitals', active: true, builtin: true },
|
||
{ fieldId: 'ww000000-0000-0000-0000-000000000099', key: 'weights', label: 'Weights', active: true, builtin: false },
|
||
{ fieldId: 'zz000000-0000-0000-0000-000000000001', key: 'notes', label: 'Notes', active: false, builtin: true },
|
||
];
|
||
|
||
const ANIMALS = [
|
||
{ id: 'a1000000-0000-0000-0000-000000000001', animal_name: 'Rat A', animal_id_string: 'R001' },
|
||
{ id: 'a2000000-0000-0000-0000-000000000002', animal_name: 'Rat B', animal_id_string: 'R002' },
|
||
];
|
||
|
||
function todayYYYYMM() {
|
||
const d = new Date();
|
||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
|
||
}
|
||
|
||
function makeStatus(animalId, date, customFields = {}) {
|
||
return {
|
||
id: `s-${animalId}-${date}`,
|
||
animal_id: animalId,
|
||
date: `${date}T00:00:00.000Z`,
|
||
experiment_description: null,
|
||
vitals: null,
|
||
treatment: null,
|
||
notes: null,
|
||
custom_fields: customFields,
|
||
};
|
||
}
|
||
|
||
beforeEach(() => {
|
||
jest.clearAllMocks();
|
||
experimentsApi.getCalendar.mockResolvedValue({ field: 'ww000000-0000-0000-0000-000000000099', days: {} });
|
||
});
|
||
|
||
// ── Rendering ──────────────────────────────────────────────────────────────────
|
||
|
||
describe('ExperimentCalendar rendering', () => {
|
||
it('renders the current month and year', async () => {
|
||
render(
|
||
<ExperimentCalendar
|
||
experimentId={EXP_ID}
|
||
template={TEMPLATE}
|
||
allStatuses={[]}
|
||
animals={ANIMALS}
|
||
/>,
|
||
);
|
||
const now = new Date();
|
||
const monthLabel = now.toLocaleString('en-US', { month: 'long', year: 'numeric' });
|
||
await waitFor(() => {
|
||
expect(screen.getByText(monthLabel)).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
it('renders day-of-week headers', async () => {
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
for (const d of ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']) {
|
||
expect(screen.getByText(d)).toBeInTheDocument();
|
||
}
|
||
});
|
||
|
||
it('renders the field selector with active template fields only', async () => {
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
await waitFor(() => expect(screen.getByTestId('field-select')).toBeInTheDocument());
|
||
const options = screen.getAllByRole('option');
|
||
const labels = options.map((o) => o.textContent);
|
||
expect(labels).toContain('Vitals');
|
||
expect(labels).toContain('Weights');
|
||
expect(labels).not.toContain('Notes'); // inactive
|
||
});
|
||
});
|
||
|
||
// ── Default field selection ────────────────────────────────────────────────────
|
||
|
||
describe('default field selection', () => {
|
||
it('defaults to the field whose label contains "weight"', async () => {
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
await waitFor(() => {
|
||
expect(experimentsApi.getCalendar).toHaveBeenCalledWith(
|
||
EXP_ID,
|
||
'ww000000-0000-0000-0000-000000000099',
|
||
);
|
||
});
|
||
});
|
||
|
||
it('defaults to first field if none contains "weight"', async () => {
|
||
const noWeightTemplate = [
|
||
{ fieldId: 'ff000000-0000-0000-0000-000000000001', key: 'treatment', label: 'Treatment', active: true, builtin: true },
|
||
{ fieldId: 'ff000000-0000-0000-0000-000000000002', key: 'vitals', label: 'Vitals', active: true, builtin: true },
|
||
];
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={noWeightTemplate} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
await waitFor(() => {
|
||
expect(experimentsApi.getCalendar).toHaveBeenCalledWith(EXP_ID, 'treatment');
|
||
});
|
||
});
|
||
});
|
||
|
||
// ── Count badges ──────────────────────────────────────────────────────────────
|
||
|
||
describe('count badges', () => {
|
||
it('shows a count badge on days returned by the API', async () => {
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||
const day = String(today.getDate()).padStart(2, '0');
|
||
const dateStr = `${year}-${month}-${day}`;
|
||
|
||
experimentsApi.getCalendar.mockResolvedValue({
|
||
field: 'ww000000-0000-0000-0000-000000000099',
|
||
days: { [dateStr]: 3 },
|
||
});
|
||
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByTestId(`count-${dateStr}`)).toHaveTextContent('3');
|
||
});
|
||
});
|
||
|
||
it('does not show count badge on days with no data', async () => {
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||
const day = String(today.getDate()).padStart(2, '0');
|
||
const dateStr = `${year}-${month}-${day}`;
|
||
|
||
experimentsApi.getCalendar.mockResolvedValue({ field: 'vitals', days: {} });
|
||
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
|
||
await waitFor(() => expect(experimentsApi.getCalendar).toHaveBeenCalled());
|
||
expect(screen.queryByTestId(`count-${dateStr}`)).not.toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
// ── Month navigation ──────────────────────────────────────────────────────────
|
||
|
||
describe('month navigation', () => {
|
||
it('moves to the previous month on ‹ click', async () => {
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
const now = new Date();
|
||
const prev = new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||
const prevLabel = prev.toLocaleString('en-US', { month: 'long', year: 'numeric' });
|
||
|
||
fireEvent.click(screen.getByLabelText('Previous month'));
|
||
await waitFor(() => expect(screen.getByText(prevLabel)).toBeInTheDocument());
|
||
});
|
||
|
||
it('moves to the next month on › click', async () => {
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
const now = new Date();
|
||
const next = new Date(now.getFullYear(), now.getMonth() + 1, 1);
|
||
const nextLabel = next.toLocaleString('en-US', { month: 'long', year: 'numeric' });
|
||
|
||
fireEvent.click(screen.getByLabelText('Next month'));
|
||
await waitFor(() => expect(screen.getByText(nextLabel)).toBeInTheDocument());
|
||
});
|
||
|
||
it('re-fetches calendar data after field change', async () => {
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
await waitFor(() => expect(experimentsApi.getCalendar).toHaveBeenCalledTimes(1));
|
||
|
||
fireEvent.change(screen.getByTestId('field-select'), { target: { value: 'vitals' } });
|
||
|
||
await waitFor(() => expect(experimentsApi.getCalendar).toHaveBeenCalledTimes(2));
|
||
expect(experimentsApi.getCalendar).toHaveBeenLastCalledWith(EXP_ID, 'vitals');
|
||
});
|
||
});
|
||
|
||
// ── Day click → modal ─────────────────────────────────────────────────────────
|
||
|
||
describe('day click modal', () => {
|
||
it('opens a modal showing subject data when a day with data is clicked', async () => {
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||
const day = String(today.getDate()).padStart(2, '0');
|
||
const dateStr = `${year}-${month}-${day}`;
|
||
|
||
experimentsApi.getCalendar.mockResolvedValue({
|
||
field: 'ww000000-0000-0000-0000-000000000099',
|
||
days: { [dateStr]: 1 },
|
||
});
|
||
|
||
const statuses = [
|
||
makeStatus('a1000000-0000-0000-0000-000000000001', dateStr, {
|
||
'ww000000-0000-0000-0000-000000000099': '325',
|
||
}),
|
||
];
|
||
|
||
render(
|
||
<ExperimentCalendar
|
||
experimentId={EXP_ID}
|
||
template={TEMPLATE}
|
||
allStatuses={statuses}
|
||
animals={ANIMALS}
|
||
/>,
|
||
);
|
||
|
||
await waitFor(() => expect(screen.getByTestId(`day-${dateStr}`)).not.toBeDisabled());
|
||
|
||
fireEvent.click(screen.getByTestId(`day-${dateStr}`));
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByText('Rat A')).toBeInTheDocument();
|
||
expect(screen.getByText('325')).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
it('does not open a modal when clicking a day without data', async () => {
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||
const day = String(today.getDate()).padStart(2, '0');
|
||
const dateStr = `${year}-${month}-${day}`;
|
||
|
||
experimentsApi.getCalendar.mockResolvedValue({ field: 'vitals', days: {} });
|
||
|
||
render(
|
||
<ExperimentCalendar experimentId={EXP_ID} template={TEMPLATE} allStatuses={[]} animals={ANIMALS} />,
|
||
);
|
||
|
||
await waitFor(() => expect(experimentsApi.getCalendar).toHaveBeenCalled());
|
||
|
||
// Day button is disabled — click should not open modal
|
||
const dayBtn = screen.getByTestId(`day-${dateStr}`);
|
||
expect(dayBtn).toBeDisabled();
|
||
fireEvent.click(dayBtn);
|
||
|
||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||
});
|
||
|
||
it('shows all subjects with data on the selected day', async () => {
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||
const day = String(today.getDate()).padStart(2, '0');
|
||
const dateStr = `${year}-${month}-${day}`;
|
||
|
||
experimentsApi.getCalendar.mockResolvedValue({
|
||
field: 'ww000000-0000-0000-0000-000000000099',
|
||
days: { [dateStr]: 2 },
|
||
});
|
||
|
||
const statuses = [
|
||
makeStatus('a1000000-0000-0000-0000-000000000001', dateStr, { 'ww000000-0000-0000-0000-000000000099': '320' }),
|
||
makeStatus('a2000000-0000-0000-0000-000000000002', dateStr, { 'ww000000-0000-0000-0000-000000000099': '310' }),
|
||
];
|
||
|
||
render(
|
||
<ExperimentCalendar
|
||
experimentId={EXP_ID}
|
||
template={TEMPLATE}
|
||
allStatuses={statuses}
|
||
animals={ANIMALS}
|
||
/>,
|
||
);
|
||
|
||
await waitFor(() => expect(screen.getByTestId(`day-${dateStr}`)).not.toBeDisabled());
|
||
fireEvent.click(screen.getByTestId(`day-${dateStr}`));
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByText('Rat A')).toBeInTheDocument();
|
||
expect(screen.getByText('Rat B')).toBeInTheDocument();
|
||
});
|
||
});
|
||
});
|