From cae734d6858d44f35c3fbe3e3a6464196afc2062 Mon Sep 17 00:00:00 2001
From: Leanid Shutau <leanidshutau@gmail.com>
Date: Tue, 6 Nov 2018 13:15:41 +0300
Subject: [PATCH] Resolve comments

---
 src/test_utils/public/enzyme_helpers.tsx | 36 ++++++++++++++----------
 x-pack/test_utils/enzyme_helpers.tsx     | 27 +++++++++---------
 x-pack/tsconfig.json                     |  2 +-
 3 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/test_utils/public/enzyme_helpers.tsx b/src/test_utils/public/enzyme_helpers.tsx
index 2ab4ecb92f1f4b..f73b4b55d159a1 100644
--- a/src/test_utils/public/enzyme_helpers.tsx
+++ b/src/test_utils/public/enzyme_helpers.tsx
@@ -17,21 +17,27 @@
  * under the License.
  */
 
+/**
+ * Components using the react-intl module require access to the intl context.
+ * This is not available when mounting single components in Enzyme.
+ * These helper functions aim to address that and wrap a valid,
+ * intl context around them.
+ */
+
 import { I18nProvider, InjectedIntl, intlShape } from '@kbn/i18n/react';
 import { mount, ReactWrapper, render, shallow } from 'enzyme';
-import React, { ReactElement } from 'react';
-import { IntlProvider } from 'react-intl';
+import React, { ReactElement, ValidationMap } from 'react';
 
 // Use fake component to extract `intl` property to use in tests.
 const { intl } = (mount(
   <I18nProvider>
     <br />
   </I18nProvider>
-).find('IntlProvider') as ReactWrapper<{}, {}, IntlProvider>)
+).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>)
   .instance()
   .getChildContext();
 
-function getOptions(context = {}, childContextTypes = {}, props = {}) {
+function getOptions(context = {}, childContextTypes: ValidationMap<any> = {}, props = {}) {
   return {
     context: {
       ...context,
@@ -48,8 +54,8 @@ function getOptions(context = {}, childContextTypes = {}, props = {}) {
 /**
  * When using React-Intl `injectIntl` on components, props.intl is required.
  */
-function nodeWithIntlProp(node: ReactElement<any>): ReactElement<{ intl: InjectedIntl }> {
-  return React.cloneElement(node, { intl });
+function nodeWithIntlProp<T>(node: ReactElement<T>): ReactElement<T & { intl: InjectedIntl }> {
+  return React.cloneElement<any>(node, { intl });
 }
 
 /**
@@ -59,15 +65,15 @@ function nodeWithIntlProp(node: ReactElement<any>): ReactElement<{ intl: Injecte
  *  @param options properties to pass into shallow wrapper
  *  @return The wrapper instance around the rendered output with intl object in context
  */
-export function shallowWithIntl(
-  node: ReactElement<any>,
+export function shallowWithIntl<T>(
+  node: ReactElement<T>,
   {
     context,
     childContextTypes,
     ...props
   }: {
     context?: any;
-    childContextTypes?: any;
+    childContextTypes?: ValidationMap<any>;
   } = {}
 ) {
   const options = getOptions(context, childContextTypes, props);
@@ -82,15 +88,15 @@ export function shallowWithIntl(
  *  @param options properties to pass into mount wrapper
  *  @return The wrapper instance around the rendered output with intl object in context
  */
-export function mountWithIntl(
-  node: ReactElement<any>,
+export function mountWithIntl<T>(
+  node: ReactElement<T>,
   {
     context,
     childContextTypes,
     ...props
   }: {
     context?: any;
-    childContextTypes?: any;
+    childContextTypes?: ValidationMap<any>;
   } = {}
 ) {
   const options = getOptions(context, childContextTypes, props);
@@ -105,15 +111,15 @@ export function mountWithIntl(
  *  @param options properties to pass into render wrapper
  *  @return The wrapper instance around the rendered output with intl object in context
  */
-export function renderWithIntl(
-  node: ReactElement<any>,
+export function renderWithIntl<T>(
+  node: ReactElement<T>,
   {
     context,
     childContextTypes,
     ...props
   }: {
     context?: any;
-    childContextTypes?: any;
+    childContextTypes?: ValidationMap<any>;
   } = {}
 ) {
   const options = getOptions(context, childContextTypes, props);
diff --git a/x-pack/test_utils/enzyme_helpers.tsx b/x-pack/test_utils/enzyme_helpers.tsx
index 0529e401ed2d6d..d54f3a846f49c0 100644
--- a/x-pack/test_utils/enzyme_helpers.tsx
+++ b/x-pack/test_utils/enzyme_helpers.tsx
@@ -13,15 +13,14 @@
 
 import { I18nProvider, InjectedIntl, intlShape } from '@kbn/i18n/react';
 import { mount, ReactWrapper, render, shallow } from 'enzyme';
-import React, { ReactElement } from 'react';
-import { IntlProvider } from 'react-intl';
+import React, { ReactElement, ValidationMap } from 'react';
 
 // Use fake component to extract `intl` property to use in tests.
 const { intl } = (mount(
   <I18nProvider>
     <br />
   </I18nProvider>
-).find('IntlProvider') as ReactWrapper<{}, {}, IntlProvider>)
+).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>)
   .instance()
   .getChildContext();
 
@@ -42,8 +41,8 @@ function getOptions(context = {}, childContextTypes = {}, props = {}) {
 /**
  * When using React-Intl `injectIntl` on components, props.intl is required.
  */
-function nodeWithIntlProp(node: ReactElement<any>): ReactElement<{ intl: InjectedIntl }> {
-  return React.cloneElement(node, { intl });
+function nodeWithIntlProp<T>(node: ReactElement<T>): ReactElement<T & { intl: InjectedIntl }> {
+  return React.cloneElement<any>(node, { intl });
 }
 
 /**
@@ -53,15 +52,15 @@ function nodeWithIntlProp(node: ReactElement<any>): ReactElement<{ intl: Injecte
  *  @param options properties to pass into shallow wrapper
  *  @return The wrapper instance around the rendered output with intl object in context
  */
-export function shallowWithIntl(
-  node: ReactElement<any>,
+export function shallowWithIntl<T>(
+  node: ReactElement<T>,
   {
     context,
     childContextTypes,
     ...props
   }: {
     context?: any;
-    childContextTypes?: any;
+    childContextTypes?: ValidationMap<any>;
   } = {}
 ) {
   const options = getOptions(context, childContextTypes, props);
@@ -76,15 +75,15 @@ export function shallowWithIntl(
  *  @param options properties to pass into mount wrapper
  *  @return The wrapper instance around the rendered output with intl object in context
  */
-export function mountWithIntl(
-  node: ReactElement<any>,
+export function mountWithIntl<T>(
+  node: ReactElement<T>,
   {
     context,
     childContextTypes,
     ...props
   }: {
     context?: any;
-    childContextTypes?: any;
+    childContextTypes?: ValidationMap<any>;
   } = {}
 ) {
   const options = getOptions(context, childContextTypes, props);
@@ -99,15 +98,15 @@ export function mountWithIntl(
  *  @param options properties to pass into render wrapper
  *  @return The wrapper instance around the rendered output with intl object in context
  */
-export function renderWithIntl(
-  node: ReactElement<any>,
+export function renderWithIntl<T>(
+  node: ReactElement<T>,
   {
     context,
     childContextTypes,
     ...props
   }: {
     context?: any;
-    childContextTypes?: any;
+    childContextTypes?: ValidationMap<any>;
   } = {}
 ) {
   const options = getOptions(context, childContextTypes, props);
diff --git a/x-pack/tsconfig.json b/x-pack/tsconfig.json
index 6afd43ff248a26..0f4b296e666b66 100644
--- a/x-pack/tsconfig.json
+++ b/x-pack/tsconfig.json
@@ -4,7 +4,7 @@
     "common/**/*",
     "server/**/*",
     "plugins/**/*",
-    "test_utils/enzyme_helpers.tsx"
+    "test_utils/**/*"
   ],
   "exclude": [
     "test/**/*"