Handle fact value with null value

assets/js/components/ExecutionResults/CheckResultDetail/FactValue.jsx

@@ -3,11 +3,13 @@ import React from 'react';
 import ObjectTree from '@components/ObjectTree';
 
 function FactValue({ className, data }) {
-  return typeof data === 'object' ? (
-    <ObjectTree className={className} data={data} />
-  ) : (
-    <span className={className}>{`${data}`}</span>
-  );
+  if (data === null) {
+    return <span className={className}>null</span>;
+  }
+  if (typeof data === 'object') {
+    return <ObjectTree className={className} data={data} />;
+  }
+  return <span className={className}>{`${data}`}</span>;
 }
 
 export default FactValue;

assets/js/components/ExecutionResults/CheckResultDetail/FactValue.test.jsx

@@ -28,6 +28,11 @@ describe('FactValue component', () => {
       plain: true,
       stringRepresentation: 'true',
     },
+    {
+      type: 'null',
+      plain: null,
+      stringRepresentation: 'null',
+    },
   ];
 
   it.each(scalarScenarios)(

assets/js/components/ObjectTree/ObjectTree.stories.jsx

@@ -10,5 +10,10 @@ export default {
 };
 
 export function Normal(args) {
-  return <ObjectTree data={objectTreeFactory.build()} {...args} />;
+  return (
+    <ObjectTree
+      data={objectTreeFactory.build({ empty_array: [], empty_object: {} })}
+      {...args}
+    />
+  );
 }

assets/js/components/ObjectTree/ObjectTree.test.jsx

@@ -9,7 +9,7 @@ import { flattenTree, treeify } from './tree';
 
 describe('ObjectTree component', () => {
   it('should render correctly', () => {
-    const data = objectTreeFactory.build();
+    const data = objectTreeFactory.build({ empty_array: [], empty_object: {} });
     const {
       number,
       string,
@@ -21,6 +21,7 @@ describe('ObjectTree component', () => {
 
     expect(screen.getByText(number)).toBeVisible();
     expect(screen.getByText(string)).toBeVisible();
+    expect(screen.getAllByText('{}')).toHaveLength(2);
     expect(screen.queryByText(nestedString)).toBeNull();
     expect(screen.queryByText(firstArrayElement)).toBeNull();
 
@@ -42,7 +43,7 @@ describe('flattenTree and treeify', () => {
 
     const [
       {
-        children: [firstChildID, _second, _third, fourthChildID],
+        children: [firstChildID, _second, _third, fourthChildID, fifthChildID],
       },
     ] = children;
 
@@ -61,5 +62,7 @@ describe('flattenTree and treeify', () => {
 
     expect(children[firstComplexObjectChild].parent).toBe(fourthChildID);
     expect(children[secondComplexObjectChild].parent).toBe(fourthChildID);
+
+    expect(children[fifthChildID].value).toBe(null);
   });
 });

assets/js/components/ObjectTree/ObjectTreeNode.jsx

@@ -1,8 +1,22 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import { has } from 'lodash';
+
 import ObjectTreeIcon from './ObjectTreeIcon';
 
+const renderElement = (element) => {
+  if (element.value === null) {
+    return 'null';
+  }
+
+  if (!has(element, 'value') && element.children.length === 0) {
+    return '{}';
+  }
+
+  return element.value;
+};
+
 function ObjectTreeNode({
   element,
   isBranch,
@@ -24,7 +38,7 @@ function ObjectTreeNode({
       {isBranch ? (
         <ObjectTreeIcon expanded={isExpanded} />
       ) : (
-        <span className="ml-2">{element.value}</span>
+        <span className="ml-2">{renderElement(element)}</span>
       )}
     </div>
   );

assets/js/components/ObjectTree/tree.js

@@ -46,6 +46,10 @@ export const treeify = (name, data) => ({
     const { [key]: element } = data;
     const dataType = typeof element;
 
+    if (element == null) {
+      return { name: key, value: null };
+    }
+
     if (dataType === 'object') {
       return treeify(key, element);
     }

assets/js/lib/test-utils/factories/index.js

@@ -110,4 +110,5 @@ export const objectTreeFactory = Factory.define(() => ({
     nestedNumber: faker.number.int(),
     nestedString: faker.word.noun(),
   },
+  null: null,
 }));