test(react-devtools-shared): useDebugValue with complex types

Author: eps1lon

packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -1,5 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InspectedElementContext display complex values of useDebugValue: DisplayedComplexValue 1`] = `
+{
+  "id": 3,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": null,
+      "isStateEditable": false,
+      "name": "DebuggableHook",
+      "value": {
+        "foo": 2
+      },
+      "subHooks": []
+    },
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 1,
+      "subHooks": []
+    }
+  ],
+  "props": {},
+  "state": null
+}
+`;
+
+exports[`InspectedElementContext display complex values of useDebugValue: IgnoredComplexValue 1`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": null,
+      "isStateEditable": false,
+      "name": "NotDebuggableHook",
+      "value": {
+        "foo": 2
+      },
+      "subHooks": [
+        {
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "value": 1,
+          "subHooks": []
+        }
+      ]
+    }
+  ],
+  "props": {},
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
 {
   "id": 2,

packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js

@@ -1571,4 +1571,90 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  it('display complex values of useDebugValue', async done => {
+    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
+    let inspectedElement = null;
+    function Suspender({target}) {
+      const context = React.useContext(InspectedElementContext);
+      getInspectedElementPath = context.getInspectedElementPath;
+      inspectedElement = context.getInspectedElement(target);
+      return null;
+    }
+
+    const container = document.createElement('div');
+
+    function useNotDebuggableHook() {
+      React.useDebugValue({foo: 2});
+      React.useState(1);
+      return 1;
+    }
+    function IgnoredComplexValue() {
+      useNotDebuggableHook();
+      return null;
+    }
+
+    function useDebuggableHook() {
+      React.useDebugValue({foo: 2});
+      return 1;
+    }
+    function DisplayedComplexValue() {
+      useDebuggableHook();
+      React.useState(1);
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <React.Fragment>
+          <IgnoredComplexValue />
+          <DisplayedComplexValue />
+        </React.Fragment>,
+        container,
+      ),
+    );
+
+    const ignoredComplexValueIndex = 0
+    const ignoredComplexValueId = ((store.getElementIDAtIndex(ignoredComplexValueIndex): any): number);
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={ignoredComplexValueId}
+            defaultSelectedElementIndex={ignoredComplexValueIndex}>
+            <React.Suspense fallback={null}>
+              <Suspender target={ignoredComplexValueId} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(getInspectedElementPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('IgnoredComplexValue');
+
+    inspectedElement = null;
+
+
+    const displayedComplexValueIndex = 1
+    const displayedComplexValueId = ((store.getElementIDAtIndex(displayedComplexValueIndex): any): number);
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={displayedComplexValueId}
+            defaultSelectedElementIndex={displayedComplexValueIndex}>
+            <React.Suspense fallback={null}>
+              <Suspender target={displayedComplexValueId} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(getInspectedElementPath).not.toBeNull();
+    expect(inspectedElement).not.toBeNull();
+    expect(inspectedElement).toMatchSnapshot('DisplayedComplexValue');
+
+    done();
+  });
 });