[UIPQB-92] Safely handle nonexistent values for nested fields

folio-org · Mar 8, 2024 · c0ccb68 · c0ccb68
1 parent 8447b1e
commit c0ccb68
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 32 deletions.
diff --git a/src/QueryBuilder/ResultViewer/DynamicTable/DynamicTable.js b/src/QueryBuilder/ResultViewer/DynamicTable/DynamicTable.js
@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 import css from './DynamicTable.css';
 
 export const DynamicTable = ({ properties, values }) => {
+  if (!values) return null;
+
   const tableBodyRows = JSON.parse(values);
 
-  if (!tableBodyRows.length) return null;
+  if (!tableBodyRows?.length) return null;
 
   return (
     <table className={css.DynamicTable}>

diff --git a/src/QueryBuilder/ResultViewer/DynamicTable/DynamicTable.test.js b/src/QueryBuilder/ResultViewer/DynamicTable/DynamicTable.test.js
@@ -5,59 +5,63 @@ import { DynamicTable } from './DynamicTable';
 describe('DynamicTable component', () => {
   const properties = [
     {
-      'name': 'code',
-      'dataType': {
-        'dataType': 'stringType',
+      name: 'code',
+      dataType: {
+        dataType: 'stringType',
       },
-      'labelAlias': 'Code',
-      'property': 'code',
+      labelAlias: 'Code',
+      property: 'code',
     },
     {
-      'name': 'distribution_type',
-      'dataType': {
-        'dataType': 'stringType',
+      name: 'distribution_type',
+      dataType: {
+        dataType: 'stringType',
       },
-      'labelAlias': 'Distribution type',
-      'property': 'distributionType',
+      labelAlias: 'Distribution type',
+      property: 'distributionType',
     },
     {
-      'name': 'encumbrance',
-      'dataType': {
-        'dataType': 'rangedUUIDType',
+      name: 'encumbrance',
+      dataType: {
+        dataType: 'rangedUUIDType',
       },
-      'labelAlias': 'Encumbrance',
-      'property': 'encumbrance',
+      labelAlias: 'Encumbrance',
+      property: 'encumbrance',
     },
     {
-      'name': 'fund_id',
-      'dataType': {
-        'dataType': 'rangedUUIDType',
+      name: 'fund_id',
+      dataType: {
+        dataType: 'rangedUUIDType',
       },
-      'labelAlias': 'Fund ID',
-      'property': 'fundId',
+      labelAlias: 'Fund ID',
+      property: 'fundId',
     },
     {
-      'name': 'value',
-      'dataType': {
-        'dataType': 'numberType',
+      name: 'value',
+      dataType: {
+        dataType: 'numberType',
       },
-      'labelAlias': 'Value',
-      'property': 'value',
+      labelAlias: 'Value',
+      property: 'value',
     },
   ];
 
-  const values = '[{"code": "STATE-MONOSER", "value": 100.0, "fundId": "bbd4a5e1-c9f3-44b9-bfdf-d184e04f0ba0", "encumbrance": "eb506834-6c70-4239-8d1a-6414a5b08010", "distributionType": "percentage"}]';
+  const values =
+    '[{"code": "STATE-MONOSER", "value": 100.0, "fundId": "bbd4a5e1-c9f3-44b9-bfdf-d184e04f0ba0", "encumbrance": "eb506834-6c70-4239-8d1a-6414a5b08010", "distributionType": "percentage"}]';
 
-  it('render null value if there are no rows', () => {
-    const { container } = render(<DynamicTable properties={properties} values="[]" />);
+  it.each(['[]', 'null', 'undefined', undefined, null])(
+    'renders null value for empty/invalid input %s',
+    () => {
+      const { container } = render(<DynamicTable properties={properties} values="[]" />);
 
-    expect(container).toBeEmptyDOMElement();
-  });
+      expect(container).toBeEmptyDOMElement();
+    },
+  );
 
   it('renders table with correct properties and values', () => {
     const { getByText } = render(<DynamicTable properties={properties} values={values} />);
 
-    properties.forEach(property => {
+    properties.forEach((property) => {
       const label = getByText(property.labelAlias);
 
       expect(label).toBeInTheDocument();