diff --git a/src/__tests__/__snapshots__/treeContext-test.js.snap b/src/__tests__/__snapshots__/treeContext-test.js.snap index dd268147d9638..33230c69aa6b1 100644 --- a/src/__tests__/__snapshots__/treeContext-test.js.snap +++ b/src/__tests__/__snapshots__/treeContext-test.js.snap @@ -558,12 +558,13 @@ exports[`TreeListContext search state should find elements matching search text: + [withHOC] `; exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = ` Object { "inspectedElementID": null, - "numElements": 3, + "numElements": 4, "ownerFlatTree": null, "ownerID": null, "searchIndex": null, @@ -577,7 +578,7 @@ Object { exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = ` Object { "inspectedElementID": 3, - "numElements": 3, + "numElements": 4, "ownerFlatTree": null, "ownerID": null, "searchIndex": 0, @@ -594,7 +595,7 @@ Object { exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = ` Object { "inspectedElementID": 2, - "numElements": 3, + "numElements": 4, "ownerFlatTree": null, "ownerID": null, "searchIndex": 0, @@ -607,20 +608,36 @@ Object { } `; -exports[`TreeListContext search state should find elements matching search text: 4: search for "q" 1`] = ` +exports[`TreeListContext search state should find elements matching search text: 4: search for "y" 1`] = ` Object { "inspectedElementID": 2, - "numElements": 3, + "numElements": 4, "ownerFlatTree": null, "ownerID": null, "searchIndex": null, "searchResults": Array [], - "searchText": "q", + "searchText": "y", "selectedElementID": 2, "selectedElementIndex": 0, } `; +exports[`TreeListContext search state should find elements matching search text: 5: search for "w" 1`] = ` +Object { + "inspectedElementID": 5, + "numElements": 4, + "ownerFlatTree": null, + "ownerID": null, + "searchIndex": 0, + "searchResults": Array [ + 5, + ], + "searchText": "w", + "selectedElementID": 5, + "selectedElementIndex": 3, +} +`; + exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = ` [root] diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js index ecf8d47717436..68d3ea422b496 100644 --- a/src/__tests__/treeContext-test.js +++ b/src/__tests__/treeContext-test.js @@ -270,6 +270,9 @@ describe('TreeListContext', () => { const Foo = () => null; const Bar = () => null; const Baz = () => null; + const Qux = () => null; + + Qux.displayName = `withHOC(${Qux.name})`; utils.act(() => ReactDOM.render( @@ -277,6 +280,7 @@ describe('TreeListContext', () => { + , document.createElement('div') ) @@ -288,17 +292,25 @@ describe('TreeListContext', () => { utils.act(() => (renderer = TestRenderer.create())); expect(state).toMatchSnapshot('1: initial state'); + // NOTE: multi-match utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' })); utils.act(() => renderer.update()); expect(state).toMatchSnapshot('2: search for "ba"'); + // NOTE: single match utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' })); utils.act(() => renderer.update()); expect(state).toMatchSnapshot('3: search for "f"'); - utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'q' })); + // NOTE: no match + utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'y' })); + utils.act(() => renderer.update()); + expect(state).toMatchSnapshot('4: search for "y"'); + + // NOTE: HOC match + utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'w' })); utils.act(() => renderer.update()); - expect(state).toMatchSnapshot('4: search for "q"'); + expect(state).toMatchSnapshot('5: search for "w"'); }); it('should select the next and previous items within the search results', () => { diff --git a/src/devtools/views/Components/TreeContext.js b/src/devtools/views/Components/TreeContext.js index 51697531f6731..9ae209da69b79 100644 --- a/src/devtools/views/Components/TreeContext.js +++ b/src/devtools/views/Components/TreeContext.js @@ -773,14 +773,20 @@ function recursivelySearchTree( regExp: RegExp, searchResults: Array ): void { - const { children, displayName } = ((store.getElementByID( + const { children, displayName, hocDisplayNames } = ((store.getElementByID( elementID ): any): Element); - if (displayName !== null) { - if (regExp.test(displayName)) { - searchResults.push(elementID); - } + + if (displayName != null && regExp.test(displayName) === true) { + searchResults.push(elementID); + } else if ( + hocDisplayNames != null && + hocDisplayNames.length > 0 && + hocDisplayNames.some(name => regExp.test(name)) === true + ) { + searchResults.push(elementID); } + children.forEach(childID => recursivelySearchTree(store, childID, regExp, searchResults) );