fix(react-devtools-shared): useDebugValue with complex types (#18070)
Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Sebastian Silbermann committed
Mar 17, 2020 at 21:57 UTC
756e1ea5d4f258f917b2c50a66bb5b07900d37a1
4 files changed
+84
-1
packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+29
@@ -1,5 +1,34 @@
1
// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3
+exports[`InspectedElementContext display complex values of useDebugValue: DisplayedComplexValue 1`] = `
4
+{
5
+ "id": 2,
6
+ "owners": null,
7
+ "context": null,
8
+ "hooks": [
9
+ {
10
+ "id": null,
11
+ "isStateEditable": false,
12
+ "name": "DebuggableHook",
13
+ "value": {
14
+ "foo": 2
15
+ },
16
+ "subHooks": [
17
+ {
18
+ "id": 0,
19
+ "isStateEditable": true,
20
+ "name": "State",
21
+ "value": 1,
22
+ "subHooks": []
23
+ }
24
+ ]
25
+ }
26
+ ],
27
+ "props": {},
28
+ "state": null
29
+}
30
+`;
31
+
32
exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
33
{
34
"id": 2,
packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+50
@@ -1571,4 +1571,54 @@ describe('InspectedElementContext', () => {
1571
1572
done();
1573
});
1574
+
1575
+ it('display complex values of useDebugValue', async done => {
1576
+ let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
1577
+ let inspectedElement = null;
1578
+ function Suspender({target}) {
1579
+ const context = React.useContext(InspectedElementContext);
1580
+ getInspectedElementPath = context.getInspectedElementPath;
1581
+ inspectedElement = context.getInspectedElement(target);
1582
+ return null;
1583
+ }
1584
+
1585
+ const container = document.createElement('div');
1586
+
1587
+ function useDebuggableHook() {
1588
+ React.useDebugValue({foo: 2});
1589
+ React.useState(1);
1590
+ return 1;
1591
+ }
1592
+ function DisplayedComplexValue() {
1593
+ useDebuggableHook();
1594
+ return null;
1595
+ }
1596
+
1597
+ await utils.actAsync(() =>
1598
+ ReactDOM.render(<DisplayedComplexValue />, container),
1599
+ );
1600
+
1601
+ const ignoredComplexValueIndex = 0;
1602
+ const ignoredComplexValueId = ((store.getElementIDAtIndex(
1603
+ ignoredComplexValueIndex,
1604
+ ): any): number);
1605
+ await utils.actAsync(
1606
+ () =>
1607
+ TestRenderer.create(
1608
+ <Contexts
1609
+ defaultSelectedElementID={ignoredComplexValueId}
1610
+ defaultSelectedElementIndex={ignoredComplexValueIndex}>
1611
+ <React.Suspense fallback={null}>
1612
+ <Suspender target={ignoredComplexValueId} />
1613
+ </React.Suspense>
1614
+ </Contexts>,
1615
+ ),
1616
+ false,
1617
+ );
1618
+ expect(getInspectedElementPath).not.toBeNull();
1619
+ expect(inspectedElement).not.toBeNull();
1620
+ expect(inspectedElement).toMatchSnapshot('DisplayedComplexValue');
1621
+
1622
+ done();
1623
+ });
1624
});
packages/react-devtools-shared/src/devtools/views/Components/HooksTree.css
+1
@@ -53,6 +53,7 @@
53
overflow: hidden;
54
text-overflow: ellipsis;
55
cursor: default;
56
+ white-space: nowrap;
57
}
58
59
.None {
packages/react-devtools-shared/src/devtools/views/Components/HooksTree.js
+4
-1
@@ -17,7 +17,7 @@ import EditableValue from './EditableValue';
17
import ExpandCollapseToggle from './ExpandCollapseToggle';
18
import {InspectedElementContext} from './InspectedElementContext';
19
import KeyValue from './KeyValue';
20
-import {serializeHooksForCopy} from '../utils';
20
+import {getMetaValueLabel, serializeHooksForCopy} from '../utils';
21
import styles from './HooksTree.css';
22
import useContextMenu from '../../ContextMenu/useContextMenu';
23
import {meta} from '../../../hydration';
@@ -202,6 +202,9 @@ function HookView({canEditHooks, hook, id, inspectPath, path}: HookViewProps) {
202
className={name !== '' ? styles.Name : styles.NameAnonymous}>
203
{name || 'Anonymous'}
204
</span>
205
+ <span className={styles.Value} onClick={toggleIsOpen}>
206
+ {isOpen || getMetaValueLabel(value)}
207
+ </span>
208
</div>
209
<div className={styles.Children} hidden={!isOpen}>
210
<KeyValue