Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Commit

Permalink
Add description for intl-test-helper using TSDoc
Browse files Browse the repository at this point in the history
  • Loading branch information
cometkim committed Oct 28, 2019
1 parent 1dfab13 commit 3f0bc75
Showing 1 changed file with 26 additions and 17 deletions.
43 changes: 26 additions & 17 deletions tests/helpers/intl-test-helper.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import PropTypes from 'prop-types';
import React, {
ReactElement,
ExoticComponent,
Expand Down Expand Up @@ -30,6 +29,12 @@ export const defaultIntl = createIntl({
textComponent: 'span',
});

/**
* Attempts to unwrap if wrapped in React.forwardRef
*
* @param element - the component element that might be wrapped in React.forwardRef.
* @returns cloned instance of wrapped element if it's forwardRef, otherwise just element.
*/
function unwrapForwardRef<WrappedComponentElement extends ReactElement>(element: ReactElement): WrappedComponentElement {
const {type, props} = element as ReactElement<any, ExoticComponent>;
if (type.$$typeof && type.$$typeof === Symbol.for('react.forward_ref')) {
Expand Down Expand Up @@ -57,31 +62,42 @@ interface ShallowWithIntlOptions extends ShallowRendererProps {
intl?: IntlShape;
}

/**
* Shallow renders a react component which use injectIntl.
*
* @param element - An instance of {@link IntlInjectedElement}
* @param options - Extra options for Enzyme's {@link enzyme#shallow | `shallow()`}
*/
export function shallowWithIntl<T extends IntlInjectedElement>(element: T, options?: ShallowWithIntlOptions) {
const {intl = defaultIntl, ...shallowOptions} = options || {};

// eslint-disable-next-line no-param-reassign
element = unwrapForwardRef<T>(element);

if (!isIntlInjectedElement(element)) {
throw new Error('shallowWithIntl() allows only components wrapped by injectIntl() HOC. Use shallow() instead.');
}

return shallow(

// Unwrap injectIntl
<element.type.WrappedComponent
intl={intl}
{...element.props}
/>,

// Override options
shallowOptions,
);
}

interface MountWithIntlOptions extends MountRendererProps {
intl?: IntlShape;
}

/**
* Mounts and renders a react component
* and provide context for {@link react-intl#useIntl | `useIntl()`}, `<Formatted.../>` and etc.
*
* @param element - An instance of any ReactElement containing elements use react-intl inside.
* @param options - Extra options for Enzyme's {@link enzyme#mount | `mount()`}
*/
export function mountWithIntl<T extends ReactElement | IntlInjectedElement>(element: T, options?: MountWithIntlOptions) {
const {intl = defaultIntl, ...mountOptions} = options || {};

Expand All @@ -96,16 +112,9 @@ export function mountWithIntl<T extends ReactElement | IntlInjectedElement>(elem
/>
) : element;

return mount(
newElement,

// For useIntl, <Formatted.../>
{
wrappingComponent: IntlProvider,
wrappingComponentProps: {...intl},

// Override options
...mountOptions,
},
);
return mount(newElement, {
wrappingComponent: IntlProvider,
wrappingComponentProps: {...intl},
...mountOptions,
});
}

0 comments on commit 3f0bc75

Please sign in to comment.