feat: improve empty objects and empty arrays

Author: AndyOGo

src/DataRenderer.test.tsx

@@ -47,6 +47,12 @@ const testButtonsExpanded = () => {
   return buttons;
 };
 
+const testButtonsIfEmpty = () => {
+  expect(() => {
+    screen.getAllByRole('button', { hidden: true });
+  }).toThrow();
+}
+
 const testClickableNodeCollapsed = () => {
   const buttons = screen.getAllByRole('button', { hidden: true });
   expect(buttons.length).toBe(4);
@@ -143,6 +149,52 @@ describe('DataRender', () => {
     expect(screen.getByText(/empty key/)).toBeInTheDocument();
   });
 
+  it('should render empty objects', () => {
+    render(<DataRender {...commonProps} value={{}} />);
+    expect(screen.getByText('{')).toBeInTheDocument();
+    expect(screen.getByText('}')).toBeInTheDocument();
+  });
+
+  it('should render nested empty objects', () => {
+    render(<DataRender {...commonProps} value={{ nested: [] }} />);
+    expect(screen.getByText('nested:')).toBeInTheDocument();
+    expect(screen.getByText('{')).toBeInTheDocument();
+    expect(screen.getByText('}')).toBeInTheDocument();
+  });
+
+  it('should not expand empty objects', () => {
+    render(<DataRender {...commonProps} value={{}} shouldExpandNode={allExpanded} />);
+    testButtonsIfEmpty()
+  });
+
+  it('should not collapse empty objects', () => {
+    render(<DataRender {...commonProps} value={{}} shouldExpandNode={collapseAll} />);
+    testButtonsIfEmpty()
+  });
+
+  it('should render empty arrays', () => {
+    render(<DataRender {...commonProps} value={[]} />);
+    expect(screen.getByText('[')).toBeInTheDocument();
+    expect(screen.getByText(']')).toBeInTheDocument();
+  });
+
+  it('should render nested empty arrays', () => {
+    render(<DataRender {...commonProps} value={{ nested: [] }} />);
+    expect(screen.getByText('nested:')).toBeInTheDocument();
+    expect(screen.getByText('[')).toBeInTheDocument();
+    expect(screen.getByText(']')).toBeInTheDocument();
+  });
+
+  it('should not expand empty arrays', () => {
+    render(<DataRender {...commonProps} value={[]} shouldExpandNode={allExpanded} />);
+    testButtonsIfEmpty()
+  });
+
+  it('should not collapse empty arrays', () => {
+    render(<DataRender {...commonProps} value={[]} shouldExpandNode={collapseAll} />);
+    testButtonsIfEmpty()
+  });
+
   it('should render arrays', () => {
     render(<DataRender {...commonProps} value={[1, 2, 3]} />);
     expect(screen.getByText('1')).toBeInTheDocument();

src/DataRenderer.tsx

@@ -31,7 +31,7 @@ export interface JsonRenderProps<T> {
 }
 
 export interface ExpandableRenderProps {
-  field?: string;
+  field: string | undefined;
   value: Array<any> | object;
   data: Array<[string | undefined, any]>;
   openBracket: string;
@@ -144,6 +144,25 @@ function ExpandableObject({
   );
 }
 
+export interface EmptyRenderProps {
+  field: string | undefined;
+  openBracket: string;
+  closeBracket: string;
+  style: StyleProps;
+}
+
+function EmptyObject({ field, openBracket, closeBracket, style }: EmptyRenderProps) {
+  return (
+    <div className={style.basicChildStyle} role='listitem'>
+       {field && (
+          <span className={style.label}>{field}:</span>
+        )}
+      <span className={style.punctuation}>{openBracket}</span>
+      <span className={style.punctuation}>{closeBracket}</span>
+    </div>
+  );
+}
+
 function JsonObject({
   field,
   value,
@@ -153,6 +172,15 @@ function JsonObject({
   clickToExpandNode,
   level
 }: JsonRenderProps<Object>) {
+  if (Object.keys(value).length === 0) {
+    return EmptyObject({
+      field,
+      openBracket: '{',
+      closeBracket: '}',
+      style
+    });
+  }
+
   return ExpandableObject({
     field,
     value,
@@ -176,6 +204,15 @@ function JsonArray({
   shouldExpandNode,
   clickToExpandNode
 }: JsonRenderProps<Array<any>>) {
+  if (value.length === 0) {
+    return EmptyObject({
+      field,
+      openBracket: '[',
+      closeBracket: ']',
+      style
+    });
+  }
+
   return ExpandableObject({
     field,
     value,

src/stories/JsonView.stories.tsx

@@ -56,7 +56,9 @@ const jsonData = {
   'date property': new Date(0),
   'boolean property': true,
   'null property': null,
+  'empty array': [],
   'array propery': [1, 2, 3, 4, 5],
+  'empty object': {},
   'nested object': {
     first: true,
     second: 'another value',

src/styles.module.css

@@ -14,6 +14,10 @@
   font-weight: bold;
 }
 
+.punctuation-base + .punctuation-base {
+  margin-left: -5px;
+}
+
 .pointer {
   cursor: pointer;
 }