diff --git a/src/test_utils/public/enzyme_helpers.js b/src/test_utils/public/enzyme_helpers.tsx similarity index 64% rename from src/test_utils/public/enzyme_helpers.js rename to src/test_utils/public/enzyme_helpers.tsx index 84efc66a2d2b..f73b4b55d159 100644 --- a/src/test_utils/public/enzyme_helpers.js +++ b/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(
) - .find('IntlProvider').instance().getChildContext(); +const { intl } = (mount( + +
+
+).find('IntlProvider') as ReactWrapper<{}, {}, import('react-intl').IntlProvider>) + .instance() + .getChildContext(); -function getOptions(context = {}, childContextTypes = {}, props = []) { +function getOptions(context = {}, childContextTypes: ValidationMap = {}, 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(node: ReactElement): ReactElement { + return React.cloneElement(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( + node: ReactElement, + { + context, + childContextTypes, + ...props + }: { + context?: any; + childContextTypes?: ValidationMap; + } = {} +) { 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( + node: ReactElement, + { + context, + childContextTypes, + ...props + }: { + context?: any; + childContextTypes?: ValidationMap; + } = {} +) { 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( + node: ReactElement, + { + context, + childContextTypes, + ...props + }: { + context?: any; + childContextTypes?: ValidationMap; + } = {} +) { 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 b/x-pack/test_utils/enzyme_helpers.tsx similarity index 60% rename from x-pack/test_utils/enzyme_helpers.js rename to x-pack/test_utils/enzyme_helpers.tsx index b175a319690b..d54f3a846f49 100644 --- a/x-pack/test_utils/enzyme_helpers.js +++ b/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(
) - .find('IntlProvider').instance().getChildContext(); +const { intl } = (mount( + +
+
+).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(node: ReactElement): ReactElement { + return React.cloneElement(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( + node: ReactElement, + { + context, + childContextTypes, + ...props + }: { + context?: any; + childContextTypes?: ValidationMap; + } = {} +) { 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( + node: ReactElement, + { + context, + childContextTypes, + ...props + }: { + context?: any; + childContextTypes?: ValidationMap; + } = {} +) { 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( + node: ReactElement, + { + context, + childContextTypes, + ...props + }: { + context?: any; + childContextTypes?: ValidationMap; + } = {} +) { 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 index 875bb5e09f20..0f4b296e666b 100644 --- a/x-pack/tsconfig.json +++ b/x-pack/tsconfig.json @@ -4,6 +4,7 @@ "common/**/*", "server/**/*", "plugins/**/*", + "test_utils/**/*" ], "exclude": [ "test/**/*"