[1.x][Test] Wrap FunComponent in unit test with IntlProvider

In the FunctionComponent unit tests, we see many console errors:
`Could not find required intl object. <IntlProvider> needs to
exist in the component ancestry. `

This is because for some unit tests, we mount the FunctionComponent
(with Enzyme's mount()) , which access to the react-intl context by
FormattedMessage without their <IntlProvider /> parent wrapper.

This PR solves 7 out of 8 unit tests with this issue by wrapping the
<IntlProvider /> either through original enzyme_helper functions or
a simple wrapper wrapWithIntl.

Partically Resolved:
opensearch-project#593

Backport PR:
opensearch-project#654

Signed-off-by: Anan Zhuang <[email protected]>

src/core/public/application/ui/app_container.test.tsx

@@ -33,6 +33,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 import { AppContainer } from './app_container';
 import { Mounter, AppMountParameters, AppStatus } from '../types';
@@ -82,7 +83,7 @@ describe('AppContainer', () => {
     const [waitPromise, resolvePromise] = createResolver();
     const mounter = createMounter(waitPromise);
 
-    const wrapper = mount(
+    const wrapper = mountWithIntl(
       <AppContainer
         appPath={`/app/${appId}`}
         appId={appId}

src/core/public/core_app/status/components/server_status.test.tsx

@@ -31,9 +31,9 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
 import { ServerStatus } from './server_status';
 import { FormattedStatus } from '../lib';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 const getStatus = (parts: Partial<FormattedStatus['state']> = {}): FormattedStatus['state'] => ({
   id: 'green',
@@ -46,7 +46,7 @@ const getStatus = (parts: Partial<FormattedStatus['state']> = {}): FormattedStat
 describe('ServerStatus', () => {
   it('renders correctly for green state', () => {
     const status = getStatus();
-    const component = mount(<ServerStatus serverState={status} name="My Computer" />);
+    const component = mountWithIntl(<ServerStatus serverState={status} name="My Computer" />);
     expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(
       `"OpenSearch Dashboards status is Green"`
     );
@@ -58,18 +58,20 @@ describe('ServerStatus', () => {
       id: 'red',
       title: 'Red',
     });
-    const component = mount(<ServerStatus serverState={status} name="My Computer" />);
+    const component = mountWithIntl(<ServerStatus serverState={status} name="My Computer" />);
     expect(component.find('EuiTitle').text()).toMatchInlineSnapshot(
       `"OpenSearch Dashboards status is Red"`
     );
     expect(component.find('EuiBadge')).toMatchSnapshot();
   });
 
   it('displays the correct `name`', () => {
-    let component = mount(<ServerStatus serverState={getStatus()} name="Localhost" />);
+    let component = mountWithIntl(<ServerStatus serverState={getStatus()} name="Localhost" />);
     expect(component.find('EuiText').text()).toMatchInlineSnapshot(`"Localhost"`);
 
-    component = mount(<ServerStatus serverState={getStatus()} name="OpenSearchDashboards" />);
+    component = mountWithIntl(
+      <ServerStatus serverState={getStatus()} name="OpenSearchDashboards" />
+    );
     expect(component.find('EuiText').text()).toMatchInlineSnapshot(`"OpenSearchDashboards"`);
   });
 });