refactor and add tests

lattice/src/shared/DataTable/DataTable.tsx

@@ -12,6 +12,7 @@ import TableRow from '@material-ui/core/TableRow';
 import Typography from '@material-ui/core/Typography';
 import { ColumnInfo } from 'proto/pilosa_pb';
 import { Pager } from 'shared/Pager';
+import { formatTableCell } from 'shared/utils/formatTableCell';
 import css from './DataTable.module.scss';
 
 type TableProps = {
@@ -70,31 +71,7 @@ export const DataTable: FC<TableProps> = ({
     }
   };
 
-  const formatTableCell = (row: any, col: any) => {
-     if (typeof row[col.name] === 'object') {
-        return (
-      <pre className={css.preFormat}>
-        {JSON.stringify(row[col.name], null, 2)}
-      </pre> )
-     } else if (row[col.name] !== undefined) {
-        if (col.datatype === '[]string') {
-            return (
-                 <span>
-                    {'"' + (row[col.name]) + '"'}
-                </span> 
-            )
-        }
-        return (
-      <span>
-        {col.datatype === 'timestamp' && row[col.name]
-          ? moment
-              .utc(row[col.name])
-              .format('MM/DD/YYYY hh:mm:ss a')
-          : row[col.name].toLocaleString()}
-      </span> )
-    }
-     return null
-  }
+
 
   return (
     <Fragment>
@@ -143,7 +120,7 @@ export const DataTable: FC<TableProps> = ({
                         key={`table-cell-${rowIdx}-${colIdx}`}
                         className={css.tableCell}
                       >
-                        {formatTableCell(row, col)}
+                        {formatTableCell(row, col, css)}
                             </TableCell>
                     ))}
                     {autoWidth ? <TableCell className={css.fillWidth} /> : null}

lattice/src/shared/utils/formatTableCell.test.tsx

@@ -0,0 +1,59 @@
+import { formatTableCell } from './formatTableCell';
+import React from "react";
+import { render, unmountComponentAtNode } from "react-dom";
+import { act } from "react-dom/test-utils";
+
+
+let container = null;
+beforeEach(() => {
+  // setup a DOM element as a render target
+  container = document.createElement("div");
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+it("it renders strings in quotes", () => {
+  let row = {thing:"quoted string!"};
+  let col = {name: "thing", datatype: "[]string"};
+    // this is just so we can actually test it, the value doesn't matter that much 
+  let css = {preFormat: "preFormat"};
+
+  act(() => {
+    render(formatTableCell(row, col, css), container);
+  });
+  expect(container.textContent).toBe('"quoted string!"');
+});
+
+it("renders objects as stringified", () => {
+  let row = {thing:{val:"quoted string!"}};
+  let col = {name: "thing", datatype: "object"};
+    // this is just so we can actually test it, the value doesn't matter that much 
+  let css = {preFormat: "preFormat"};
+
+  act(() => {
+    render(formatTableCell(row, col, css), container);
+  });
+  expect(container.textContent).toBe(`{
+  "val": "quoted string!"
+}`);
+});
+
+it("it puts timestamps in MM/DD/YYYY hh:mm:ss a format", () => {
+  let row = {thing:1635452050094};
+  let col = {name: "thing", datatype: "timestamp"};
+    // this is just so we can actually test it, the value doesn't matter that much 
+  let css = {preFormat: "preFormat"};
+
+  act(() => {
+    render(formatTableCell(row, col, css), container);
+  });
+  expect(container.textContent).toBe("10/28/2021 08:14:10 pm");
+});
+
+

lattice/src/shared/utils/formatTableCell.tsx

@@ -0,0 +1,26 @@
+import moment from 'moment';
+export const formatTableCell = (row: any, col: any, css: any) => {
+     if (typeof row[col.name] === 'object') {
+        return (
+      <pre className={css.preFormat}>
+        {JSON.stringify(row[col.name], null, 2)}
+      </pre> )
+     } else if (row[col.name] !== undefined) {
+        if (col.datatype === '[]string') {
+            return (
+                 <span>
+                    {'"' + (row[col.name]) + '"'}
+                </span> 
+            )
+        }
+        return (
+      <span>
+        {col.datatype === 'timestamp' && row[col.name]
+          ? moment
+              .utc(row[col.name])
+              .format('MM/DD/YYYY hh:mm:ss a')
+          : row[col.name].toLocaleString()}
+      </span> )
+    }
+     return null
+}