feat: match HOC display names during search (#360)

* feat: match HOC display names during search * chore: update tests for new search logic
facebook · Aug 5, 2019 · 6f1e283 · 6f1e283
1 parent 6b3ae64
commit 6f1e283
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git 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:
     <Foo>
     <Bar>
     <Baz>
+    <Qux> [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]
     <Foo>

diff --git a/src/__tests__/treeContext-test.js b/src/__tests__/treeContext-test.js
@@ -270,13 +270,17 @@ describe('TreeListContext', () => {
       const Foo = () => null;
       const Bar = () => null;
       const Baz = () => null;
+      const Qux = () => null;
+
+      Qux.displayName = `withHOC(${Qux.name})`;
 
       utils.act(() =>
         ReactDOM.render(
           <React.Fragment>
             <Foo />
             <Bar />
             <Baz />
+            <Qux />
           </React.Fragment>,
           document.createElement('div')
         )
@@ -288,17 +292,25 @@ describe('TreeListContext', () => {
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
       expect(state).toMatchSnapshot('1: initial state');
 
+      // NOTE: multi-match
       utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
       utils.act(() => renderer.update(<Contexts />));
       expect(state).toMatchSnapshot('2: search for "ba"');
 
+      // NOTE: single match
       utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));
       utils.act(() => renderer.update(<Contexts />));
       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(<Contexts />));
+      expect(state).toMatchSnapshot('4: search for "y"');
+
+      // NOTE: HOC match
+      utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'w' }));
       utils.act(() => renderer.update(<Contexts />));
-      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
@@ -773,14 +773,20 @@ function recursivelySearchTree(
   regExp: RegExp,
   searchResults: Array<number>
 ): 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)
   );