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

feat(export): modal becomes X / Data / Group by pickers, subjects as columns

Browse Source
This commit is contained in:
Experiments DB Dev
2026-07-19 15:05:38 -04:00
parent 39a5a4ec0c
commit 6f23f83bc8
2 changed files with 89 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/tests/ExportDataModal.test.jsx
+35 -58
View File
@@ -12,8 +12,9 @@ const animals = [
{ id: 'a2', animal_name: 'Beta', animal_id_string: 'R-002', subject_info: { grp: 'Drug' } },
];
const statuses = [
{ animal_id: 'a1', date: '2026-07-01T00:00:00.000Z', analysis_summary: { total: 5 } },
{ animal_id: 'a2', date: '2026-07-01T00:00:00.000Z', analysis_summary: { total: 9 } },
{ animal_id: 'a1', date: '2026-07-01T00:00:00Z', analysis_summary: { total: 5, success_rate: 0.5 } },
{ animal_id: 'a1', date: '2026-07-02T00:00:00Z', analysis_summary: { total: 7, success_rate: 0.7 } },
{ animal_id: 'a2', date: '2026-07-01T00:00:00Z', analysis_summary: { total: 9, success_rate: 0.9 } },
];
const subjectTemplate = [{ fieldId: 'grp', label: 'Group', active: true }];
@@ -22,12 +23,9 @@ beforeEach(() => {
client.experimentsApi.getDailyStatuses.mockResolvedValue(statuses);
});
// Intercepts the Blob passed to URL.createObjectURL during handleExport so tests
// can inspect the actual CSV text produced, rather than inferring it from the
// <select>'s DOM value (which can be misleading — see the coercion test below).
// Also stubs anchor .click() — jsdom treats a real click on an <a href="blob:...">
// as a navigation attempt, which it doesn't implement; that throws asynchronously
// (after the test has moved on) and can flakily fail an unrelated later test.
// Intercept the Blob handed to URL.createObjectURL so tests can read the real CSV.
// Also stub anchor.click() — jsdom treats a click on <a href="blob:..."> as an
// unimplemented navigation that throws async and can flake a later test.
function mockDownload() {
let blob = null;
const origCreate = global.URL.createObjectURL;
@@ -38,12 +36,8 @@ function mockDownload() {
window.HTMLAnchorElement.prototype.click = jest.fn();
return {
getBlob: () => blob,
// handleExport schedules `setTimeout(() => URL.revokeObjectURL(url), 0)`; flush
// that pending macrotask before unmocking, or it fires after restore() has put
// back the (non-existent, in jsdom) original revokeObjectURL and throws async —
// an error jest attributes to whatever test happens to run next.
restore: async () => {
await new Promise((r) => setTimeout(r, 0));
await new Promise((r) => setTimeout(r, 0)); // flush handleExport's setTimeout revoke
global.URL.createObjectURL = origCreate;
global.URL.revokeObjectURL = origRevoke;
window.HTMLAnchorElement.prototype.click = origClick;
@@ -76,61 +70,44 @@ function renderModal(props = {}) {
}
describe('ExportDataModal', () => {
it('defaults to Rows=Date, Columns=Subject and shows the preview', async () => {
it('renders X / Data / Group by pickers; X defaults to Date', async () => {
renderModal();
expect(await screen.findByLabelText('Rows')).toHaveValue('date');
expect(screen.getByLabelText('Columns')).toHaveValue('subject');
await waitFor(() => expect(screen.getByText(/1 date.*2 subjects/i)).toBeInTheDocument());
});
it('hides the Group by control until Subject is an axis', async () => {
renderModal();
await screen.findByLabelText('Rows');
// subject is a column by default -> Group by visible
expect(screen.getByLabelText('Group by')).toBeInTheDocument();
// move subject off both axes: Rows=Date, Columns=Parameter -> subject pinned
fireEvent.change(screen.getByLabelText('Columns'), { target: { value: 'parameter' } });
await waitFor(() => expect(screen.queryByLabelText('Group by')).not.toBeInTheDocument());
});
it('keeps row and column dimensions distinct', async () => {
renderModal();
const rows = await screen.findByLabelText('Rows');
fireEvent.change(rows, { target: { value: 'subject' } }); // collides with column=subject
await waitFor(() => expect(screen.getByLabelText('Columns')).not.toHaveValue('subject'));
});
it('defaults Group by to None when groupField is __none__, and the exported CSV has no Group row (Issue-1 regression guard: default export reproduces today\'s export)', async () => {
const dl = mockDownload();
renderModal({ groupField: '__none__' });
await screen.findByLabelText('Rows');
expect(await screen.findByLabelText('X axis (rows)')).toHaveValue('__date__');
expect(screen.getByLabelText('Data (cells)')).toBeInTheDocument();
expect(screen.getByLabelText('Group by')).toHaveValue('__none__');
await waitFor(() => expect(screen.getByText(/1 date/i)).toBeInTheDocument());
await waitFor(() => expect(screen.getByText(/2 rows × 2 subjects/i)).toBeInTheDocument());
});
it('default export (X=Date, Data=Total attempts) has subject columns, date rows, blank where missing', async () => {
const dl = mockDownload();
renderModal();
await screen.findByLabelText('X axis (rows)');
await waitFor(() => expect(screen.getByText(/2 rows/i)).toBeInTheDocument());
fireEvent.click(screen.getByText('Export CSV'));
const text = await readBlobText(dl.getBlob());
expect(text).not.toMatch(/^Group,/m);
expect(text).toBe('Data,Total attempts\n\nDate,Alpha,Beta\n2026-07-01,5,9\n2026-07-02,7,');
await dl.restore();
});
it('defaults Group by to the saved field when it is a valid active subject field', async () => {
renderModal({ groupField: 'grp' });
await screen.findByLabelText('Rows');
expect(screen.getByLabelText('Group by')).toHaveValue('grp');
});
it('coerces Group by to None when the saved field no longer exists in subjectTemplate, so the export carries no stray Group row (Issue-2 guard)', async () => {
// Note: asserting the <select>'s DOM .value here would be misleading — React's
// controlled <select> falls back to selecting the first <option> ("__none__")
// whenever the given value matches no option, regardless of whether the
// component actually validated/coerced its internal state. So we assert the
// real behavioral effect (the exported CSV) instead.
it('switching X to # Days Reach makes rows the day ordinals', async () => {
const dl = mockDownload();
renderModal({ groupField: 'ghost-field' });
await screen.findByLabelText('Rows');
await waitFor(() => expect(screen.getByText(/1 date/i)).toBeInTheDocument());
renderModal();
fireEvent.change(await screen.findByLabelText('X axis (rows)'), { target: { value: '__days__' } });
await waitFor(() => expect(screen.getByText(/2 rows/i)).toBeInTheDocument());
fireEvent.click(screen.getByText('Export CSV'));
const text = await readBlobText(dl.getBlob());
expect(text).not.toMatch(/^Group,/m);
expect(text).toBe('Data,Total attempts\n\n# Days Reach,Alpha,Beta\n1,5,9\n2,7,');
await dl.restore();
});
it('a valid group field adds a Group row and clusters subjects', async () => {
const dl = mockDownload();
renderModal({ groupField: 'grp' });
await screen.findByLabelText('X axis (rows)');
await waitFor(() => expect(screen.getByText(/2 rows/i)).toBeInTheDocument());
fireEvent.click(screen.getByText('Export CSV'));
const text = await readBlobText(dl.getBlob());
expect(text).toMatch(/^Group,Control,Drug$/m);
await dl.restore();
});
});