{"patch":"diff --git a\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\nnew file mode 100644\nindex 0000000000..fd9c4dbf1f\n--- \/dev\/null\n+++ b\/src\/__tests__\/__snapshots__\/treeContext-test.js.snap\n@@ -0,0 +1,713 @@\n+\/\/ Jest Snapshot v1, https:\/\/goo.gl\/fbAQLP\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": Array [\n+ Object {\n+ \"children\": Array [\n+ 4,\n+ 5,\n+ ],\n+ \"depth\": 0,\n+ \"displayName\": \"Parent\",\n+ \"id\": 3,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 2,\n+ \"parentID\": 2,\n+ \"type\": 5,\n+ \"weight\": 3,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"id\": 4,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ Object {\n+ \"children\": Array [],\n+ \"depth\": 1,\n+ \"displayName\": \"Child\",\n+ \"id\": 5,\n+ \"isCollapsed\": false,\n+ \"key\": null,\n+ \"ownerID\": 3,\n+ \"parentID\": 3,\n+ \"type\": 5,\n+ \"weight\": 1,\n+ },\n+ ],\n+ \"ownerID\": 3,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `\n+[root]\n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `\n+[root]\n+ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 3: search for \"f\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 2,\n+ ],\n+ \"searchText\": \"f\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should find elements matching search text: 4: search for \"q\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"q\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `\n+[root]\n+ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 3,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 2,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `\n+[root]\n+ \n+ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for \"ba\" 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 1,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 2,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": 0,\n+ \"searchResults\": Array [\n+ 3,\n+ 4,\n+ 5,\n+ ],\n+ \"searchText\": \"ba\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `\n+Object {\n+ \"inspectedElementID\": 8,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 8,\n+ \"selectedElementIndex\": 6,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `\n+Object {\n+ \"inspectedElementID\": 6,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 6,\n+ \"selectedElementIndex\": 4,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 7,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `\n+[root]\n+ ▾ \n+ ▾ \n+ \n+ \n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `\n+Object {\n+ \"inspectedElementID\": null,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": null,\n+ \"selectedElementIndex\": null,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `\n+Object {\n+ \"inspectedElementID\": 3,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 3,\n+ \"selectedElementIndex\": 1,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `\n+Object {\n+ \"inspectedElementID\": 4,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 4,\n+ \"selectedElementIndex\": 2,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `\n+Object {\n+ \"inspectedElementID\": 5,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 5,\n+ \"selectedElementIndex\": 3,\n+}\n+`;\n+\n+exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `\n+Object {\n+ \"inspectedElementID\": 2,\n+ \"numElements\": 4,\n+ \"ownerFlatTree\": null,\n+ \"ownerID\": null,\n+ \"searchIndex\": null,\n+ \"searchResults\": Array [],\n+ \"searchText\": \"\",\n+ \"selectedElementID\": 2,\n+ \"selectedElementIndex\": 0,\n+}\n+`;\ndiff --git a\/src\/__tests__\/ownersListContext-test.js b\/src\/__tests__\/ownersListContext-test.js\nindex 348f6932c4..06464e663a 100644\n--- a\/src\/__tests__\/ownersListContext-test.js\n+++ b\/src\/__tests__\/ownersListContext-test.js\n@@ -53,15 +53,15 @@ describe('OwnersListContext', () => {\n \n it('should fetch the owners list for the selected element', async done => {\n const Grandparent = () => ;\n- const Parent = ({ count }) => {\n+ const Parent = () => {\n return (\n \n- \n- \n+ \n+ \n <\/React.Fragment>\n );\n };\n- const Child = ({ duration }) => null;\n+ const Child = () => null;\n \n utils.act(() =>\n ReactDOM.render(, document.createElement('div'))\n@@ -118,15 +118,15 @@ describe('OwnersListContext', () => {\n store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];\n \n const Grandparent = () => ;\n- const Parent = ({ count }) => {\n+ const Parent = () => {\n return (\n \n- \n- \n+ \n+ \n <\/React.Fragment>\n );\n };\n- const Child = ({ duration }) => null;\n+ const Child = () => null;\n \n utils.act(() =>\n ReactDOM.render(, document.createElement('div'))\ndiff --git a\/src\/__tests__\/treeContext-test.js b\/src\/__tests__\/treeContext-test.js\nnew file mode 100644\nindex 0000000000..0c8f15d4b0\n--- \/dev\/null\n+++ b\/src\/__tests__\/treeContext-test.js\n@@ -0,0 +1,428 @@\n+\/\/ @flow\n+\n+import typeof ReactTestRenderer from 'react-test-renderer';\n+import type Bridge from 'src\/bridge';\n+import type Store from 'src\/devtools\/store';\n+import type {\n+ DispatcherContext,\n+ StateContext,\n+} from 'src\/devtools\/views\/Components\/TreeContext';\n+\n+describe('TreeListContext', () => {\n+ let React;\n+ let ReactDOM;\n+ let TestRenderer: ReactTestRenderer;\n+ let bridge: Bridge;\n+ let store: Store;\n+ let utils;\n+\n+ let BridgeContext;\n+ let StoreContext;\n+ let TreeContext;\n+\n+ let dispatch: DispatcherContext;\n+ let state: StateContext;\n+\n+ beforeEach(() => {\n+ utils = require('.\/utils');\n+ utils.beforeEachProfiling();\n+\n+ bridge = global.bridge;\n+ store = global.store;\n+ store.collapseNodesByDefault = false;\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestRenderer = utils.requireTestRenderer();\n+\n+ BridgeContext = require('src\/devtools\/views\/context').BridgeContext;\n+ StoreContext = require('src\/devtools\/views\/context').StoreContext;\n+ TreeContext = require('src\/devtools\/views\/Components\/TreeContext');\n+ });\n+\n+ afterEach(() => {\n+ \/\/ Reset between tests\n+ dispatch = ((null: any): DispatcherContext);\n+ state = ((null: any): StateContext);\n+ });\n+\n+ const Capture = () => {\n+ dispatch = React.useContext(TreeContext.TreeDispatcherContext);\n+ state = React.useContext(TreeContext.TreeStateContext);\n+ return null;\n+ };\n+\n+ const Contexts = () => {\n+ return (\n+ \n+ \n+ \n+ \n+ <\/TreeContext.TreeContextController>\n+ <\/StoreContext.Provider>\n+ <\/BridgeContext.Provider>\n+ );\n+ };\n+\n+ describe('tree state', () => {\n+ it('should select the next and previous elements in the tree', () => {\n+ const Grandparent = () => ;\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex < store.numElements - 1\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot(`3: select element after (${index})`);\n+ }\n+\n+ while (\n+ state.selectedElementIndex !== null &&\n+ state.selectedElementIndex > 0\n+ ) {\n+ const index = ((state.selectedElementIndex: any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot(`4: select element before (${index})`);\n+ }\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('5: select previous wraps around to last');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('6: select next wraps around to first');\n+ });\n+\n+ it('should select child elements', () => {\n+ const Grandparent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 })\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: select first element');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: select Child');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more children to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toEqual(previousState);\n+ });\n+\n+ it('should select parent elements and then collapse', () => {\n+ const Grandparent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ const lastChildID = store.getElementIDAtIndex(store.numElements - 1);\n+\n+ utils.act(() =>\n+ dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID })\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: select last child');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: select Parent');\n+\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: select Grandparent');\n+\n+ const previousState = state;\n+\n+ \/\/ There are no more ancestors to select, so this should be a no-op\n+ utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toEqual(previousState);\n+ });\n+ });\n+\n+ describe('search state', () => {\n+ it('should find elements matching search text', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: search for \"f\"');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'q' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: search for \"q\"');\n+ });\n+\n+ it('should select the next and previous items within the search results', () => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ document.createElement('div')\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: go to third result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('5: go to second result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('6: go to first result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('7: wrap to last result');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('8: wrap to first result');\n+ });\n+\n+ it('should add newly mounted elements to the search results set if they match the current text', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ await utils.actSuspense(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: mount Baz');\n+\n+ done();\n+ });\n+\n+ it('should remove unmounted elements from the search results set', async done => {\n+ const Foo = () => null;\n+ const Bar = () => null;\n+ const Baz = () => null;\n+\n+ const container = document.createElement('div');\n+\n+ utils.act(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: search for \"ba\"');\n+\n+ utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: go to second result');\n+\n+ await utils.actSuspense(() =>\n+ ReactDOM.render(\n+ \n+ \n+ \n+ <\/React.Fragment>,\n+ container\n+ )\n+ );\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('4: unmount Baz');\n+\n+ done();\n+ });\n+ });\n+\n+ describe('owners state', () => {\n+ it('should support entering and existing the owners tree view', () => {\n+ const Grandparent = () => ;\n+ const Parent = () => (\n+ \n+ \n+ \n+ <\/React.Fragment>\n+ );\n+ const Child = () => null;\n+\n+ utils.act(() =>\n+ ReactDOM.render(, document.createElement('div'))\n+ );\n+\n+ expect(store).toMatchSnapshot('0: mount');\n+\n+ let renderer;\n+ utils.act(() => (renderer = TestRenderer.create()));\n+ expect(state).toMatchSnapshot('1: initial state');\n+\n+ let parentID = ((store.getElementIDAtIndex(1): any): number);\n+ utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('2: parent owners tree');\n+\n+ utils.act(() => dispatch({ type: 'RESET_OWNER_STACK' }));\n+ utils.act(() => renderer.update());\n+ expect(state).toMatchSnapshot('3: final state');\n+ });\n+ });\n+});\ndiff --git a\/src\/devtools\/views\/Components\/TreeContext.js b\/src\/devtools\/views\/Components\/TreeContext.js\nindex 6f65e7920d..1952497cbd 100644\n--- a\/src\/devtools\/views\/Components\/TreeContext.js\n+++ b\/src\/devtools\/views\/Components\/TreeContext.js\n@@ -38,7 +38,7 @@ import Store from '..\/..\/store';\n \n import type { Element } from '.\/types';\n \n-type StateContext = {|\n+export type StateContext = {|\n \/\/ Tree\n numElements: number,\n selectedElementID: number | null,\n@@ -117,7 +117,7 @@ type Action =\n | ACTION_SET_SEARCH_TEXT\n | ACTION_UPDATE_INSPECTED_ELEMENT_ID;\n \n-type DispatcherContext = (action: Action) => void;\n+export type DispatcherContext = (action: Action) => void;\n \n const TreeStateContext = createContext(\n ((null: any): StateContext)\n","commit":{"authoredAt":"2019-05-09T15:52:50-07:00","shortRevision":"427f0f63c1","subject":"Added TreeContext tests","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com","revision":"427f0f63c1eeba330dc80b6fb3ac2930bc17e7fd"},"parents":["5daf9b626f12c291c3c46918ae0a01a8a94c7461"],"body":"","files":[{"path":"src\/__tests__\/__snapshots__\/treeContext-test.js.snap","status":"A"},{"path":"src\/__tests__\/ownersListContext-test.js","status":"M"},{"path":"src\/__tests__\/treeContext-test.js","status":"A"},{"path":"src\/devtools\/views\/Components\/TreeContext.js","status":"M"}]}

dillon1000/react

Files changed