Support Object and Regex as keys (#88)

Support Object and Regex as keys

Co-authored-by: Norbert de Langen <[email protected]>

src/object-inspector/ObjectInspector.spec.js

@@ -1,7 +1,11 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
+import { render } from 'react-dom'
+import { act } from 'react-dom/test-utils';
 import ObjectInspector from './ObjectInspector';
 
+let container;
+
 describe('ObjectInspector', () => {
   it('should render', () => {
     const tree = TestRenderer.create(<ObjectInspector />);
@@ -18,3 +22,33 @@ describe('ObjectInspector', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe('ObjectInspector Content', () => {
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should render with Maps with Regex and Maps keys', () => {
+    const data = new Map([
+      [/\S/g, 'Regular Expression key']
+    ]);
+
+    act(() => {
+      render(<ObjectInspector data={data} />, container);
+    });
+
+    const button = container.querySelector('div');
+
+    act(() => {
+      button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
+    });
+
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+})

src/object-inspector/ObjectLabel.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ObjectName from '../object/ObjectName';
 import ObjectValue from '../object/ObjectValue';
+import ObjectPreview from './ObjectPreview';
 
 /**
  * if isNonenumerable is specified, render the name dimmed
@@ -11,7 +12,11 @@ const ObjectLabel = ({ name, data, isNonenumerable = false }) => {
 
   return (
     <span>
-      <ObjectName name={name} dimmed={isNonenumerable} />
+      {typeof name === 'string' ? (
+        <ObjectName name={name} dimmed={isNonenumerable} />
+      ) : (
+        <ObjectPreview data={name} />
+      )}
       <span>: </span>
       <ObjectValue object={object} />
     </span>

src/object-inspector/__snapshots__/ObjectInspector.spec.js.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ObjectInspector Content should render with Maps with Regex and Maps keys 1`] = `"<ol role=\\"tree\\" style=\\"padding: 0px; margin: 0px; list-style-type: none;\\"><li aria-expanded=\\"true\\" role=\\"treeitem\\" style=\\"color: black; background-color: white; line-height: 1.2; cursor: default; box-sizing: border-box; list-style: none; font-family: Menlo, monospace; font-size: 11px;\\"><div><span style=\\"color: rgb(110, 110, 110); display: inline-block; font-size: 12px; margin-right: 3px; user-select: none; transform: rotateZ(90deg);\\">▶</span><span style=\\"font-style: italic;\\">Map </span><span style=\\"font-style: italic;\\">{}</span></div><ol role=\\"group\\" style=\\"margin: 0px; padding-left: 12px;\\"><li aria-expanded=\\"false\\" role=\\"treeitem\\" style=\\"color: black; background-color: white; line-height: 1.2; cursor: default; box-sizing: border-box; list-style: none; font-family: Menlo, monospace; font-size: 11px;\\"><div><span style=\\"white-space: pre; font-size: 12px; margin-right: 3px; user-select: none;\\">&nbsp;</span><span><span style=\\"color: rgb(196, 26, 22);\\">/\\\\S/g</span><span>: </span><span style=\\"color: rgb(196, 26, 22);\\">\\"Regular Expression key\\"</span></span></div><ol role=\\"group\\" style=\\"margin: 0px; padding-left: 12px;\\"></ol></li></ol></li></ol>"`;
+
 exports[`ObjectInspector passes \`nodeRenderer\` prop to <TreeView/> 1`] = `
 <ol
   role="tree"

stories/object-inspector.js

@@ -85,6 +85,21 @@ storiesOf('Objects', module)
     <Inspector showNonenumerable data={Object.assign(Object.create(null), { key: 'value' })} />
   ));
 
+storiesOf('Maps', module)
+.add('Map: Empty Map', () => (<Inspector data={new Map()} />))
+.add('Map: Boolean keys', () => (<Inspector data={new Map([[true, 'one'], [false, 'two']])} />))
+.add('Map: Regex keys', () => (<Inspector data={new Map([[/\S/g, 'one'], [/\D/g, 'two']])} />))
+.add('Map: String keys', () => (<Inspector data={new Map([['one', 1], ['two', 2]])} />))
+.add('Map: Object keys', () => (<Inspector data={new Map([[{}, 1], [{key: 2}, 2]])} />))
+.add('Map: Array keys', () => (<Inspector data={new Map([[[1], 1], [[2], 2]])} />))
+.add('Map: Map keys', () => (<Inspector data={new Map([[new Map(), 1], [new Map([]), 2]])} />));
+
+
+storiesOf('Sets', module)
+  .add('Set: Empty Set', () => (<Inspector data={new Set()} />))
+  .add('Set: Simple Set', () => (<Inspector data={new Set([1, 2, 3, 4])} />))
+  .add('Set: Nested Set', () => (<Inspector data={new Set([1, 2, 3, new Set([1, 2])])} />));
+
 storiesOf('Functions', module)
   .add('Functions: anonymous function', () => <Inspector data={function() {}} />)
   .add('Functions: anonymous arrow function', () => <Inspector data={() => {}} />)