{"commit":{"authorName":"Brian Vaughn","authoredAt":"2021-01-25T11:58:19-08:00","subject":"DevTools: Make it easier to write tests for inspected elements (#20655)","authorEmail":"bvaughn@fb.com","shortRevision":"6d94017c42","revision":"6d94017c4287195d8d6c5173ea663285820e9f61"},"body":"And also add a few tests for which also cover a recent bugfix that just landed","files":[{"path":"packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js","status":"M"}],"parents":["f0031dc6ed8801cc638c2f378911a93ceb8e2412"],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\nindex 70a59b135e..7cb7ebb77f 100644\n--- a\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\n+++ b\/packages\/react-devtools-shared\/src\/__tests__\/inspectedElement-test.js\n@@ -33,6 +33,8 @@ describe('InspectedElement', () => {\n let TestUtilsAct;\n let TestRendererAct;\n \n+ let testRendererInstance;\n+\n beforeEach(() => {\n utils = require('.\/utils');\n utils.beforeEachProfiling();\n@@ -61,6 +63,9 @@ describe('InspectedElement', () => {\n .StoreContext;\n TreeContextController = require('react-devtools-shared\/src\/devtools\/views\/Components\/TreeContext')\n .TreeContextController;\n+\n+ \/\/ Used by inspectElementAtIndex() helper function\n+ testRendererInstance = TestRenderer.create(null);\n });\n \n afterEach(() => {\n@@ -87,16 +92,48 @@ describe('InspectedElement', () => {\n <\/BridgeContext.Provider>\n );\n \n- function useInspectedElement(id: number) {\n+ function useInspectedElement() {\n const {inspectedElement} = React.useContext(InspectedElementContext);\n return inspectedElement;\n }\n \n- function useInspectElementPath(id: number) {\n+ function useInspectElementPath() {\n const {inspectPaths} = React.useContext(InspectedElementContext);\n return inspectPaths;\n }\n \n+ function noop() {}\n+\n+ async function inspectElementAtIndex(index, useCustomHook = noop) {\n+ let didFinish = false;\n+ let inspectedElement = null;\n+\n+ function Suspender() {\n+ useCustomHook();\n+ inspectedElement = useInspectedElement();\n+ didFinish = true;\n+ return null;\n+ }\n+\n+ const id = ((store.getElementIDAtIndex(index): any): number);\n+\n+ await utils.actAsync(() => {\n+ testRendererInstance.update(\n+ \n+ \n+ \n+ <\/React.Suspense>\n+ <\/Contexts>,\n+ );\n+ }, false);\n+\n+ expect(didFinish).toBe(true);\n+\n+ return inspectedElement;\n+ }\n+\n it('should inspect the currently selected element', async done => {\n const Example = () => {\n const [count] = React.useState(1);\n@@ -108,52 +145,29 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let didFinish = false;\n-\n- function Suspender({target}) {\n- const inspectedElement = useInspectedElement(id);\n- expect(inspectedElement).toMatchInlineSnapshot(`\n- Object {\n- \"context\": null,\n- \"events\": undefined,\n- \"hooks\": Array [\n- Object {\n- \"id\": 0,\n- \"isStateEditable\": true,\n- \"name\": \"State\",\n- \"subHooks\": Array [],\n- \"value\": 1,\n- },\n- ],\n- \"id\": 2,\n- \"owners\": null,\n- \"props\": Object {\n- \"a\": 1,\n- \"b\": \"abc\",\n+ const inspectedElement = await inspectElementAtIndex(0);\n+ expect(inspectedElement).toMatchInlineSnapshot(`\n+ Object {\n+ \"context\": null,\n+ \"events\": undefined,\n+ \"hooks\": Array [\n+ Object {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"subHooks\": Array [],\n+ \"value\": 1,\n },\n- \"state\": null,\n- }\n- `);\n- didFinish = true;\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- expect(didFinish).toBe(true);\n+ ],\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"props\": Object {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ },\n+ \"state\": null,\n+ }\n+ `);\n \n done();\n });\n@@ -215,57 +229,42 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const ids = [\n+ const cases = [\n {\n \/\/ \n- id: ((store.getElementIDAtIndex(1): any): number),\n+ index: 1,\n shouldHaveLegacyContext: true,\n },\n {\n \/\/ \n- id: ((store.getElementIDAtIndex(2): any): number),\n+ index: 2,\n shouldHaveLegacyContext: false,\n },\n {\n \/\/ \n- id: ((store.getElementIDAtIndex(3): any): number),\n+ index: 3,\n shouldHaveLegacyContext: false,\n },\n {\n \/\/ \n- id: ((store.getElementIDAtIndex(5): any): number),\n+ index: 5,\n shouldHaveLegacyContext: false,\n },\n ];\n \n- function Suspender({target, shouldHaveLegacyContext}) {\n- const inspectedElement = useInspectedElement(target);\n+ for (let i = 0; i < cases.length; i++) {\n+ const {index, shouldHaveLegacyContext} = cases[i];\n \n- expect(inspectedElement.context).not.toBe(null);\n- expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);\n+ \/\/ HACK: Recreate TestRenderer instance because we rely on default state values\n+ \/\/ from props like defaultSelectedElementID and it's easier to reset here than\n+ \/\/ to read the TreeDispatcherContext and update the selected ID that way.\n+ \/\/ We're testing the inspected values here, not the context wiring, so that's ok.\n+ testRendererInstance = TestRenderer.create(null);\n \n- return null;\n- }\n+ const inspectedElement = await inspectElementAtIndex(index);\n \n- for (let i = 0; i < ids.length; i++) {\n- const {id, shouldHaveLegacyContext} = ids[i];\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ expect(inspectedElement.context).not.toBe(null);\n+ expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);\n }\n done();\n });\n@@ -279,26 +278,7 @@ describe('InspectedElement', () => {\n false,\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(id);\n- return null;\n- }\n-\n- let renderer;\n-\n- await utils.actAsync(() => {\n- renderer = TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- );\n- }, false);\n+ let inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n \"a\": 1,\n@@ -321,19 +301,7 @@ describe('InspectedElement', () => {\n jest.runOnlyPendingTimers();\n await Promise.resolve();\n \n- await utils.actAsync(\n- () =>\n- renderer.update(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n \"a\": 2,\n@@ -365,31 +333,9 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(1): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(target);\n- return null;\n- }\n-\n targetRenderCount = 0;\n \n- let renderer;\n- await utils.actAsync(\n- () =>\n- (renderer = TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- )),\n- false,\n- );\n+ let inspectedElement = await inspectElementAtIndex(1);\n expect(targetRenderCount).toBe(1);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n@@ -398,28 +344,14 @@ describe('InspectedElement', () => {\n }\n `);\n \n- const initialInspectedElement = inspectedElement;\n+ const prevInspectedElement = inspectedElement;\n \n targetRenderCount = 0;\n- inspectedElement = null;\n- await utils.actAsync(\n- () =>\n- renderer.update(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ inspectedElement = await inspectElementAtIndex(1);\n expect(targetRenderCount).toBe(0);\n- expect(inspectedElement).toEqual(initialInspectedElement);\n+ expect(inspectedElement).toEqual(prevInspectedElement);\n \n targetRenderCount = 0;\n- inspectedElement = null;\n \n await utils.actAsync(\n () =>\n@@ -433,19 +365,7 @@ describe('InspectedElement', () => {\n );\n \n \/\/ Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.\n- await utils.actAsync(\n- () =>\n- renderer.update(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ inspectedElement = await inspectElementAtIndex(1);\n expect(targetRenderCount).toBe(2);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n@@ -490,28 +410,7 @@ describe('InspectedElement', () => {\n expect(console.warn).toHaveBeenCalledTimes(1);\n expect(console.warn).toHaveBeenCalledWith('warn');\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(target);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ const inspectedElement = await inspectElementAtIndex(0);\n \n expect(inspectedElement).not.toBe(null);\n expect(targetRenderCount).toBe(2);\n@@ -546,27 +445,7 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(id);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ const inspectedElement = await inspectElementAtIndex(0);\n \n const {props} = (inspectedElement: any);\n expect(props.boolean_false).toBe(false);\n@@ -665,28 +544,7 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(id);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ const inspectedElement = await inspectElementAtIndex(0);\n \n const {\n anonymous_fn,\n@@ -875,28 +733,7 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(id);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ const inspectedElement = await inspectElementAtIndex(0);\n \n const {prop} = (inspectedElement: any).props;\n expect(prop[meta.inspectable]).toBe(false);\n@@ -921,29 +758,7 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(id);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n-\n+ const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n \"object\": Object {\n@@ -970,28 +785,7 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(id);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ const inspectedElement = await inspectElementAtIndex(0);\n \n \/\/ TRICKY: Don't use toMatchInlineSnapshot() for this test!\n \/\/ Our snapshot serializer relies on hasOwnProperty() for feature detection.\n@@ -1026,38 +820,15 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let didFinish = false;\n-\n- function Suspender({target}) {\n- const inspectedElement = useInspectedElement(id);\n- expect(inspectedElement.props).toMatchInlineSnapshot(`\n- Object {\n- \"data\": Object {\n- \"_number\": 42,\n- \"number\": 42,\n- },\n- }\n- `);\n- didFinish = true;\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- expect(didFinish).toBe(true);\n+ const inspectedElement = await inspectElementAtIndex(0);\n+ expect(inspectedElement.props).toMatchInlineSnapshot(`\n+ Object {\n+ \"data\": Object {\n+ \"_number\": 42,\n+ \"number\": 42,\n+ },\n+ }\n+ `);\n \n done();\n });\n@@ -1130,29 +901,7 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(id);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n-\n+ const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n \"object\": Object {\n@@ -1193,44 +942,23 @@ describe('InspectedElement', () => {\n value: NaN,\n writable: true,\n enumerable: true,\n- configurable: true,\n- },\n- d: {\n- value: 'normal',\n- writable: true,\n- enumerable: true,\n- configurable: true,\n- },\n- },\n- );\n- const Example = ({data}) => null;\n- const container = document.createElement('div');\n- await utils.actAsync(() =>\n- ReactDOM.render(, container),\n- );\n-\n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let inspectedElement = null;\n-\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(target);\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n+ configurable: true,\n+ },\n+ d: {\n+ value: 'normal',\n+ writable: true,\n+ enumerable: true,\n+ configurable: true,\n+ },\n+ },\n+ );\n+ const Example = ({data}) => null;\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n );\n+\n+ const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n \"data\": Object {\n@@ -1280,37 +1008,13 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n let inspectedElement = null;\n let inspectElementPath = null;\n \n- function Suspender({path, target}) {\n- inspectedElement = useInspectedElement(id);\n- inspectElementPath = useInspectElementPath(id);\n- return null;\n- }\n-\n- const renderer = TestRenderer.create(null);\n-\n- async function getInspectedElement() {\n- await utils.actAsync(\n- () =>\n- renderer.update(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- }\n-\n \/\/ Render once to get a handle on inspectElementPath()\n- await getInspectedElement();\n+ inspectedElement = await inspectElementAtIndex(0, () => {\n+ inspectElementPath = useInspectElementPath();\n+ });\n \n async function loadPath(path) {\n TestUtilsAct(() => {\n@@ -1319,7 +1023,8 @@ describe('InspectedElement', () => {\n jest.runOnlyPendingTimers();\n });\n });\n- await getInspectedElement();\n+\n+ inspectedElement = await inspectElementAtIndex(0);\n }\n \n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -1448,37 +1153,13 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n let inspectedElement = null;\n let inspectElementPath = null;\n \n- function Suspender({path, target}) {\n- inspectedElement = useInspectedElement(id);\n- inspectElementPath = useInspectElementPath(id);\n- return null;\n- }\n-\n- const renderer = TestRenderer.create(null);\n-\n- async function getInspectedElement() {\n- await utils.actAsync(\n- () =>\n- renderer.update(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- }\n-\n \/\/ Render once to get a handle on inspectElementPath()\n- await getInspectedElement();\n+ inspectedElement = await inspectElementAtIndex(0, () => {\n+ inspectElementPath = useInspectElementPath();\n+ });\n \n async function loadPath(path) {\n TestUtilsAct(() => {\n@@ -1487,7 +1168,8 @@ describe('InspectedElement', () => {\n jest.runOnlyPendingTimers();\n });\n });\n- await getInspectedElement();\n+\n+ inspectedElement = await inspectElementAtIndex(0);\n }\n \n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -1556,37 +1238,13 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n let inspectedElement = null;\n let inspectElementPath = null;\n \n- function Suspender({path, target}) {\n- inspectedElement = useInspectedElement(id);\n- inspectElementPath = useInspectElementPath(id);\n- return null;\n- }\n-\n- const renderer = TestRenderer.create(null);\n-\n- async function getInspectedElement() {\n- await utils.actAsync(\n- () =>\n- renderer.update(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- }\n-\n \/\/ Render once to get a handle on inspectElementPath()\n- await getInspectedElement();\n+ inspectedElement = await inspectElementAtIndex(0, () => {\n+ inspectElementPath = useInspectElementPath();\n+ });\n \n async function loadPath(path) {\n TestUtilsAct(() => {\n@@ -1595,7 +1253,8 @@ describe('InspectedElement', () => {\n jest.runOnlyPendingTimers();\n });\n });\n- await getInspectedElement();\n+\n+ inspectedElement = await inspectElementAtIndex(0);\n }\n \n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -1690,7 +1349,7 @@ describe('InspectedElement', () => {\n \/\/ Wait for pending poll-for-update and then update inspected element data.\n jest.runOnlyPendingTimers();\n await Promise.resolve();\n- await getInspectedElement();\n+ inspectedElement = await inspectElementAtIndex(0);\n \n expect(inspectedElement.props).toMatchInlineSnapshot(`\n Object {\n@@ -1739,37 +1398,13 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n let inspectedElement = null;\n let inspectElementPath = null;\n \n- function Suspender({path, target}) {\n- inspectedElement = useInspectedElement(id);\n- inspectElementPath = useInspectElementPath(id);\n- return null;\n- }\n-\n- const renderer = TestRenderer.create(null);\n-\n- async function getInspectedElement() {\n- await utils.actAsync(\n- () =>\n- renderer.update(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- }\n-\n \/\/ Render once to get a handle on inspectElementPath()\n- await getInspectedElement();\n+ inspectedElement = await inspectElementAtIndex(0, () => {\n+ inspectElementPath = useInspectElementPath();\n+ });\n \n async function loadPath(path) {\n TestUtilsAct(() => {\n@@ -1778,7 +1413,8 @@ describe('InspectedElement', () => {\n jest.runOnlyPendingTimers();\n });\n });\n- await getInspectedElement();\n+\n+ inspectedElement = await inspectElementAtIndex(0);\n }\n \n expect(inspectedElement.props).toMatchInlineSnapshot(`\n@@ -1841,52 +1477,29 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n- let didFinish = false;\n-\n- function Suspender({target}) {\n- const inspectedElement = useInspectedElement(id);\n- expect(inspectedElement).toMatchInlineSnapshot(`\n- Object {\n- \"context\": null,\n- \"events\": undefined,\n- \"hooks\": Array [\n- Object {\n- \"id\": null,\n- \"isStateEditable\": false,\n- \"name\": \"Context\",\n- \"subHooks\": Array [],\n- \"value\": true,\n- },\n- ],\n- \"id\": 2,\n- \"owners\": null,\n- \"props\": Object {\n- \"a\": 1,\n- \"b\": \"abc\",\n+ const inspectedElement = await inspectElementAtIndex(0);\n+ expect(inspectedElement).toMatchInlineSnapshot(`\n+ Object {\n+ \"context\": null,\n+ \"events\": undefined,\n+ \"hooks\": Array [\n+ Object {\n+ \"id\": null,\n+ \"isStateEditable\": false,\n+ \"name\": \"Context\",\n+ \"subHooks\": Array [],\n+ \"value\": true,\n },\n- \"state\": null,\n- }\n- `);\n- didFinish = true;\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- expect(didFinish).toBe(true);\n+ ],\n+ \"id\": 2,\n+ \"owners\": null,\n+ \"props\": Object {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ },\n+ \"state\": null,\n+ }\n+ `);\n \n done();\n });\n@@ -1913,46 +1526,30 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);\n \n- function Suspender({target}) {\n- storeAsGlobal = (elementID: number, path: Array) => {\n- const rendererID = store.getRendererIDForElement(elementID);\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ await inspectElementAtIndex(0, () => {\n+ storeAsGlobal = (path: Array) => {\n+ const rendererID = store.getRendererIDForElement(id);\n if (rendererID !== null) {\n const {\n storeAsGlobal: storeAsGlobalAPI,\n } = require('react-devtools-shared\/src\/backendAPI');\n storeAsGlobalAPI({\n bridge,\n- id: elementID,\n+ id,\n path,\n rendererID,\n });\n }\n };\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ });\n \n jest.spyOn(console, 'log').mockImplementation(() => {});\n \n \/\/ Should store the whole value (not just the hydrated parts)\n- storeAsGlobal(id, ['props', 'nestedObject']);\n+ storeAsGlobal(['props', 'nestedObject']);\n jest.runOnlyPendingTimers();\n expect(console.log).toHaveBeenCalledWith('$reactTemp0');\n expect(global.$reactTemp0).toBe(nestedObject);\n@@ -1960,7 +1557,7 @@ describe('InspectedElement', () => {\n console.log.mockReset();\n \n \/\/ Should store the nested property specified (not just the outer value)\n- storeAsGlobal(id, ['props', 'nestedObject', 'a', 'b']);\n+ storeAsGlobal(['props', 'nestedObject', 'a', 'b']);\n jest.runOnlyPendingTimers();\n expect(console.log).toHaveBeenCalledWith('$reactTemp1');\n expect(global.$reactTemp1).toBe(nestedObject.a.b);\n@@ -1990,45 +1587,28 @@ describe('InspectedElement', () => {\n ),\n );\n \n- const id = ((store.getElementIDAtIndex(0): any): number);\n-\n let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);\n \n- function Suspender({target}) {\n- copyPath = (elementID: number, path: Array) => {\n- const rendererID = store.getRendererIDForElement(elementID);\n+ const id = ((store.getElementIDAtIndex(0): any): number);\n+ await inspectElementAtIndex(0, () => {\n+ copyPath = (path: Array) => {\n+ const rendererID = store.getRendererIDForElement(id);\n if (rendererID !== null) {\n const {\n copyInspectedElementPath,\n } = require('react-devtools-shared\/src\/backendAPI');\n copyInspectedElementPath({\n bridge,\n- id: elementID,\n+ id,\n path,\n rendererID,\n });\n }\n };\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- expect(copyPath).not.toBeNull();\n+ });\n \n \/\/ Should copy the whole value (not just the hydrated parts)\n- copyPath(id, ['props', 'nestedObject']);\n+ copyPath(['props', 'nestedObject']);\n jest.runOnlyPendingTimers();\n expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);\n expect(global.mockClipboardCopy).toHaveBeenCalledWith(\n@@ -2038,7 +1618,7 @@ describe('InspectedElement', () => {\n global.mockClipboardCopy.mockReset();\n \n \/\/ Should copy the nested property specified (not just the outer value)\n- copyPath(id, ['props', 'nestedObject', 'a', 'b']);\n+ copyPath(['props', 'nestedObject', 'a', 'b']);\n jest.runOnlyPendingTimers();\n expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);\n expect(global.mockClipboardCopy).toHaveBeenCalledWith(\n@@ -2098,48 +1678,32 @@ describe('InspectedElement', () => {\n \n let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);\n \n- function Suspender({target}) {\n- copyPath = (elementID: number, path: Array) => {\n- const rendererID = store.getRendererIDForElement(elementID);\n+ await inspectElementAtIndex(0, () => {\n+ copyPath = (path: Array) => {\n+ const rendererID = store.getRendererIDForElement(id);\n if (rendererID !== null) {\n const {\n copyInspectedElementPath,\n } = require('react-devtools-shared\/src\/backendAPI');\n copyInspectedElementPath({\n bridge,\n- id: elementID,\n+ id,\n path,\n rendererID,\n });\n }\n };\n- return null;\n- }\n-\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n- expect(copyPath).not.toBeNull();\n+ });\n \n \/\/ Should copy the whole value (not just the hydrated parts)\n- copyPath(id, ['props']);\n+ copyPath(['props']);\n jest.runOnlyPendingTimers();\n \/\/ Should not error despite lots of unserialized values.\n \n global.mockClipboardCopy.mockReset();\n \n \/\/ Should copy the nested property specified (not just the outer value)\n- copyPath(id, ['props', 'bigInt']);\n+ copyPath(['props', 'bigInt']);\n jest.runOnlyPendingTimers();\n expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);\n expect(global.mockClipboardCopy).toHaveBeenCalledWith(\n@@ -2149,7 +1713,7 @@ describe('InspectedElement', () => {\n global.mockClipboardCopy.mockReset();\n \n \/\/ Should copy the nested property specified (not just the outer value)\n- copyPath(id, ['props', 'typedArray']);\n+ copyPath(['props', 'typedArray']);\n jest.runOnlyPendingTimers();\n expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);\n expect(global.mockClipboardCopy).toHaveBeenCalledWith(\n@@ -2160,12 +1724,6 @@ describe('InspectedElement', () => {\n });\n \n it('should display complex values of useDebugValue', async done => {\n- let inspectedElement = null;\n- function Suspender({target}) {\n- inspectedElement = useInspectedElement(target);\n- return null;\n- }\n-\n const container = document.createElement('div');\n \n function useDebuggableHook() {\n@@ -2182,23 +1740,7 @@ describe('InspectedElement', () => {\n ReactDOM.render(, container),\n );\n \n- const ignoredComplexValueIndex = 0;\n- const ignoredComplexValueId = ((store.getElementIDAtIndex(\n- ignoredComplexValueIndex,\n- ): any): number);\n- await utils.actAsync(\n- () =>\n- TestRenderer.create(\n- \n- \n- \n- <\/React.Suspense>\n- <\/Contexts>,\n- ),\n- false,\n- );\n+ const inspectedElement = await inspectElementAtIndex(0);\n expect(inspectedElement.hooks).toMatchInlineSnapshot(`\n Array [\n Object {\n@@ -2224,6 +1766,145 @@ describe('InspectedElement', () => {\n done();\n });\n \n+ describe('$r', () => {\n+ it('should support function components', async done => {\n+ const Example = () => {\n+ const [count] = React.useState(1);\n+ return count;\n+ };\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+\n+ await inspectElementAtIndex(0);\n+\n+ expect(global.$r).toMatchInlineSnapshot(`\n+ Object {\n+ \"hooks\": Array [\n+ Object {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"subHooks\": Array [],\n+ \"value\": 1,\n+ },\n+ ],\n+ \"props\": Object {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ },\n+ \"type\": [Function],\n+ }\n+ `);\n+\n+ done();\n+ });\n+\n+ it('should support memoized function components', async done => {\n+ const Example = React.memo(function Example(props) {\n+ const [count] = React.useState(1);\n+ return count;\n+ });\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+\n+ await inspectElementAtIndex(0);\n+\n+ expect(global.$r).toMatchInlineSnapshot(`\n+ Object {\n+ \"hooks\": Array [\n+ Object {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"subHooks\": Array [],\n+ \"value\": 1,\n+ },\n+ ],\n+ \"props\": Object {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ },\n+ \"type\": [Function],\n+ }\n+ `);\n+\n+ done();\n+ });\n+\n+ it('should support forward refs', async done => {\n+ const Example = React.forwardRef(function Example(props, ref) {\n+ const [count] = React.useState(1);\n+ return count;\n+ });\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+\n+ await inspectElementAtIndex(0);\n+\n+ expect(global.$r).toMatchInlineSnapshot(`\n+ Object {\n+ \"hooks\": Array [\n+ Object {\n+ \"id\": 0,\n+ \"isStateEditable\": true,\n+ \"name\": \"State\",\n+ \"subHooks\": Array [],\n+ \"value\": 1,\n+ },\n+ ],\n+ \"props\": Object {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ },\n+ \"type\": [Function],\n+ }\n+ `);\n+\n+ done();\n+ });\n+\n+ it('should support class components', async done => {\n+ class Example extends React.Component {\n+ state = {\n+ count: 0,\n+ };\n+ render() {\n+ return null;\n+ }\n+ }\n+\n+ const container = document.createElement('div');\n+ await utils.actAsync(() =>\n+ ReactDOM.render(, container),\n+ );\n+\n+ await inspectElementAtIndex(0);\n+\n+ expect(global.$r.props).toMatchInlineSnapshot(`\n+ Object {\n+ \"a\": 1,\n+ \"b\": \"abc\",\n+ }\n+ `);\n+ expect(global.$r.state).toMatchInlineSnapshot(`\n+ Object {\n+ \"count\": 0,\n+ }\n+ `);\n+\n+ done();\n+ });\n+ });\n+\n describe('inline errors and warnings', () => {\n \/\/ Some actions require the Fiber id.\n \/\/ In those instances you might want to make assertions based on the ID instead of the index.\n@@ -2239,7 +1920,7 @@ describe('InspectedElement', () => {\n let warnings = null;\n \n function Suspender({target}) {\n- const inspectedElement = useInspectedElement(id);\n+ const inspectedElement = useInspectedElement();\n errors = inspectedElement.errors;\n warnings = inspectedElement.warnings;\n return null;\n"}

dillon1000/react

Files changed