test: Failing test for complex debug values in custom hooks

Author: eps1lon

package.json

@@ -63,6 +63,7 @@
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200112.0.0",
     "gzip-size": "^5.1.1",
+    "identity-obj-proxy": "^3.0.0",
     "jasmine-check": "^1.0.0-rc.0",
     "jest": "^25.1.0",
     "jest-diff": "^25.1.0",

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

@@ -0,0 +1,92 @@
+describe('HooksTree', () => {
+  let React;
+  let ReactDOM;
+  let bridge: FrontendBridge;
+  let store: Store;
+  let utils;
+  let HooksTree;
+
+  let BridgeContext;
+  let InspectedElementContextController;
+  let StoreContext;
+  let TreeContextController;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    bridge = global.bridge;
+    store = global.store;
+    store.collapseNodesByDefault = false;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    BridgeContext = require('react-devtools-shared/src/devtools/views/context')
+      .BridgeContext;
+    InspectedElementContextController = require('react-devtools-shared/src/devtools/views/Components/InspectedElementContext')
+      .InspectedElementContextController;
+    StoreContext = require('react-devtools-shared/src/devtools/views/context')
+      .StoreContext;
+    TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
+      .TreeContextController;
+
+    HooksTree = require('react-devtools-shared/src/devtools/views/Components/HooksTree')
+      .HooksTreeView;
+  });
+
+  const Contexts = ({
+    children,
+    defaultSelectedElementID = null,
+    defaultSelectedElementIndex = null,
+  }) => (
+    <BridgeContext.Provider value={bridge}>
+      <StoreContext.Provider value={store}>
+        <TreeContextController
+          defaultSelectedElementID={defaultSelectedElementID}
+          defaultSelectedElementIndex={defaultSelectedElementIndex}>
+          <InspectedElementContextController>
+            {children}
+          </InspectedElementContextController>
+        </TreeContextController>
+      </StoreContext.Provider>
+    </BridgeContext.Provider>
+  );
+
+  it('shows the complex value of custom hooks with sub-hooks', () => {
+    // props from `InspectedElementContext display complex values of useDebugValue: DisplayedComplexValue 1` snapshot
+
+    const container = document.createElement('div');
+    ReactDOM.render(
+      <Contexts>
+        <HooksTree
+          hooks={[
+            {
+              id: null,
+              isStateEditable: false,
+              name: 'DebuggableHook',
+              value: {
+                foo: 2,
+              },
+              subHooks: [
+                {
+                  id: 0,
+                  isStateEditable: true,
+                  name: 'State',
+                  value: 1,
+                  subHooks: [],
+                },
+              ],
+            },
+          ]}
+        />
+      </Contexts>,
+      container,
+    );
+
+    const hook = container.querySelector('.NameValueRow');
+    // it's actually DebuggableHook: {foo:2} but the first colon is added by css
+    // which isn't available in the test
+    expect(hook.textContent).toEqual('DebuggableHook{foo: 2}');
+  });
+});

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

@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`InspectedElementContext display complex values of useDebugValue: DisplayedComplexValue 1`] = `
+{
+  "id": 2,
+  "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 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,54 @@ 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 useDebuggableHook() {
+      React.useDebugValue({foo: 2});
+      React.useState(1);
+      return 1;
+    }
+    function DisplayedComplexValue() {
+      useDebuggableHook();
+      return null;
+    }
+
+    await utils.actAsync(() =>
+      ReactDOM.render(<DisplayedComplexValue />, 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('DisplayedComplexValue');
+
+    done();
+  });
 });

scripts/jest/config.build-devtools.js

@@ -43,6 +43,9 @@ packages.forEach(name => {
   ] = `<rootDir>/build/node_modules/${name}/$1`;
 });
 
+// https://jestjs.io/docs/en/webpack#mocking-css-modules
+moduleNameMapper['\\.(css|less)$'] = 'identity-obj-proxy';
+
 module.exports = Object.assign({}, baseConfig, {
   // Redirect imports to the compiled bundles
   moduleNameMapper,

yarn.lock

@@ -6591,6 +6591,11 @@ har-validator@~5.1.0:
     ajv "^6.5.5"
     har-schema "^2.0.0"
 
+harmony-reflect@^1.4.6:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
+  integrity sha512-WJTeyp0JzGtHcuMsi7rw2VwtkvLa+JyfEKJCFyfcS0+CDkjQ5lHPu7zEhFZP+PDSRrEgXa5Ah0l1MbgbE41XjA==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -6938,6 +6943,13 @@ icss-utils@^2.1.0:
   dependencies:
     postcss "^6.0.1"
 
+identity-obj-proxy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
+  dependencies:
+    harmony-reflect "^1.4.6"
+
 ieee754@^1.1.12, ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"