maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
* [I18n] Migrate enzyme helpers to TypeScript

* Migrate src enzyme helpers

* Remove eslint comments
This commit is contained in:
Leanid Shutau 2018-11-06 18:09:13 +03:00 committed by GitHub
parent 44c3dfed61
commit 33cbfd76b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 99 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
src/test_utils/public/enzyme_helpers.js → src/test_utils/public/enzyme_helpers.tsx
View file

@ -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);
}

72
x-pack/test_utils/enzyme_helpers.js → x-pack/test_utils/enzyme_helpers.tsx
View file

@ -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);
}

1
x-pack/tsconfig.json
View file

@ -4,6 +4,7 @@
"common/**/*",
"server/**/*",
"plugins/**/*",
"test_utils/**/*"
],
"exclude": [
"test/**/*"