[I18n] Migrate enzyme helpers to TypeScript (elastic#25108)

* [I18n] Migrate enzyme helpers to TypeScript * Migrate src enzyme helpers * Remove eslint comments
LeanidShutau · Nov 6, 2018 · 85dda22 · 85dda22
1 parent 6a36a77
commit 85dda22
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 46 deletions.
diff --git a/src/test_utils/public/enzyme_helpers.js → src/test_utils/public/enzyme_helpers.tsx b/src/test_utils/public/enzyme_helpers.js → src/test_utils/public/enzyme_helpers.tsx
@@ -24,15 +24,20 @@
  * intl context around them.
  */
 
-import React from 'react';
-import { I18nProvider, intlShape } from '@kbn/i18n/react';
-import { mount, shallow, render } from 'enzyme';
+import { I18nProvider, InjectedIntl, intlShape } from '@kbn/i18n/react';
+import { mount, ReactWrapper, render, shallow } from 'enzyme';
+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').instance().getChildContext();
+const { intl } = (mount(
+  <I18nProvider>
+    <br />
+  </I18nProvider>
+).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,
@@ -49,8 +54,8 @@ function getOptions(context = {}, childContextTypes = {}, props = []) {
 /**
  * When using React-Intl `injectIntl` on components, props.intl is required.
  */
-function nodeWithIntlProp(node) {
-  return React.cloneElement(node, { intl });
+function nodeWithIntlProp<T>(node: ReactElement<T>): ReactElement<T & { intl: InjectedIntl }> {
+  return React.cloneElement<any>(node, { intl });
 }
 
 /**
@@ -60,13 +65,20 @@ function nodeWithIntlProp(node) {
  *  @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, { context, childContextTypes, ...props } = {}) {
+export function shallowWithIntl<T>(
+  node: ReactElement<T>,
+  {
+    context,
+    childContextTypes,
+    ...props
+  }: {
+    context?: any;
+    childContextTypes?: ValidationMap<any>;
+  } = {}
+) {
   const options = getOptions(context, childContextTypes, props);
 
-  return shallow(
-    nodeWithIntlProp(node),
-    options,
-  );
+  return shallow(nodeWithIntlProp(node), options);
 }
 
 /**
@@ -76,13 +88,20 @@ export function shallowWithIntl(node, { context, childContextTypes, ...props } =
  *  @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, { context, childContextTypes, ...props } = {}) {
+export function mountWithIntl<T>(
+  node: ReactElement<T>,
+  {
+    context,
+    childContextTypes,
+    ...props
+  }: {
+    context?: any;
+    childContextTypes?: ValidationMap<any>;
+  } = {}
+) {
   const options = getOptions(context, childContextTypes, props);
 
-  return mount(
-    nodeWithIntlProp(node),
-    options,
-  );
+  return mount(nodeWithIntlProp(node), options);
 }
 
 /**
@@ -92,11 +111,18 @@ export function mountWithIntl(node, { context, childContextTypes, ...props } = {
  *  @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, { context, childContextTypes, ...props } = {}) {
+export function renderWithIntl<T>(
+  node: ReactElement<T>,
+  {
+    context,
+    childContextTypes,
+    ...props
+  }: {
+    context?: any;
+    childContextTypes?: ValidationMap<any>;
+  } = {}
+) {
   const options = getOptions(context, childContextTypes, props);
 
-  return render(
-    nodeWithIntlProp(node),
-    options,
-  );
+  return render(nodeWithIntlProp(node), options);
 }
diff --git a/x-pack/test_utils/enzyme_helpers.js → x-pack/test_utils/enzyme_helpers.tsx b/x-pack/test_utils/enzyme_helpers.js → x-pack/test_utils/enzyme_helpers.tsx
@@ -11,15 +11,20 @@
  * intl context around them.
  */
 
-import React from 'react';
-import { I18nProvider, intlShape } from '@kbn/i18n/react';
-import { mount, shallow, render } from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
+import { I18nProvider, InjectedIntl, intlShape } from '@kbn/i18n/react';
+import { mount, ReactWrapper, render, shallow } from 'enzyme';
+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').instance().getChildContext();
+const { intl } = (mount(
+  <I18nProvider>
+    <br />
+  </I18nProvider>
+).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>)
+  .instance()
+  .getChildContext();
 
-function getOptions(context = {}, childContextTypes = {}, props = []) {
+function getOptions(context = {}, childContextTypes = {}, props = {}) {
   return {
     context: {
       ...context,
@@ -36,8 +41,8 @@ function getOptions(context = {}, childContextTypes = {}, props = []) {
 /**
  * When using React-Intl `injectIntl` on components, props.intl is required.
  */
-function nodeWithIntlProp(node) {
-  return React.cloneElement(node, { intl });
+function nodeWithIntlProp<T>(node: ReactElement<T>): ReactElement<T & { intl: InjectedIntl }> {
+  return React.cloneElement<any>(node, { intl });
 }
 
 /**
@@ -47,13 +52,20 @@ function nodeWithIntlProp(node) {
  *  @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, { context, childContextTypes, ...props } = {}) {
+export function shallowWithIntl<T>(
+  node: ReactElement<T>,
+  {
+    context,
+    childContextTypes,
+    ...props
+  }: {
+    context?: any;
+    childContextTypes?: ValidationMap<any>;
+  } = {}
+) {
   const options = getOptions(context, childContextTypes, props);
 
-  return shallow(
-    nodeWithIntlProp(node),
-    options,
-  );
+  return shallow(nodeWithIntlProp(node), options);
 }
 
 /**
@@ -63,13 +75,20 @@ export function shallowWithIntl(node, { context, childContextTypes, ...props } =
  *  @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, { context, childContextTypes, ...props } = {}) {
+export function mountWithIntl<T>(
+  node: ReactElement<T>,
+  {
+    context,
+    childContextTypes,
+    ...props
+  }: {
+    context?: any;
+    childContextTypes?: ValidationMap<any>;
+  } = {}
+) {
   const options = getOptions(context, childContextTypes, props);
 
-  return mount(
-    nodeWithIntlProp(node),
-    options,
-  );
+  return mount(nodeWithIntlProp(node), options);
 }
 
 /**
@@ -79,11 +98,18 @@ export function mountWithIntl(node, { context, childContextTypes, ...props } = {
  *  @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, { context, childContextTypes, ...props } = {}) {
+export function renderWithIntl<T>(
+  node: ReactElement<T>,
+  {
+    context,
+    childContextTypes,
+    ...props
+  }: {
+    context?: any;
+    childContextTypes?: ValidationMap<any>;
+  } = {}
+) {
   const options = getOptions(context, childContextTypes, props);
 
-  return render(
-    nodeWithIntlProp(node),
-    options,
-  );
+  return render(nodeWithIntlProp(node), options);
 }
diff --git a/x-pack/tsconfig.json b/x-pack/tsconfig.json
@@ -4,6 +4,7 @@
     "common/**/*",
     "server/**/*",
     "plugins/**/*",
+    "test_utils/**/*"
   ],
   "exclude": [
     "test/**/*"