diff --git a/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx b/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx
index f3cd0e0f5..00ec93a23 100644
--- a/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx
+++ b/packages/terra-application/src/application-navigation/private/utility-menu/_UtilityMenu.jsx
@@ -61,13 +61,6 @@ const propTypes = {
* A configuration object to render an action button for user Config.
*/
userActionConfig: userActionConfigPropType,
- /**
- * @private
- * Given a callback function, menuClosingCallback will return a new function
- * that will ensure that the various menu states are reset before the callback function
- * is executed.
- */
- menuClosingCallback: PropTypes.func,
};
const defaultProps = {
@@ -78,7 +71,7 @@ const utilityMenuSettingsKey = 'terra-application-navigation.utility-menu.settin
const utilityMenuHelpKey = 'terra-application-navigation.utility-menu.help';
const UtilityMenu = ({
- userConfig, hero, onSelectSettings, onSelectHelp, menuClosingCallback, onSelectLogout, utilityItems, id, onSelectUtilityItem, isHeightBounded, intl, userActionConfig,
+ userConfig, hero, onSelectSettings, onSelectHelp, onSelectLogout, utilityItems, id, onSelectUtilityItem, isHeightBounded, intl, userActionConfig,
}) => {
let menuItems = [];
menuItems = utilityItems.map(item => ({
@@ -116,7 +109,6 @@ const UtilityMenu = ({
title={intl.formatMessage({ id: 'terraApplication.navigation.utilityMenu.headerTitle' })}
footerText={intl.formatMessage({ id: 'terraApplication.navigation.utilityMenu.logout' })}
onSelectFooterItem={onSelectLogout}
- menuClosingCallback={menuClosingCallback}
userConfig={userConfig}
userActionConfig={userActionConfig}
customContent={hero}
diff --git a/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx b/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx
index 478dfba08..c25417d43 100644
--- a/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx
+++ b/packages/terra-application/src/application-navigation/private/workspace-layout/WorkspaceLayout.jsx
@@ -6,9 +6,9 @@ import IconPanelRight from 'terra-icon/lib/icon/IconPanelRight';
import IconPanelLeft from 'terra-icon/lib/icon/IconPanelLeft';
import ThemeContext from 'terra-theme-context';
+import { useIntl } from 'react-intl';
import { ActiveBreakpointContext } from '../../../breakpoints';
import ResizeHandle from './ResizeHandle';
-import { ApplicationIntlContext } from '../../../application-intl';
import ApplicationNavigationActionsContext from '../../ApplicationNavigationActionsContext';
import styles from './WorkspaceLayout.module.scss';
@@ -111,7 +111,7 @@ const WorkspaceLayout = ({
skipToCallback,
}) => {
const activeBreakpoint = React.useContext(ActiveBreakpointContext);
- const applicationIntl = React.useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
const layoutContainerRef = React.useRef();
diff --git a/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx b/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx
index 625aa8aac..fbc5bf1fe 100644
--- a/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/Application.1.app.mdx
@@ -98,9 +98,9 @@ Many applications respond to the current active breakpoint to adjust for screen
### Internationalization
-Terra applications must work for many locales, The Application Intl Context provides access to the frameworks i18n APIs.
+Terra applications must work for many locales, `react-intl` should be utilized for i18n api's.
-- [Application Intl Context API](/application/terra-application/contexts/application-intl-context)
+- [react-intl](https://formatjs.io/)
### Theming
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx
index 6bf2b01f1..66755eef3 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationBase.app.mdx
@@ -20,9 +20,7 @@ import ApplicationBase from 'terra-application/lib/application-base';
### I18n
-ApplicationBase exposes a prop to define the application's locale and dynamically retrieve the translated strings for that locale. Children of ApplicationBase can access translated strings by using [react-intl's](https://github.com/formatjs/formatjs/blob/master/website/docs/react-intl/components.md) provided components or by using the [ApplicationIntlContext](/application/terra-application/contexts/application-intl-context).
-
-Consumers of ApplicationBase should review Terra's [translation aggregation](https://engineering.cerner.com/terra-ui/guides/terra-ui/internationalization/aggregate-translations) instructions to ensure ApplicationBase can retrieve the application's translations successfully.
+ApplicationBase exposes a prop to define the application's locale and dynamically retrieve the translated strings for that locale. Children of ApplicationBase can access translated strings by using react-intl's provided [components](https://formatjs.io/docs/react-intl/components), react-intl's [imperitive API](https://formatjs.io/docs/react-intl/api) or by using the [ApplicationIntlContext](/application/cerner-terra-application/contexts/application-intl-context).
### Theming
@@ -30,6 +28,8 @@ ApplicationBase exposes props to define the application's theme.
ApplicationBase renders a theme context provider around its children. Children can access the current theme by using the [ThemeContext](/application/terra-application/contexts/theme-context).
+
+
### Breakpoints
ApplicationBase renders an [ActiveBreakpointContext.Provider](/application/terra-application/contexts/active-breakpoint-context) around its children. Children can access the current active breakpoint value by using the [ActiveBreakpointContext](/application/terra-application/contexts/active-breakpoint-context).
@@ -59,4 +59,4 @@ ApplicationNavigation renders a [Suspense](https://reactjs.org/docs/code-splitti
### Modal Presentation
-ApplicationBase renders a [ModalManager](/application/terra-application/components/modal-manager) around its children. Children can access modal disclosure APIs by using the [DisclosureManagerContext](/application/terra-application/contexts/disclosure-manager-context).
+ApplicationBase renders a [ModalManager](/application/terra-application/components/modal-manager) around its children. Children can access modal disclosure APIs by using the [DisclosureManagerContext](/application/terra-application/contexts/disclosure-manager-context).
\ No newline at end of file
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx
index 29427ee5d..aae19b9a8 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/ApplicationNavigation.app.mdx
@@ -20,7 +20,7 @@ import ApplicationNavigation from 'terra-application/lib/application-navigation'
ApplicationNavigation requires values from the following Contexts:
-* [ApplicationIntlContext](/application/terra-application/contexts/application-intl-context)
+* [react-intl](https://formatjs.io/docs/react-intl/api)
## Props
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx
index 403baa569..3363210c7 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/ModalManager.app.mdx
@@ -82,6 +82,64 @@ The provided component will be rendered below the standard ActionHeader and abov
provide additional context to every disclosed component. This component is provided once to the ModalManager instance, not on a per-disclosure basis,
and each component in the disclosure stack will be decorated with the same accessory component.
+### Static Height vs. Dynamic Height
+
+ModalManager was intentionally designed to have static preset heights in order to work in conjunction with Terra content that can adjust responsively using the [terra-responsive-element](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/responsive-element/about), as well as any conditionally positioned UI elements like a [popup](https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/popup/popup), [multi-select dropdown](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/form-select/multi-select), or [date picker](https://engineering.cerner.com/terra-ui/components/cerner-terra-framework-docs/date-picker/date-picker). Having static preset heights allows for Terra to quickly present modal content without requiring extensive browser multiple-render drawing calculations that results in poor application performance.
+
+Some may be used to other libraries that commonly offer simple modals that can adjust the modal's height dynamically based on the content provided, but those situations only work well for when content is designed for a single presentation (i.e. is not responsive), and ones that have no higher z-index layers that require position calculation relative to the base content (i.e. no popups with pointers).
+
+### Creating Modal Content
+
+The ModalManager is intended for content which has regularly composed & designed layouts, including responsive variations. It is very grid-based, so it comes with standard heights and widths to accommodate the highly-structured assembly of content.
+
+When the preset size of the modal's width or height is _larger_ than the available device-screen or viewport (e.g. if you shrink down your window smaller than what the modal size was set to be), at that point the ModalManager will then "stick" near to the edge of the viewport as it's outer size and not flow offscreen. It is recommended to build the inner content with a responsive design, so when the modal is smaller than it’s preset size, the content will then know to adapt and adjust to alternate layouts accordingly to the new maximum available height and/or width as the outer size. If content is not built responsively, or if you intentionally build the content to overflow in one direction, it will then force scrolling inside of the modal. Scrolling is perfectly acceptable, but should be limited to one direction, preferably vertical-only.
+
+The key thing to remember is that the ModalManager, similar to a page layout, works based on the "**outside-in**" layout principal, which allows the _inside_ content to respond when the _outside_ container changes in size. The ModalManager unfortunately cannot simultaneously also follow the "**inside-out**" layout principal, which would mean the _outside_ container height grows or shrinks based on the _inside_ content size. The reason is that the inside content cannot dictate what size it would like to be at the same as as listening for when it no longer has any space remaining, which is required in order to be able to change itself to a new layout, and cannot do both (or at least not without attempting many redraws). Designers are encouraged to create structured and grid based layout designs that work well for the modal layout size options that best utilize space, similar to designing base pages within applications.
+
+### Sizing: Height & Width Options
+
+The ModalManager has two methods of setting the preferred modal height & width. The first method is by choosing from a list of easy shorthand size options that combine a predefined height and width pair, which works standard application screen ratios. The second method is more advanced and provides the ability to choose from a list of grid-based dimensions to set the height and width independently. _(Note: all values used for ModalManager are true pixels and not rem, relative em units.)_
+
+Using the `size` prop within the [disclose argument API](/application/terra-application/contexts/disclosure-manager-context#disclosure-props) allows the consumer to provide a simpler implementation to set the modal preferred dimension, and typically might be used for common application disclosures of similarly sized content. _(Note: `size` should not be provided if `dimensions` are specified.)_
+
+|`size` prop: Shorthand options|pixel dimensions|
+|---|---|
+|`tiny`| w: 320px, h: 240px |
+|`small`| w: 640px, h: 420px |
+|`medium`| w: 960px, h: 600px |
+|**default**| w: 1120px, h: 690px _(modal size if no other details are provided)_ |
+|`large`| w: 1280px, h: 870px |
+|`huge`| w: 1600px, h: 960px |
+|`fullscreen`| w: screen width less ~10px, h: screen height less ~10px |
+
+For application content that needs more specific dimensional control of modal sizes, using the `dimension` prop within the [disclose argument API](/application/terra-application/contexts/disclosure-manager-context#disclose-props) will be the implementation to choose. Consumers supply a simple object that contains both height wand width values: `{ height: '480', width: '600' }`. _(Note: `dimensions` should not be provided if a `size` is specified.)_
+
+|`dimensions` prop: Width options|pixel dimensions|
+|---|---|
+|`width: '320'`| w: 320px, h: -- |
+|`width: '480'`| w: 480px, h: -- |
+|`width: '560'`| w: 560px, h: -- |
+|`width: '640'`| w: 640px, h: -- |
+|`width: '800'`| w: 800px, h: -- |
+|`width: '960'`| w: 960px, h: -- |
+|`width: '1120'`| w: 1120px, h: -- |
+|`width: '1280'`| w: 1280px, h: -- |
+|`width: '1440'`| w: 1440px, h: -- |
+|`width: '1600'`| w: 1600px, h: -- |
+|`width: '1760'`| w: 1760px, h: -- |
+|`width: '1920'`| w: 1920px, h: -- |
+
+|`dimensions` prop: Height options|pixel dimensions|
+|---|---|
+|`height: '240'`| w: --, h: 240px |
+|`height: '420'`| w: --, h: 420px |
+|`height: '600'`| w: --, h: 600px |
+|`height: '690'`| w: --, h: 690px |
+|`height: '780'`| w: --, h: 780px |
+|`height: '870'`| w: --, h: 870px |
+|`height: '960'`| w: --, h: 960px |
+|`height: '1140'`| w: --, h: 1140px |
+
### Example
```jsx
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx b/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx
index 5d28cae53..45cbcbde6 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/NavigationPromptCheckpoint.app.mdx
@@ -62,12 +62,12 @@ to match the prompt messaging provided by the components within `terra-applicati
```jsx
import React, { useContext, useRef } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { NavigationPromptCheckpoint, getUnsavedChangesPromptOptions } from 'terra-application/lib/navigation-prompt';
const ExampleComponent = () => {
const checkpointRef = useRef();
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
function resolvePrompts() {
checkpointRef.current.resolvePrompts(getUnsavedChangesPromptOptions(applicationIntl)).then(() => { ... });
diff --git a/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx b/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx
index 1c1131692..7ec14beb6 100644
--- a/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx
+++ b/packages/terra-application/src/terra-dev-site/app/components.2/example/ApplicationBaseExample.jsx
@@ -1,5 +1,5 @@
import React, { useState, useContext } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
import { ActiveBreakpointContext } from 'terra-application/lib/breakpoints';
import ApplicationLoadingOverlay from 'terra-application/lib/application-loading-overlay';
@@ -12,7 +12,7 @@ const ApplicationContentExample = () => {
const [blockUnload, setBlockUnload] = useState(false);
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
if (throwError) {
throw new Error("Testing ApplicationBase's error boundary...");
@@ -82,7 +82,7 @@ const ApplicationContentExample = () => {
};
const ApplicationBaseExample = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
return (
diff --git a/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx b/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx
index 02cc76dd8..5316db8a9 100644
--- a/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/contexts.2/DisclosureManagerContext.app.mdx
@@ -99,6 +99,8 @@ disclosureManager.disclose({
})
```
+### Disclose props
+
`disclose` Argument API:
|Key|Is Required|Value|
@@ -108,6 +110,8 @@ disclosureManager.disclose({
|`dimensions`|optional|An Object containing explicit `height` and `width` values for the disclosure. These values may not be honored due to the disclosure type or the available viewport size. `dimensions` should not be provided if a `size` is specified. Supported `height` values include: `'240'`, `'420'`, `'600'`, `'690'`, `'780'`, `'870'`, `'960'`, `'1140'`. Supported `width` values include: `'320'`, `'480'`, `'560'`, `'640'`, `'800'`, `'960'`, `'1120'`, `'1280'`, `'1440'`, `'1600'`, `'1760'`, `'1920'`.|
|`content`|**required**|An Object containing a key and a component describing the component to be disclosed. See the `content` API below.|
+### Content props
+
`content` Object API:
|Key|Is Required|Value|
diff --git a/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx b/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx
index 1c53187cb..a6893f4f1 100644
--- a/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx
+++ b/packages/terra-application/src/terra-dev-site/app/demo/AppPage.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import { ActiveBreakpointContext } from 'terra-application/lib/breakpoints';
import ApplicationLoadingOverlay from 'terra-application/lib/application-loading-overlay';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
import { ApplicationNavigationActionsContext } from 'terra-application/lib/application-navigation';
@@ -23,7 +23,7 @@ const AppPage = ({ pageName }) => {
const [isInitialized, setIsInitialized] = useState(false);
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
const [hasError, setHasError] = useState(false);
diff --git a/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx b/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx
index 9c56f1866..80152a4d8 100644
--- a/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx
+++ b/packages/terra-application/src/terra-dev-site/app/demo/ModalPresenter.jsx
@@ -7,7 +7,7 @@ import classNames from 'classnames/bind';
import Scroll from 'terra-scroll';
import { ActiveBreakpointContext } from 'terra-application/lib/breakpoints';
import ApplicationLoadingOverlay from 'terra-application/lib/application-loading-overlay';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { DisclosureManagerContext, DisclosureManagerHeaderAdapter } from 'terra-application/lib/disclosure-manager';
import PendingActionToggle from './PendingActionToggle';
@@ -17,7 +17,7 @@ const cx = classNames.bind(styles);
const ModalContent = ({ name, onSubmit }) => {
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const disclosureManager = useContext(DisclosureManagerContext);
const [hasError, setHasError] = useState(false);
diff --git a/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx b/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx
index dd4a1240f..d36195c00 100644
--- a/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx
+++ b/packages/terra-application/src/terra-dev-site/app/how-to.3/use-translated-strings.app.mdx
@@ -7,15 +7,12 @@ Every child of [ApplicationBase](/application/terra-application/components/appli
application's translated strings. Please review Terra's [recommended consumption guides](https://engineering.cerner.com/terra-ui/guides/terra-ui/internationalization/building-components-which-include-translations)
for more information.
-Additionally, ApplicateBase provides react-intl's APIs through the [ApplicationIntlContext](/application/terra-application/contexts/application-intl-context)
-for consumers seeking a modern Context implementation.
-
```jsx
import React, { useContext } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
const ExampleComponent = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
return (
@@ -33,4 +30,4 @@ export default ExampleComponent;
```
> Accessing react-intl's [legacy context value](https://reactjs.org/docs/legacy-context.html) directly is **not recommended**.
-> This API is deprecated and not provided by react-intl v3.x. Terra's recommended usage patterns are supported by versions 2.x and 3.x of react-intl.
+> This API is deprecated and not provided by react-intl v3.x. Terra's recommended usage patterns are supported by versions 5.x of react-intl.
diff --git a/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx b/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx
index 4365833ce..f675e1564 100644
--- a/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx
+++ b/packages/terra-application/src/terra-dev-site/test/application-base/ApplicationBaseTest.test.jsx
@@ -4,7 +4,7 @@ import ApplicationLoadingOverlay from 'terra-application/lib/application-loading
import ApplicationStatusOverlay from 'terra-application/lib/application-status-overlay';
import ApplicationBase from 'terra-application/lib/application-base';
import NavigationPrompt from 'terra-application/lib/navigation-prompt';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
const ApplicationContentTest = () => {
@@ -14,7 +14,7 @@ const ApplicationContentTest = () => {
const [showStatusOverlay, setShowStatusOverlay] = useState(false);
const activeBreakpoint = useContext(ActiveBreakpointContext);
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = useContext(ThemeContext);
if (throwError) {
diff --git a/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx b/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx
index e74eec9e1..602ca5457 100644
--- a/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx
+++ b/packages/terra-application/src/terra-dev-site/test/application-base/private/testOverridesTest.test.jsx
@@ -1,9 +1,9 @@
import React, { useContext } from 'react';
-import { ApplicationIntlContext } from 'terra-application/lib/application-intl';
+import { useIntl } from 'react-intl';
import { ThemeContext } from 'terra-application/lib/theme';
const TestOverrideTest = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = useContext(ThemeContext);
return (
diff --git a/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationDisabledPromptsTest.test.jsx b/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationDisabledPromptsTest.test.jsx
index 6c102d6ad..efc375831 100644
--- a/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationDisabledPromptsTest.test.jsx
+++ b/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationDisabledPromptsTest.test.jsx
@@ -1,7 +1,7 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { ThemeContext } from 'terra-application/lib/theme';
-import { ApplicationIntlContext } from '../../../application-intl';
+import { useIntl } from 'react-intl';
import ApplicationBase from '../../../application-base';
import ApplicationNavigation from '../../../application-navigation';
import NavigationPrompt from '../../../navigation-prompt';
@@ -35,7 +35,7 @@ PageContent.propTypes = {
};
const ApplicationNavigationDisabledPromptsTest = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
const [activeNavItem, setActiveNavItem] = useState('page_1');
const [loggedOut, setLoggedOut] = useState(false);
diff --git a/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationTest.test.jsx b/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationTest.test.jsx
index 67fe745ae..b7ee683b3 100644
--- a/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationTest.test.jsx
+++ b/packages/terra-application/src/terra-dev-site/test/application-navigation/ApplicationNavigationTest.test.jsx
@@ -1,11 +1,11 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { ThemeContext } from 'terra-application/lib/theme';
import ApplicationNavigation, {
ApplicationNavigationActionsContext,
} from 'terra-application/lib/application-navigation';
+import { useIntl } from 'react-intl';
import { WorkspaceContent } from '../../../workspace';
-import { ApplicationIntlContext } from '../../../application-intl';
import ApplicationBase from '../../../application-base';
import NavigationPrompt from '../../../navigation-prompt';
@@ -119,7 +119,7 @@ const workspace = (
);
const ApplicationNavigationTest = () => {
- const applicationIntl = useContext(ApplicationIntlContext);
+ const applicationIntl = useIntl();
const theme = React.useContext(ThemeContext);
const [activeNavItem, setActiveNavItem] = useState('page_1');
const [loggedOut, setLoggedOut] = useState(false);
diff --git a/packages/terra-application/src/workspace/Workspace.jsx b/packages/terra-application/src/workspace/Workspace.jsx
index 2e26f571d..d1ec5a643 100644
--- a/packages/terra-application/src/workspace/Workspace.jsx
+++ b/packages/terra-application/src/workspace/Workspace.jsx
@@ -7,13 +7,13 @@ import IconSettings from 'terra-icon/lib/icon/IconSettings';
import IconPanelRight from 'terra-icon/lib/icon/IconPanelRight';
import Popup from 'terra-popup';
+import { useIntl } from 'react-intl';
import ActionMenu, {
ActionMenuDivider,
ActionMenuItem,
ActionMenuGroup,
ActionMenuRadio,
} from '../action-menu';
-import { ApplicationIntlContext } from '../application-intl';
import usePortalManager, { getPortalElement } from './shared/usePortalManager';
import WorkspaceButton from './subcomponents/_WorkspaceButton';
@@ -118,7 +118,7 @@ const Workspace = ({
}) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const theme = React.useContext(ThemeContext);
- const intl = React.useContext(ApplicationIntlContext);
+ const intl = useIntl();
const sizeMenuRef = useRef();
const [workspaceContainerRef, workspacePortalsRef] = usePortalManager(activeItemKey);
diff --git a/packages/terra-application/tests/jest/MockApplication.jsx b/packages/terra-application/tests/jest/MockApplication.jsx
index 184841909..5aef5450e 100644
--- a/packages/terra-application/tests/jest/MockApplication.jsx
+++ b/packages/terra-application/tests/jest/MockApplication.jsx
@@ -1,13 +1,12 @@
import React from 'react';
import { IntlProvider } from 'react-intl';
-import { mockIntl } from 'terra-enzyme-intl';
import { ApplicationIntlContext } from '../../src/application-intl';
/* eslint-disable react/prop-types */
const MockApplication = ({ children }) => (
// eslint-disable-next-line compat/compat
property })}>
-
+
{children}
diff --git a/packages/terra-application/tests/jest/action-menu/__snapshots__/ActionMenu.test.jsx.snap b/packages/terra-application/tests/jest/action-menu/__snapshots__/ActionMenu.test.jsx.snap
index e9a4b7a78..b8e81bd79 100644
--- a/packages/terra-application/tests/jest/action-menu/__snapshots__/ActionMenu.test.jsx.snap
+++ b/packages/terra-application/tests/jest/action-menu/__snapshots__/ActionMenu.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`ActionMenu should render with all props 1`] = `
className="action-container"
fill={true}
header={
-
diff --git a/packages/terra-application/tests/jest/action-menu/__snapshots__/_ActionMenuHeader.test.jsx.snap b/packages/terra-application/tests/jest/action-menu/__snapshots__/_ActionMenuHeader.test.jsx.snap
index 8625adc13..8ebdcb5ef 100644
--- a/packages/terra-application/tests/jest/action-menu/__snapshots__/_ActionMenuHeader.test.jsx.snap
+++ b/packages/terra-application/tests/jest/action-menu/__snapshots__/_ActionMenuHeader.test.jsx.snap
@@ -1,53 +1,92 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ActionMenuHeader should render with all props 1`] = `
-
+
`;
exports[`ApplicationBase should render with minimal props 1`] = `
-
-
-
-
-
-
-
-
-
-
-
- }
- >
-
- content
-
-
-
-
-
-
-
-
-
-
-
-
+
`;
-exports[`ApplicationBase should render with the preferred browser local 1`] = `
-
-
-
-
-
-
-
-
-
-
-
- }
- >
-
- content
-
-
-
-
-
-
-
-
-
-
-
-
-`;
+exports[`ApplicationBase should render with the preferred browser locale 1`] = ``;
exports[`ApplicationBase should render without scroll 1`] = `
-
-
-
-
-
-
-
-
-
-
-
- }
- >
-
- content
-
-
-
-
-
-
-
-
-
-
-
-
+
`;
diff --git a/packages/terra-application/tests/jest/application-base/private/i18nloader.test.js b/packages/terra-application/tests/jest/application-base/private/i18nloader.test.js
new file mode 100644
index 000000000..95ce26954
--- /dev/null
+++ b/packages/terra-application/tests/jest/application-base/private/i18nloader.test.js
@@ -0,0 +1,201 @@
+/* eslint-disable no-console, import/no-unresolved */
+import * as relativetimeformatPolyfill from '@formatjs/intl-relativetimeformat/should-polyfill';
+import i18nLoader from '../../../../src/application-base/private/i18nLoader';
+import defaultLoadIntl from '../../../../src/application-base/private/intlLoaders';
+import loadTranslations from '../../../../src/application-base/private/translationsLoaders';
+
+jest.mock('../../../../src/application-base/private/intlLoaders');
+jest.mock('../../../../src/application-base/private/translationsLoaders');
+jest.mock('@formatjs/intl-relativetimeformat/should-polyfill');
+
+global.console.warn = jest.fn();
+
+describe('i18nLoader', () => {
+ beforeEach(() => {
+ console.warn.mockClear();
+ });
+
+ describe('when intl is provided by browser', () => {
+ beforeAll(() => {
+ defaultLoadIntl.mockClear();
+ global.Intl = { DateTimeFormat: jest.fn(), NumberFormat: jest.fn(), PluralRules: jest.fn() };
+ relativetimeformatPolyfill.shouldPolyfill = jest.fn().mockReturnValue(false);
+ i18nLoader('en');
+ });
+ afterAll(() => { global.Intl = undefined; });
+
+ it('does not add the intl polyfill ', () => {
+ expect(global.IntlPolyfill).not.toBeDefined();
+ });
+
+ it('does not load intl data', () => {
+ expect(defaultLoadIntl).not.toHaveBeenCalled();
+ });
+ });
+
+ describe('when Intl.RelativeTimeFormat is not defined', () => {
+ beforeAll(() => {
+ defaultLoadIntl.mockClear();
+ loadTranslations.mockClear();
+ global.Intl = { DateTimeFormat: jest.fn(), NumberFormat: jest.fn(), PluralRules: jest.fn() };
+ relativetimeformatPolyfill.shouldPolyfill = jest.fn().mockReturnValue(true);
+ });
+ afterAll(() => { global.Intl = undefined; });
+
+ it('loads en locale', () => {
+ i18nLoader('en');
+
+ // adds the intl polyfill
+ expect(global.Intl).toBeDefined();
+
+ // loads the locale data
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'en', 'relativetimeformat');
+
+ // loads translations
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'en');
+ });
+
+ it('loads es locale', () => {
+ i18nLoader('es');
+
+ // loads the new locale data on sequential load
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'es', 'relativetimeformat');
+
+ // loads the new translation data on sequential load
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'es');
+ });
+ });
+
+ describe('when intl is not defined', () => {
+ beforeAll(() => {
+ defaultLoadIntl.mockClear();
+ loadTranslations.mockClear();
+ relativetimeformatPolyfill.shouldPolyfill = jest.fn().mockReturnValue(false);
+ global.Intl = undefined;
+ });
+ afterAll(() => { global.Intl = undefined; });
+
+ it('loads en locale', () => {
+ i18nLoader('en');
+
+ // adds the intl polyfill
+ expect(global.Intl).toBeDefined();
+ expect(global.IntlPolyfill).toBeDefined();
+
+ // loads the locale data
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'en', 'intl');
+
+ // loads translations
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'en');
+ });
+
+ it('loads es locale', () => {
+ i18nLoader('es');
+
+ // loads the new locale data on sequential load
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'es', 'intl');
+
+ // loads the new translation data on sequential load
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'es');
+ });
+ });
+
+ describe('when Intl.DataTimeFormat is not defined', () => {
+ beforeAll(() => {
+ defaultLoadIntl.mockClear();
+ loadTranslations.mockClear();
+ global.Intl = { DateTimeFormat: undefined };
+ });
+ afterAll(() => { global.Intl = undefined; });
+
+ it('loads en locale', () => {
+ i18nLoader('en');
+
+ // adds the intl polyfill
+ expect(global.Intl).toBeDefined();
+ expect(global.IntlPolyfill).toBeDefined();
+
+ // loads the locale data
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'en', 'intl');
+
+ // loads translations
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'en');
+ });
+
+ it('loads es locale', () => {
+ i18nLoader('es');
+
+ // loads the new locale data on sequential load
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'es', 'intl');
+
+ // loads the new translation data on sequential load
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'es');
+ });
+ });
+
+ describe('when Intl.NumberFormat is not defined', () => {
+ beforeAll(() => {
+ defaultLoadIntl.mockClear();
+ loadTranslations.mockClear();
+ global.Intl = { DateTimeFormat: jest.fn() };
+ });
+ afterAll(() => { global.Intl = undefined; });
+
+ it('loads en locale', () => {
+ i18nLoader('en');
+
+ // adds the intl polyfill
+ expect(global.Intl).toBeDefined();
+ expect(global.IntlPolyfill).toBeDefined();
+
+ // loads the locale data
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'en', 'intl');
+
+ // loads translations
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'en');
+ });
+
+ it('loads es locale', () => {
+ i18nLoader('es');
+
+ // loads the new locale data on sequential load
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'es', 'intl');
+
+ // loads the new translation data on sequential load
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'es');
+ });
+ });
+
+ describe('when Intl.PluralRules is not defined', () => {
+ beforeAll(() => {
+ defaultLoadIntl.mockClear();
+ loadTranslations.mockClear();
+ global.Intl = { DateTimeFormat: jest.fn(), NumberFormat: jest.fn() };
+ });
+ afterAll(() => { global.Intl = undefined; });
+
+ it('loads en locale', () => {
+ i18nLoader('en');
+
+ // adds the intl polyfill
+ expect(global.Intl).toBeDefined();
+ expect(global.IntlPolyfill).toBeDefined();
+
+ // loads the locale data
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'en', 'intl');
+
+ // loads translations
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'en');
+ });
+
+ it('loads es locale', () => {
+ i18nLoader('es');
+
+ // loads the new locale data on sequential load
+ expect(defaultLoadIntl).toHaveBeenNthCalledWith(1, 'es', 'intl');
+
+ // loads the new translation data on sequential load
+ expect(loadTranslations).toHaveBeenNthCalledWith(1, 'es');
+ });
+ });
+});
diff --git a/packages/terra-application/tests/jest/application-base/private/intlLoaders.test.js b/packages/terra-application/tests/jest/application-base/private/intlLoaders.test.js
new file mode 100644
index 000000000..e4f58298b
--- /dev/null
+++ b/packages/terra-application/tests/jest/application-base/private/intlLoaders.test.js
@@ -0,0 +1,239 @@
+import hasIntlData from 'intl-locales-supported';
+import * as loadLocaleData from '../../../../src/application-base/private/loadLocaleData';
+import loadIntl from '../../../../src/application-base/private/intlLoaders';
+import logger from '../../../../src/utils/logger';
+
+jest.mock('intl-locales-supported');
+jest.mock('../../../../src/application-base/private/loadLocaleData');
+jest.mock('../../../../src/utils/logger', () => ({
+ warn: jest.fn(),
+}));
+
+const supportedIntlConstructors = [
+ Intl.DateTimeFormat,
+ Intl.NumberFormat,
+ Intl.PluralRules,
+];
+
+describe('intlLoaders', () => {
+ beforeAll(() => {
+ hasIntlData.mockReturnValue(false);
+ });
+
+ afterAll(() => {
+ window.Intl.mockReset();
+ });
+
+ describe('dev environment', () => {
+ beforeEach(() => {
+ logger.warn.mockClear();
+ });
+
+ it('logs a warning when the regional locale is not provided and locale fallback is used', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es-US') {
+ return Promise.reject(Error('Locale data was not supplied for the es-US locale.'));
+ }
+ return Promise.resolve();
+ });
+ expect.assertions(4);
+ return loadIntl('es-US', 'intl').then(() => {
+ expect(logger.warn).toBeCalledWith('Locale data was not supplied for the es-US locale. Using es data as the fallback locale data.');
+ expect(loadLocaleData.default).toHaveBeenCalledTimes(2);
+ expect(loadLocaleData.default).toHaveBeenNthCalledWith(2, 'es', 'intl');
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('en', 'intl');
+ });
+ });
+
+ it('logs a warning when the locale is not provided and en fallback is used', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es') {
+ return Promise.reject(Error('Locale data was not supplied for the es locale.'));
+ }
+ return Promise.resolve();
+ });
+ expect.assertions(3);
+ return loadIntl('es', 'intl').then(() => {
+ expect(logger.warn).toBeCalledWith('Locale data was not supplied for the es locale. Using en data as the fallback locale data.');
+ expect(loadLocaleData.default).toHaveBeenCalledTimes(2);
+ expect(loadLocaleData.default).toHaveBeenNthCalledWith(2, 'en', 'intl');
+ });
+ });
+
+ it('logs a warning when the regional locale and locale are not provided and en fallback is used', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es-US') {
+ return Promise.reject(Error('Locale data was not supplied for the es-US locale.'));
+ }
+ if (locale === 'es') {
+ return Promise.reject(Error('Locale data was not supplied for the es locale.'));
+ }
+ return Promise.resolve();
+ });
+ expect.assertions(4);
+ return loadIntl('es-US', 'intl').then(() => {
+ expect(logger.warn).toBeCalledWith('Locale data was not supplied for the es-US locale. Using es data as the fallback locale data.');
+ expect(logger.warn).toBeCalledWith('Locale data was not supplied for the es locale. Using en data as the fallback locale data.');
+ expect(loadLocaleData.default).toHaveBeenCalledTimes(3);
+ expect(loadLocaleData.default).toHaveBeenNthCalledWith(3, 'en', 'intl');
+ });
+ });
+
+ it('throws an error when the regional locale and en fallback are not provided', () => {
+ loadLocaleData.default = jest.fn(() => Promise.reject(Error('Test no locale data')));
+ return expect(loadIntl('es-US', 'intl')).rejects.toThrow('Test no locale data');
+ });
+
+ it('throws an error when the locale and en fallback are not provided', () => {
+ loadLocaleData.default = jest.fn(() => Promise.reject(Error('Test no locale data')));
+ return expect(loadIntl('es', 'intl')).rejects.toThrow('Test no locale data');
+ });
+ });
+
+ describe('production environment', () => {
+ beforeEach(() => {
+ process.env.NODE_ENV = 'production';
+ logger.warn.mockClear();
+ });
+
+ afterEach(() => {
+ delete process.env.NODE_ENV;
+ });
+
+ it('only fallbacks when the regional locale is not provided and locale fallback is used', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es-US') {
+ return Promise.reject(Error('Locale data was not supplied for the es-US locale.'));
+ }
+ return Promise.resolve();
+ });
+ expect.assertions(3);
+ return loadIntl('es-US', 'intl').then(() => {
+ expect(loadLocaleData.default).toHaveBeenCalledTimes(2);
+ expect(loadLocaleData.default).toHaveBeenNthCalledWith(2, 'es', 'intl');
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('en', 'intl');
+ });
+ });
+
+ it('only fallbacks when the regional locale and locale are not provided and en fallback is used', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es') {
+ return Promise.reject(Error('Locale data was not supplied for the es locale.'));
+ }
+ return Promise.resolve();
+ });
+ expect.assertions(2);
+ return loadIntl('es', 'intl').then(() => {
+ expect(loadLocaleData.default).toHaveBeenCalledTimes(2);
+ expect(loadLocaleData.default).toHaveBeenNthCalledWith(2, 'en', 'intl');
+ });
+ });
+
+ it('only fallbacks when the locale is not provided and en fallback is used', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es-US') {
+ return Promise.reject(Error('Locale data was not supplied for the es-US locale.'));
+ }
+ if (locale === 'es') {
+ return Promise.reject(Error('Locale data was not supplied for the es locale.'));
+ }
+ return Promise.resolve();
+ });
+ expect.assertions(2);
+ return loadIntl('es-US', 'intl').then(() => {
+ expect(loadLocaleData.default).toHaveBeenCalledTimes(3);
+ expect(loadLocaleData.default).toHaveBeenNthCalledWith(3, 'en', 'intl');
+ });
+ });
+
+ it('still throws an error when the locale and en fallback are not provided', () => {
+ loadLocaleData.default = jest.fn(() => Promise.reject(Error('Test no locale data')));
+ return expect(loadIntl('es-US', 'intl')).rejects.toThrow('Test no locale data');
+ });
+
+ it('still throws an error when the regional locale and en fallback are not provided', () => {
+ loadLocaleData.default = jest.fn(() => Promise.reject(Error('Test no locale data')));
+ return expect(loadIntl('es', 'intl')).rejects.toThrow('Test no locale data');
+ });
+ });
+ describe('loads locale data as needed', () => {
+ beforeEach(() => {
+ hasIntlData.mockClear();
+ loadLocaleData.default = jest.fn(() => Promise.resolve());
+ });
+
+ it('loads locale data', () => {
+ hasIntlData.mockReturnValue(false);
+ expect.assertions(3);
+ return loadIntl('es', 'intl').then(() => {
+ expect(loadLocaleData.default).toHaveBeenCalledWith('es', 'intl');
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('en', 'intl');
+ expect(hasIntlData).toBeCalledWith(['es'], supportedIntlConstructors);
+ });
+ });
+
+ it('does not re-load locale data when it has already been loaded', () => {
+ hasIntlData.mockReturnValue(true);
+ expect.assertions(3);
+ return loadIntl('es', 'intl').then(() => {
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('es', 'intl');
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('en', 'intl');
+ expect(hasIntlData).toBeCalledWith(['es'], supportedIntlConstructors);
+ });
+ });
+
+ it('does load new locale data', () => {
+ hasIntlData.mockReturnValue(false);
+ expect.assertions(3);
+ return loadIntl('pt', 'intl').then(() => {
+ expect(loadLocaleData.default).toHaveBeenCalledWith('pt', 'intl');
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('en', 'intl');
+ expect(hasIntlData).toBeCalledWith(['pt'], supportedIntlConstructors);
+ });
+ });
+
+ it('does not re-load region locale data if regional local has already been loaded', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es-US') {
+ return Promise.reject(Error('Locale data not provided for es-US locale.'));
+ }
+
+ return Promise.resolve();
+ });
+ hasIntlData.mockReturnValue(true);
+ expect.assertions(3);
+ return loadIntl('es-US', 'intl').then(() => {
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('es', 'intl');
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('en', 'intl');
+ expect(hasIntlData).toHaveBeenNthCalledWith(1, ['es-US'], supportedIntlConstructors);
+ });
+ });
+
+ it('does not fallback locale data if fallback has already been loaded', () => {
+ loadLocaleData.default = jest.fn(locale => {
+ if (locale === 'es-US') {
+ return Promise.reject(Error('Locale data not provided for es-US locale.'));
+ }
+ if (locale === 'es') {
+ return Promise.reject(Error('Locale data not provided for es locale.'));
+ }
+
+ return Promise.resolve();
+ });
+ hasIntlData.mockReturnValue(false).mockReturnValueOnce(true);
+ expect.assertions(2);
+ return loadIntl('es-US', 'intl').then(() => {
+ expect(loadLocaleData.default).not.toHaveBeenCalledWith('en', 'intl');
+ expect(hasIntlData).toHaveBeenNthCalledWith(1, ['es-US'], supportedIntlConstructors);
+ });
+ });
+
+ it('does not add supported Intl constructors if supportedLocalesOf property does not exist', () => {
+ delete Intl.DateTimeFormat.supportedLocalesOf;
+ delete Intl.NumberFormat.supportedLocalesOf;
+ return loadIntl('en', 'intl').then(() => {
+ expect(hasIntlData).toHaveBeenNthCalledWith(1, ['en'], []);
+ });
+ });
+ });
+});
diff --git a/packages/terra-application/tests/jest/application-base/private/loadLocaleData.test.js b/packages/terra-application/tests/jest/application-base/private/loadLocaleData.test.js
new file mode 100644
index 000000000..7aefba5e4
--- /dev/null
+++ b/packages/terra-application/tests/jest/application-base/private/loadLocaleData.test.js
@@ -0,0 +1,83 @@
+import loadLocaleData from '../../../../src/application-base/private/loadLocaleData';
+
+const locales = ['en', 'en-AU', 'en-CA', 'en-US', 'en-GB', 'es', 'es-US', 'es-ES', 'de', 'fr', 'fr-FR', 'nl', 'nl-BE', 'pt', 'pt-BR', 'sv', 'sv-SE'];
+
+describe('loadLocaleData', () => {
+ beforeEach(() => {
+ jest.resetModules();
+ });
+
+ locales.forEach((locale) => {
+ it(`loads ${locale} intl data`, () => {
+ jest.doMock(`intl/locale-data/jsonp/${locale}.js`, () => ({
+ localeData: `${locale} included`,
+ }));
+ expect.assertions(1);
+ return loadLocaleData(locale, 'intl').then((module) => {
+ expect(module.localeData).toEqual(`${locale} included`);
+ });
+ });
+
+ if (locale === 'es-ES') {
+ it('loads es intl-relativetimeformat data for es-ES locale', () => {
+ jest.doMock('@formatjs/intl-relativetimeformat/locale-data/es.js', () => ({
+ localeData: 'es included',
+ }));
+ expect.assertions(1);
+ return loadLocaleData(locale, 'intl-relativetimeformat').then((module) => {
+ expect(module.localeData).toEqual('es included');
+ });
+ });
+ } else if (locale === 'fr-FR') {
+ it('loads fr intl-relativetimeformat data for fr-FR locale', () => {
+ jest.doMock('@formatjs/intl-relativetimeformat/locale-data/fr.js', () => ({
+ localeData: 'fr included',
+ }));
+ expect.assertions(1);
+ return loadLocaleData(locale, 'intl-relativetimeformat').then((module) => {
+ expect(module.localeData).toEqual('fr included');
+ });
+ });
+ } else if (locale === 'sv-SE') {
+ it('loads sv intl-relativetimeformat data for sv-SE locale', () => {
+ jest.doMock('@formatjs/intl-relativetimeformat/locale-data/sv.js', () => ({
+ localeData: 'sv included',
+ }));
+ expect.assertions(1);
+ return loadLocaleData(locale, 'intl-relativetimeformat').then((module) => {
+ expect(module.localeData).toEqual('sv included');
+ });
+ });
+ } else if (locale === 'pt-BR') {
+ it('loads pt intl-relativetimeformat data for pt-BR locale', () => {
+ jest.doMock('@formatjs/intl-relativetimeformat/locale-data/pt.js', () => ({
+ localeData: 'pt included',
+ }));
+ expect.assertions(1);
+ return loadLocaleData(locale, 'intl-relativetimeformat').then((module) => {
+ expect(module.localeData).toEqual('pt included');
+ });
+ });
+ } else {
+ it(`loads ${locale} intl-relativetimeformat data`, () => {
+ jest.doMock(`@formatjs/intl-relativetimeformat/locale-data/${locale}.js`, () => ({
+ localeData: `${locale} included`,
+ }));
+ expect.assertions(1);
+ return loadLocaleData(locale, 'intl-relativetimeformat').then((module) => {
+ expect(module.localeData).toEqual(`${locale} included`);
+ });
+ });
+ }
+ });
+
+ it('throws error when intl locale data does not exist', () => {
+ expect.assertions(1);
+ return expect(loadLocaleData('fake', 'intl')).rejects.toThrow();
+ });
+
+ it('throws error when intl-relativetimeformat locale data does not exist', () => {
+ expect.assertions(1);
+ return expect(loadLocaleData('fake', 'intl-relativetimeformat')).rejects.toThrow();
+ });
+});
diff --git a/packages/terra-application/tests/jest/application-base/private/translationsLoaders.test.js b/packages/terra-application/tests/jest/application-base/private/translationsLoaders.test.js
new file mode 100644
index 000000000..7f58b718c
--- /dev/null
+++ b/packages/terra-application/tests/jest/application-base/private/translationsLoaders.test.js
@@ -0,0 +1,157 @@
+import loadTranslations from '../../../../src/application-base/private/translationsLoaders';
+import Logger from '../../../../src/utils/logger';
+
+describe('translationsLoaders', () => {
+ beforeEach(() => {
+ jest.resetModules();
+ });
+
+ it('loads en translation file', async () => {
+ jest.doMock('en.js', () => ({
+ test: 'test',
+ }));
+ expect.assertions(1);
+ await loadTranslations('en').then(messages => {
+ expect(messages.test).toEqual('test');
+ });
+ });
+
+ it('logs a warning when the regional locale is not provided and locale fallback is used', async () => {
+ const spy = jest.spyOn(Logger, 'warn').mockImplementation(() => {});
+ jest.doMock('es.js', () => ({
+ test: 'test-es',
+ }));
+ expect.assertions(1);
+ await loadTranslations('es-US').then(() => {
+ expect(spy).toBeCalledWith(expect.stringContaining('Translations were not supplied for the es-US locale. Using es data as the fallback locale.'));
+ spy.mockRestore();
+ });
+ });
+
+ it('logs a warning when the locale is not provided and en fallback is used', async () => {
+ const spy = jest.spyOn(Logger, 'warn').mockImplementation(() => {});
+
+ let callCount = 0;
+
+ // this doMock actually mocks both 'en.js' and 'es.js' due to the module name mapper mapping the en and es files to the same file.
+ jest.doMock('en.js', () => {
+ if (callCount === 0) {
+ callCount += 1;
+ throw new Error('Translations were not supplied for the es locale.');
+ }
+ return ({
+ test: 'test',
+ });
+ });
+
+ await loadTranslations('es').then((messages) => {
+ expect(messages.test).toEqual('test');
+ expect(spy).toBeCalledWith(expect.stringContaining('Translations were not supplied for the es locale. Using en as the fallback locale.'));
+ spy.mockRestore();
+ });
+ });
+
+ it('logs a warning when the regional locale and locale are not provided and en fallback is used', async () => {
+ const spy = jest.spyOn(Logger, 'warn').mockImplementation(() => {});
+
+ let callCount = 0;
+
+ // this doMock actually mocks 'es-ES.js' 'en.js' and 'es.js' due to the module name mapper mapping the en and es files to the same file.
+ jest.doMock('en.js', () => {
+ if (callCount === 0) {
+ callCount += 1;
+ throw new Error('Translations were not supplied for the es-ES locale.');
+ }
+ if (callCount === 1) {
+ callCount += 1;
+ throw new Error('Translations were not supplied for the es locale.');
+ }
+ return ({
+ test: 'test',
+ });
+ });
+ await loadTranslations('es-ES').then((messages) => {
+ expect(messages.test).toEqual('test');
+ expect(spy).toHaveBeenNthCalledWith(1, expect.stringContaining('Translations were not supplied for the es-ES locale. Using es data as the fallback locale.'));
+ expect(spy).toHaveBeenNthCalledWith(2, expect.stringContaining('Translations were not supplied for the es locale. Using en as the fallback locale.'));
+ spy.mockRestore();
+ });
+ });
+
+ it('throws an error when the locale and en fallback are not provided', async () => {
+ const spy = jest.spyOn(Logger, 'warn').mockImplementation(() => {});
+ let callCount = 0;
+
+ // this doMock actually mocks both 'en.js' and 'es.js' due to the module name mapper mapping the en and es files to the same file.
+ jest.doMock('en.js', () => {
+ if (callCount === 0) {
+ callCount += 1;
+ throw new Error('Translations were not supplied for the es locale.');
+ }
+ throw new Error('Translations were not supplied for the en locale.');
+ });
+
+ await expect(loadTranslations('es')).rejects.toThrow('Translations were not supplied for the en locale.');
+ spy.mockRestore();
+ });
+
+ it('throws an error when the regional locale and en fallback are not provided', async () => {
+ const spy = jest.spyOn(Logger, 'warn').mockImplementation(() => {});
+ let callCount = 0;
+
+ // this doMock actually mocks both 'en.js' and 'es.js' due to the module name mapper mapping the en and es files to the same file.
+ jest.doMock('en.js', () => {
+ if (callCount === 0) {
+ callCount += 1;
+ throw new Error('Translations were not supplied for the en-US locale.');
+ }
+ throw new Error('Translations were not supplied for the en locale.');
+ });
+
+ await expect(loadTranslations('en-US')).rejects.toThrow('Translations were not supplied for the en locale.');
+ spy.mockRestore();
+ });
+
+ describe('production environment', () => {
+ beforeEach(() => {
+ process.env.NODE_ENV = 'production';
+ });
+
+ afterEach(() => {
+ delete process.env.NODE_ENV;
+ });
+
+ it('still throws an error when the locale and en fallback are not provided', async () => {
+ const spy = jest.spyOn(Logger, 'warn').mockImplementation(() => {});
+ let callCount = 0;
+
+ // this doMock actually mocks both 'en.js' and 'es.js' due to the module name mapper mapping the en and es files to the same file.
+ jest.doMock('en.js', () => {
+ if (callCount === 0) {
+ callCount += 1;
+ throw new Error('Translations were not supplied for the es locale.');
+ }
+ throw new Error('Translations were not supplied for the en locale.');
+ });
+
+ await expect(loadTranslations('es')).rejects.toThrow('Translations were not supplied for the en locale.');
+ spy.mockRestore();
+ });
+
+ it('still throws an error when the regional locale and en fallback are not provided', async () => {
+ const spy = jest.spyOn(Logger, 'warn').mockImplementation(() => {});
+ let callCount = 0;
+
+ // this doMock actually mocks both 'en.js' and 'es.js' due to the module name mapper mapping the en and es files to the same file.
+ jest.doMock('en.js', () => {
+ if (callCount === 0) {
+ callCount += 1;
+ throw new Error('Translations were not supplied for the en-US locale.');
+ }
+ throw new Error('Translations were not supplied for the en locale.');
+ });
+ await expect(loadTranslations('en-US')).rejects.toThrow('Translations were not supplied for the en locale.');
+ spy.mockRestore();
+ });
+ });
+});
diff --git a/packages/terra-application/tests/jest/application-error-boundary/ApplicationErrorBoundary.test.jsx b/packages/terra-application/tests/jest/application-error-boundary/ApplicationErrorBoundary.test.jsx
index e07fde3b6..996c2992f 100644
--- a/packages/terra-application/tests/jest/application-error-boundary/ApplicationErrorBoundary.test.jsx
+++ b/packages/terra-application/tests/jest/application-error-boundary/ApplicationErrorBoundary.test.jsx
@@ -7,7 +7,7 @@ describe('ApplicationErrorBoundary', () => {
it('should render with minimal props', () => {
const wrapper = enzymeIntl.shallowWithIntl((
- ));
+ )).dive();
expect(wrapper).toMatchSnapshot();
});
@@ -17,7 +17,7 @@ describe('ApplicationErrorBoundary', () => {
Test child
- ));
+ )).dive();
expect(wrapper).toMatchSnapshot();
});
@@ -42,7 +42,7 @@ describe('ApplicationErrorBoundary', () => {
/**
* After rendering the component again, the error view should no longer be rendered.
*/
- wrapper.instance().forceUpdate();
+ wrapper.setProps({});
expect(wrapper).toMatchSnapshot();
expect(spy).toHaveBeenCalledTimes(1);
spy.mockRestore();
diff --git a/packages/terra-application/tests/jest/application-error-boundary/__snapshots__/ApplicationErrorBoundary.test.jsx.snap b/packages/terra-application/tests/jest/application-error-boundary/__snapshots__/ApplicationErrorBoundary.test.jsx.snap
index 14c0d3fa2..e5a6841c3 100644
--- a/packages/terra-application/tests/jest/application-error-boundary/__snapshots__/ApplicationErrorBoundary.test.jsx.snap
+++ b/packages/terra-application/tests/jest/application-error-boundary/__snapshots__/ApplicationErrorBoundary.test.jsx.snap
@@ -1,61 +1,45 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ApplicationErrorBoundary Snapshots should render error view when an error is detected 1`] = `
-
+
@@ -63,65 +47,49 @@ exports[`ApplicationErrorBoundary Snapshots should render error view when an err
-
+
`;
exports[`ApplicationErrorBoundary Snapshots should render error view when an error is detected 2`] = `
-
+
@@ -156,11 +124,8 @@ exports[`ApplicationErrorBoundary Snapshots should render error view when an err
>
-
- Terra.status-view.error
-
+ Terra.status-view.error
-
+
`;
exports[`ApplicationErrorBoundary Snapshots should render error view when an error is detected 3`] = `
-
+
-
-