feat: match HOC display names during search (#360)
* feat: match HOC display names during search * chore: update tests for new search logic
Sam Horton committed
Aug 5, 2019 at 11:44 UTC
6f1e283b764db82c9ad922faf5d55cd523d0b9e6
3 files changed
+48
-13
src/__tests__/__snapshots__/treeContext-test.js.snap
+23
-6
@@ -558,12 +558,13 @@ exports[`TreeListContext search state should find elements matching search text:
558
<Foo>
559
<Bar>
560
<Baz>
561
+ <Qux> [withHOC]
562
`;
563
564
exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `
565
Object {
566
"inspectedElementID": null,
566
- "numElements": 3,
567
+ "numElements": 4,
568
"ownerFlatTree": null,
569
"ownerID": null,
570
"searchIndex": null,
@@ -577,7 +578,7 @@ Object {
578
exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = `
579
Object {
580
"inspectedElementID": 3,
580
- "numElements": 3,
581
+ "numElements": 4,
582
"ownerFlatTree": null,
583
"ownerID": null,
584
"searchIndex": 0,
@@ -594,7 +595,7 @@ Object {
595
exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = `
596
Object {
597
"inspectedElementID": 2,
597
- "numElements": 3,
598
+ "numElements": 4,
599
"ownerFlatTree": null,
600
"ownerID": null,
601
"searchIndex": 0,
@@ -607,20 +608,36 @@ Object {
608
}
609
`;
610
610
-exports[`TreeListContext search state should find elements matching search text: 4: search for "q" 1`] = `
611
+exports[`TreeListContext search state should find elements matching search text: 4: search for "y" 1`] = `
612
Object {
613
"inspectedElementID": 2,
613
- "numElements": 3,
614
+ "numElements": 4,
615
"ownerFlatTree": null,
616
"ownerID": null,
617
"searchIndex": null,
618
"searchResults": Array [],
618
- "searchText": "q",
619
+ "searchText": "y",
620
"selectedElementID": 2,
621
"selectedElementIndex": 0,
622
}
623
`;
624
625
+exports[`TreeListContext search state should find elements matching search text: 5: search for "w" 1`] = `
626
+Object {
627
+ "inspectedElementID": 5,
628
+ "numElements": 4,
629
+ "ownerFlatTree": null,
630
+ "ownerID": null,
631
+ "searchIndex": 0,
632
+ "searchResults": Array [
633
+ 5,
634
+ ],
635
+ "searchText": "w",
636
+ "selectedElementID": 5,
637
+ "selectedElementIndex": 3,
638
+}
639
+`;
640
+
641
exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `
642
[root]
643
<Foo>
src/__tests__/treeContext-test.js
+14
-2
@@ -270,6 +270,9 @@ describe('TreeListContext', () => {
270
const Foo = () => null;
271
const Bar = () => null;
272
const Baz = () => null;
273
+ const Qux = () => null;
274
+
275
+ Qux.displayName = `withHOC(${Qux.name})`;
276
277
utils.act(() =>
278
ReactDOM.render(
@@ -277,6 +280,7 @@ describe('TreeListContext', () => {
280
<Foo />
281
<Bar />
282
<Baz />
283
+ <Qux />
284
</React.Fragment>,
285
document.createElement('div')
286
)
@@ -288,17 +292,25 @@ describe('TreeListContext', () => {
292
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
293
expect(state).toMatchSnapshot('1: initial state');
294
295
+ // NOTE: multi-match
296
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
297
utils.act(() => renderer.update(<Contexts />));
298
expect(state).toMatchSnapshot('2: search for "ba"');
299
300
+ // NOTE: single match
301
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));
302
utils.act(() => renderer.update(<Contexts />));
303
expect(state).toMatchSnapshot('3: search for "f"');
304
299
- utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'q' }));
305
+ // NOTE: no match
306
+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'y' }));
307
+ utils.act(() => renderer.update(<Contexts />));
308
+ expect(state).toMatchSnapshot('4: search for "y"');
309
+
310
+ // NOTE: HOC match
311
+ utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'w' }));
312
utils.act(() => renderer.update(<Contexts />));
301
- expect(state).toMatchSnapshot('4: search for "q"');
313
+ expect(state).toMatchSnapshot('5: search for "w"');
314
});
315
316
it('should select the next and previous items within the search results', () => {
src/devtools/views/Components/TreeContext.js
+11
-5
@@ -773,14 +773,20 @@ function recursivelySearchTree(
773
regExp: RegExp,
774
searchResults: Array<number>
775
): void {
776
- const { children, displayName } = ((store.getElementByID(
776
+ const { children, displayName, hocDisplayNames } = ((store.getElementByID(
777
elementID
778
): any): Element);
779
- if (displayName !== null) {
780
- if (regExp.test(displayName)) {
781
- searchResults.push(elementID);
782
- }
779
+
780
+ if (displayName != null && regExp.test(displayName) === true) {
781
+ searchResults.push(elementID);
782
+ } else if (
783
+ hocDisplayNames != null &&
784
+ hocDisplayNames.length > 0 &&
785
+ hocDisplayNames.some(name => regExp.test(name)) === true
786
+ ) {
787
+ searchResults.push(elementID);
788
}
789
+
790
children.forEach(childID =>
791
recursivelySearchTree(store, childID, regExp, searchResults)
792
);