26530955228

Committed 27 May 2026 06:34PM UTC coverage: 17.321% (-8.4%) from 25.73%

Build # 26530955228

Build Type

Pull #1607

github

Committed by

web-flow

Commit Message

Merge 361b68ce9 into bc935f39c

Pull Request Pull Request #1607: Feature/ai test studio - ICDC-4165 & ICDC-4171

Coverage Stats

306 of 2599 branches covered (11.77%)

Branch coverage included in aggregate %.

1 of 4346 new or added lines in 75 files covered. (0.02%)

2 existing lines in 2 files now uncovered.

2197 of 11852 relevant lines covered (18.54%)

0.41 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/DataAvailabilityTable/tableThemeConfig.generated.test.ts

// src/components/DataAvailabilityTable/tableThemeConfig.test.ts

import {
  tblBody,
  headerTheme,
  extendedView,
  themeConfig,
} from './tableThemeConfig';
import { TableConfig } from './types';

type TableColumn = NonNullable<TableConfig['columns']>[number];

const makeTable = (columns: TableColumn[]): TableConfig => ({
  title: 'Test Table',
  dataKey: 'id',
  dispatch: jest.fn(),
  columns,
  count: 0,
  selectedRows: [],
  selectedFileIds: [],
  sortBy: '',
  sortOrder: 'asc',
  extendedViewConfig: {
    download: {
      customDownload: false,
      downloadFileName: 'file.csv',
      downloadCsv: '',
    },
    manageViewColumns: {
      title: 'Manage Columns',
    },
  },
  columnGroups: [],
  rowsPerPage: 10,
  page: 0,
  totalRowCount: 0,
});

const asRecord = (value: unknown): Record<string, unknown> => {
  if (typeof value !== 'object' || value === null) {
    throw new Error('Expected a non-null object');
  }

  return value as Record<string, unknown>;
};

const getBodyStyles = (table: TableConfig): Record<string, unknown> => {
  const body = tblBody(table).tblBody.MuiTableCell.body;
  return asRecord(body);
};

const getHeaderStyles = (table: TableConfig): Record<string, unknown> => {
  const root = headerTheme(table).tblHeader.MuiTableCell.root;
  return asRecord(root);
};

describe('tableThemeConfig - dynamic data availability styling via public APIs', () => {
  describe('tblBody()', () => {
    test('should not add data availability styles when there are no matching columns', () => {
      const table = makeTable([
        { dataField: 'foo', header: 'Foo', display: true },
        { dataField: 'bar', header: 'Bar', display: false },
      ]);

      const body = getBodyStyles(table);
      const dynamicKeys = Object.keys(body).filter(key => key.startsWith('&.'));

      expect(dynamicKeys).toHaveLength(0);
    });

    test('should apply center alignment and padding for a single matching column without borders', () => {
      const table = makeTable([
        { dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
        { dataField: 'foo', header: 'Foo', display: true },
      ]);

      const body = getBodyStyles(table);

      expect(body['&.numberOfCaseFiles']).toEqual({
        borderLeft: undefined,
        borderRight: undefined,
        textAlign: 'center',
        padding: '15px',
      });
    });

    test('should apply left styling to first and right styling to last when multiple matching columns exist', () => {
      const table = makeTable([
        { dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
        { dataField: 'numberOfStudyFiles', header: 'Studies', display: true },
        { dataField: 'CRDCLinksText', header: 'CRDC', display: true },
      ]);

      const body = getBodyStyles(table);

      expect(body['&.numberOfCaseFiles']).toEqual({
        borderLeft: undefined,
        textAlign: 'center',
        padding: '15px',
      });

      expect(body['&.CRDCLinksText']).toEqual({
        borderRight: undefined,
        textAlign: 'center',
        padding: '15px',
      });

      expect(body['&.numberOfStudyFiles']).toBeUndefined();
    });

    test('should return an empty dynamic style object when matching columns are hidden', () => {
      const table = makeTable([
        { dataField: 'numberOfCaseFiles', header: 'Cases', display: false },
        { dataField: 'numberOfPublications', header: 'Pubs', display: false },
      ]);

      const body = getBodyStyles(table);
      const dynamicKeys = Object.keys(body).filter(key => key.startsWith('&.'));

      expect(dynamicKeys).toHaveLength(0);
    });
  });

  describe('headerTheme()', () => {
    test('should apply both left and right borders when a single matching column exists', () => {
      const table = makeTable([
        { dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
      ]);

      const root = getHeaderStyles(table);

      expect(root['&.numberOfCaseFiles']).toEqual({
        borderLeft: '1px solid #808080',
        borderRight: '1px solid #808080',
        textAlign: 'center',
        padding: '15px',
      });
    });

    test('should apply left border to first and right border to last when multiple matching columns exist', () => {
      const table = makeTable([
        { dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
        {
          dataField: 'numberOfImageCollections',
          header: 'Images',
          display: true,
        },
        { dataField: 'CRDCLinksText', header: 'CRDC', display: true },
      ]);

      const root = getHeaderStyles(table);

      expect(root['&.numberOfCaseFiles']).toEqual({
        borderLeft: '1px solid #808080',
        textAlign: 'center',
        padding: '15px',
      });

      expect(root['&.CRDCLinksText']).toEqual({
        borderRight: '1px solid #808080',
        textAlign: 'center',
        padding: '15px',
      });

      expect(root['&.numberOfImageCollections']).toEqual({
        textAlign: 'center',
        padding: '15px',
      });
    });

    test('should match column names case-insensitively and preserve the original selector case', () => {
      const table = makeTable([
        { dataField: 'NumberOfPublications', header: 'Pubs', display: true },
      ]);

      const root = getHeaderStyles(table);

      expect(root['&.NumberOfPublications']).toEqual({
        borderLeft: '1px solid #808080',
        borderRight: '1px solid #808080',
        textAlign: 'center',
        padding: '15px',
      });
    });

    test('should not add a selector for a non-data-availability column', () => {
      const table = makeTable([
        { dataField: 'foo', header: 'Foo', display: true },
      ]);

      const root = getHeaderStyles(table);

      expect(root['&.foo']).toBeUndefined();
    });
  });

  describe('themeConfig()', () => {
    test('should compose body, header, pagination, container, and extended views', () => {
      const table = makeTable([
        { dataField: 'numberOfStudyFiles', header: 'Studies', display: true },
      ]);

      const result = themeConfig(table);

      expect(result.tblBody).toBeDefined();
      expect(result.tblHeader).toBeDefined();
      expect(result.tblPgn).toBeDefined();
      expect(result.tblContainer).toBeDefined();
      expect(result.extendedView).toBeDefined();

      const bodyStyle = asRecord(result.tblBody.MuiTableCell.body);
      const headerStyle = asRecord(result.tblHeader.MuiTableCell.root);

      expect(bodyStyle['&.numberOfStudyFiles']).toEqual({
        borderLeft: undefined,
        borderRight: undefined,
        textAlign: 'center',
        padding: '15px',
      });

      expect(headerStyle['&.numberOfStudyFiles']).toEqual({
        borderLeft: '1px solid #808080',
        borderRight: '1px solid #808080',
        textAlign: 'center',
        padding: '15px',
      });
    });

    test('should include the exported extendedView object unchanged in composition', () => {
      const table = makeTable([]);
      const result = themeConfig(table);

      expect(result.extendedView).toBe(extendedView);

      const svgIconRoot = asRecord(result.extendedView.MuiSvgIcon.root);
      expect(svgIconRoot['&.checkBoxIcon']).toEqual({
        color: '#0B3556',
      });

      expect(result.extendedView.MuiOutlinedInput.root).toEqual({
        border: '#4A8ECB solid 1px',
        borderRadius: '8px',
      });
    });
  });

  describe('extendedView (exported object)', () => {
    test('should have expected nested structure for tooltip and toolbar', () => {
      expect(extendedView).toHaveProperty(
        'MuiTooltip.tooltip.backgroundColor',
        '#ffffff'
      );
      expect(extendedView).toHaveProperty('MuiToolbar.root.minHeight', '45px');
    });
  });
});

1	// src/components/DataAvailabilityTable/tableThemeConfig.test.ts
2
NEW 3	import {	×
4	tblBody,
5	headerTheme,
6	extendedView,
7	themeConfig,
8	} from './tableThemeConfig';
9	import { TableConfig } from './types';
10
11	type TableColumn = NonNullable<TableConfig['columns']>[number];
12
NEW 13	const makeTable = (columns: TableColumn[]): TableConfig => ({	×
14	title: 'Test Table',
15	dataKey: 'id',
16	dispatch: jest.fn(),
17	columns,
18	count: 0,
19	selectedRows: [],
20	selectedFileIds: [],
21	sortBy: '',
22	sortOrder: 'asc',
23	extendedViewConfig: {
24	download: {
25	customDownload: false,
26	downloadFileName: 'file.csv',
27	downloadCsv: '',
28	},
29	manageViewColumns: {
30	title: 'Manage Columns',
31	},
32	},
33	columnGroups: [],
34	rowsPerPage: 10,
35	page: 0,
36	totalRowCount: 0,
37	});
38
NEW 39	const asRecord = (value: unknown): Record<string, unknown> => {	×
NEW 40	if (typeof value !== 'object' \|\| value === null) {	×
NEW 41	throw new Error('Expected a non-null object');	×
42	}
43
NEW 44	return value as Record<string, unknown>;	×
45	};
46
NEW 47	const getBodyStyles = (table: TableConfig): Record<string, unknown> => {	×
NEW 48	const body = tblBody(table).tblBody.MuiTableCell.body;	×
NEW 49	return asRecord(body);	×
50	};
51
NEW 52	const getHeaderStyles = (table: TableConfig): Record<string, unknown> => {	×
NEW 53	const root = headerTheme(table).tblHeader.MuiTableCell.root;	×
NEW 54	return asRecord(root);	×
55	};
56
NEW 57	describe('tableThemeConfig - dynamic data availability styling via public APIs', () => {	×
NEW 58	describe('tblBody()', () => {	×
NEW 59	test('should not add data availability styles when there are no matching columns', () => {	×
NEW 60	const table = makeTable([	×
61	{ dataField: 'foo', header: 'Foo', display: true },
62	{ dataField: 'bar', header: 'Bar', display: false },
63	]);
64
NEW 65	const body = getBodyStyles(table);	×
NEW 66	const dynamicKeys = Object.keys(body).filter(key => key.startsWith('&.'));	×
67
NEW 68	expect(dynamicKeys).toHaveLength(0);	×
69	});
70
NEW 71	test('should apply center alignment and padding for a single matching column without borders', () => {	×
NEW 72	const table = makeTable([	×
73	{ dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
74	{ dataField: 'foo', header: 'Foo', display: true },
75	]);
76
NEW 77	const body = getBodyStyles(table);	×
78
NEW 79	expect(body['&.numberOfCaseFiles']).toEqual({	×
80	borderLeft: undefined,
81	borderRight: undefined,
82	textAlign: 'center',
83	padding: '15px',
84	});
85	});
86
NEW 87	test('should apply left styling to first and right styling to last when multiple matching columns exist', () => {	×
NEW 88	const table = makeTable([	×
89	{ dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
90	{ dataField: 'numberOfStudyFiles', header: 'Studies', display: true },
91	{ dataField: 'CRDCLinksText', header: 'CRDC', display: true },
92	]);
93
NEW 94	const body = getBodyStyles(table);	×
95
NEW 96	expect(body['&.numberOfCaseFiles']).toEqual({	×
97	borderLeft: undefined,
98	textAlign: 'center',
99	padding: '15px',
100	});
101
NEW 102	expect(body['&.CRDCLinksText']).toEqual({	×
103	borderRight: undefined,
104	textAlign: 'center',
105	padding: '15px',
106	});
107
NEW 108	expect(body['&.numberOfStudyFiles']).toBeUndefined();	×
109	});
110
NEW 111	test('should return an empty dynamic style object when matching columns are hidden', () => {	×
NEW 112	const table = makeTable([	×
113	{ dataField: 'numberOfCaseFiles', header: 'Cases', display: false },
114	{ dataField: 'numberOfPublications', header: 'Pubs', display: false },
115	]);
116
NEW 117	const body = getBodyStyles(table);	×
NEW 118	const dynamicKeys = Object.keys(body).filter(key => key.startsWith('&.'));	×
119
NEW 120	expect(dynamicKeys).toHaveLength(0);	×
121	});
122	});
123
NEW 124	describe('headerTheme()', () => {	×
NEW 125	test('should apply both left and right borders when a single matching column exists', () => {	×
NEW 126	const table = makeTable([	×
127	{ dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
128	]);
129
NEW 130	const root = getHeaderStyles(table);	×
131
NEW 132	expect(root['&.numberOfCaseFiles']).toEqual({	×
133	borderLeft: '1px solid #808080',
134	borderRight: '1px solid #808080',
135	textAlign: 'center',
136	padding: '15px',
137	});
138	});
139
NEW 140	test('should apply left border to first and right border to last when multiple matching columns exist', () => {	×
NEW 141	const table = makeTable([	×
142	{ dataField: 'numberOfCaseFiles', header: 'Cases', display: true },
143	{
144	dataField: 'numberOfImageCollections',
145	header: 'Images',
146	display: true,
147	},
148	{ dataField: 'CRDCLinksText', header: 'CRDC', display: true },
149	]);
150
NEW 151	const root = getHeaderStyles(table);	×
152
NEW 153	expect(root['&.numberOfCaseFiles']).toEqual({	×
154	borderLeft: '1px solid #808080',
155	textAlign: 'center',
156	padding: '15px',
157	});
158
NEW 159	expect(root['&.CRDCLinksText']).toEqual({	×
160	borderRight: '1px solid #808080',
161	textAlign: 'center',
162	padding: '15px',
163	});
164
NEW 165	expect(root['&.numberOfImageCollections']).toEqual({	×
166	textAlign: 'center',
167	padding: '15px',
168	});
169	});
170
NEW 171	test('should match column names case-insensitively and preserve the original selector case', () => {	×
NEW 172	const table = makeTable([	×
173	{ dataField: 'NumberOfPublications', header: 'Pubs', display: true },
174	]);
175
NEW 176	const root = getHeaderStyles(table);	×
177
NEW 178	expect(root['&.NumberOfPublications']).toEqual({	×
179	borderLeft: '1px solid #808080',
180	borderRight: '1px solid #808080',
181	textAlign: 'center',
182	padding: '15px',
183	});
184	});
185
NEW 186	test('should not add a selector for a non-data-availability column', () => {	×
NEW 187	const table = makeTable([	×
188	{ dataField: 'foo', header: 'Foo', display: true },
189	]);
190
NEW 191	const root = getHeaderStyles(table);	×
192
NEW 193	expect(root['&.foo']).toBeUndefined();	×
194	});
195	});
196
NEW 197	describe('themeConfig()', () => {	×
NEW 198	test('should compose body, header, pagination, container, and extended views', () => {	×
NEW 199	const table = makeTable([	×
200	{ dataField: 'numberOfStudyFiles', header: 'Studies', display: true },
201	]);
202
NEW 203	const result = themeConfig(table);	×
204
NEW 205	expect(result.tblBody).toBeDefined();	×
NEW 206	expect(result.tblHeader).toBeDefined();	×
NEW 207	expect(result.tblPgn).toBeDefined();	×
NEW 208	expect(result.tblContainer).toBeDefined();	×
NEW 209	expect(result.extendedView).toBeDefined();	×
210
NEW 211	const bodyStyle = asRecord(result.tblBody.MuiTableCell.body);	×
NEW 212	const headerStyle = asRecord(result.tblHeader.MuiTableCell.root);	×
213
NEW 214	expect(bodyStyle['&.numberOfStudyFiles']).toEqual({	×
215	borderLeft: undefined,
216	borderRight: undefined,
217	textAlign: 'center',
218	padding: '15px',
219	});
220
NEW 221	expect(headerStyle['&.numberOfStudyFiles']).toEqual({	×
222	borderLeft: '1px solid #808080',
223	borderRight: '1px solid #808080',
224	textAlign: 'center',
225	padding: '15px',
226	});
227	});
228
NEW 229	test('should include the exported extendedView object unchanged in composition', () => {	×
NEW 230	const table = makeTable([]);	×
NEW 231	const result = themeConfig(table);	×
232
NEW 233	expect(result.extendedView).toBe(extendedView);	×
234
NEW 235	const svgIconRoot = asRecord(result.extendedView.MuiSvgIcon.root);	×
NEW 236	expect(svgIconRoot['&.checkBoxIcon']).toEqual({	×
237	color: '#0B3556',
238	});
239
NEW 240	expect(result.extendedView.MuiOutlinedInput.root).toEqual({	×
241	border: '#4A8ECB solid 1px',
242	borderRadius: '8px',
243	});
244	});
245	});
246
NEW 247	describe('extendedView (exported object)', () => {	×
NEW 248	test('should have expected nested structure for tooltip and toolbar', () => {	×
NEW 249	expect(extendedView).toHaveProperty(	×
250	'MuiTooltip.tooltip.backgroundColor',
251	'#ffffff'
252	);
NEW 253	expect(extendedView).toHaveProperty('MuiToolbar.root.minHeight', '45px');	×
254	});
255	});
256	});

CBIIT / bento-icdc-frontend / 26530955228

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous