From 2e2da6027f2980901ca23f484343f8828c515190 Mon Sep 17 00:00:00 2001
From: UselessPickles <jlau@uselesspickles.com>
Date: Tue, 23 Jan 2018 13:18:02 -0500
Subject: [PATCH] [enzyme] Fix signature of the "filter" method. (#23108)

* Improve signature of ShallowWrapper.filter and ReactWrapper.filter to
return appropriate specific types when the apram is a ComponentClass or
StatelessComponent.

* Improve signature of filter() to return a wrapper with HTMLAttributes props when a string CSS selector is provided.

* Improve unit tests to properly test various signatures of methods that are expected to return wrappers with different props types.

* [enzyme] Fix signature of "filter" when param type does not narrow down the possible type of the element/component collection.

* [enzyme] Fix incorrect use of "this" return type in "filter" signatures.
---
 types/enzyme/enzyme-tests.tsx | 14 ++++++++++++--
 types/enzyme/index.d.ts       |  6 ++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/types/enzyme/enzyme-tests.tsx b/types/enzyme/enzyme-tests.tsx
index 720037cbfa..50f9bf3f38 100644
--- a/types/enzyme/enzyme-tests.tsx
+++ b/types/enzyme/enzyme-tests.tsx
@@ -109,8 +109,13 @@ function ShallowWrapperTest() {
     function test_filter() {
         anotherComponentWrapper = shallowWrapper.filter(AnotherComponent);
         anotherStatelessWrapper = shallowWrapper.filter(AnotherStatelessComponent);
+        // NOTE: The following calls to filter do not narrow down the possible type of the result based
+        //       on the type of the param, so the return type should not be different than the original
+        //       "this". This is a special case for "filter" vs other methods like "find", because "filter"
+        //       is guaranteed to return only a subset of the existing list of components/elements without
+        //       finding/adding more.
         shallowWrapper = shallowWrapper.filter({ numberProp: 12 });
-        elementWrapper = shallowWrapper.filter('.selector');
+        shallowWrapper = shallowWrapper.filter('.selector');
     }
 
     function test_filterWhere() {
@@ -487,10 +492,15 @@ function ReactWrapperTest() {
     }
 
     function test_filter() {
-        elementWrapper = reactWrapper.filter('.selector');
         anotherComponentWrapper = reactWrapper.filter(AnotherComponent);
         anotherStatelessWrapper = reactWrapper.filter(AnotherStatelessComponent);
+        // NOTE: The following calls to filter do not narrow down the possible type of the result based
+        //       on the type of the param, so the return type should not be different than the original
+        //       "this". This is a special case for "filter" vs other methods like "find", because "filter"
+        //       is guaranteed to return only a subset of the existing list of components/elements without
+        //       finding/adding more.
         reactWrapper = reactWrapper.filter({ numberProp: 12 });
+        reactWrapper = reactWrapper.filter('.selector');
     }
 
     function test_filterWhere() {
diff --git a/types/enzyme/index.d.ts b/types/enzyme/index.d.ts
index 4d3c75d6c1..d23af4ab04 100644
--- a/types/enzyme/index.d.ts
+++ b/types/enzyme/index.d.ts
@@ -375,8 +375,7 @@ export class ShallowWrapper<P = {}, S = {}> {
      */
     filter<P2>(component: ComponentClass<P2>): ShallowWrapper<P2, any>;
     filter<P2>(statelessComponent: StatelessComponent<P2>): ShallowWrapper<P2, never>;
-    filter(props: EnzymePropSelector): this;
-    filter(selector: string): ShallowWrapper<HTMLAttributes, any>;
+    filter(props: EnzymePropSelector | string): ShallowWrapper<P, S>;
 
     /**
      * Finds every node in the render tree that returns true for the provided predicate function.
@@ -496,8 +495,7 @@ export class ReactWrapper<P = {}, S = {}> {
      */
     filter<P2>(component: ComponentClass<P2>): ReactWrapper<P2, any>;
     filter<P2>(statelessComponent: StatelessComponent<P2>): ReactWrapper<P2, never>;
-    filter(props: EnzymePropSelector): this;
-    filter(selector: string): ReactWrapper<HTMLAttributes, any>;
+    filter(props: EnzymePropSelector | string): ReactWrapper<P, S>;
 
     /**
      * Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector