From cff01f8e23dd926fc51f92806d22b1edf1a55057 Mon Sep 17 00:00:00 2001 From: Anan <79961084+ananzh@users.noreply.github.com> Date: Fri, 23 Jul 2021 09:05:45 -0700 Subject: [PATCH] [1.x][Test] Wrap FunComponent in unit test with IntlProvider (#661) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In the FunctionComponent unit tests, we see many console errors: `Could not find required intl object. 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  parent wrapper. This PR solves 7 out of 8 unit tests with this issue by wrapping the either through original enzyme_helper functions or a simple wrapper wrapWithIntl. Partically Resolved: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/593 Backport PR: https://github.com/opensearch-project/OpenSearch-Dashboards/pull/654 Signed-off-by: Anan Zhuang --- .../application/ui/app_container.test.tsx | 3 +- .../status/components/server_status.test.tsx | 12 +- .../header/__snapshots__/header.test.tsx.snap | 650 +++++++++--------- .../components/header/header.test.tsx | 19 +- .../header/__snapshots__/header.test.tsx.snap | 12 +- .../components/header/header.test.tsx | 5 +- .../warning_call_out.test.tsx.snap | 320 ++++----- .../warning_call_out.test.tsx | 5 +- .../telemetry_management_section.test.tsx | 38 +- .../components/controls/percentiles.test.tsx | 5 +- src/test_utils/public/enzyme_helpers.tsx | 15 +- 11 files changed, 561 insertions(+), 523 deletions(-) diff --git a/src/core/public/application/ui/app_container.test.tsx b/src/core/public/application/ui/app_container.test.tsx index 5b16bb3289c4..73281ec69513 100644 --- a/src/core/public/application/ui/app_container.test.tsx +++ b/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( = {}): FormattedStatus['state'] => ({ id: 'green', @@ -46,7 +46,7 @@ const getStatus = (parts: Partial = {}): FormattedStat describe('ServerStatus', () => { it('renders correctly for green state', () => { const status = getStatus(); - const component = mount(); + const component = mountWithIntl(); expect(component.find('EuiTitle').text()).toMatchInlineSnapshot( `"OpenSearch Dashboards status is Green"` ); @@ -58,7 +58,7 @@ describe('ServerStatus', () => { id: 'red', title: 'Red', }); - const component = mount(); + const component = mountWithIntl(); expect(component.find('EuiTitle').text()).toMatchInlineSnapshot( `"OpenSearch Dashboards status is Red"` ); @@ -66,10 +66,12 @@ describe('ServerStatus', () => { }); it('displays the correct `name`', () => { - let component = mount(); + let component = mountWithIntl(); expect(component.find('EuiText').text()).toMatchInlineSnapshot(`"Localhost"`); - component = mount(); + component = mountWithIntl( + + ); expect(component.find('EuiText').text()).toMatchInlineSnapshot(`"OpenSearchDashboards"`); }); }); diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap index 1eadc4d82e98..2318d08ee333 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/__snapshots__/header.test.tsx.snap @@ -1,352 +1,364 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Header should render a different name, prompt, and beta tag if provided 1`] = ` -
+
+ Test prompt + } - } - indexPatternName="test index pattern" - isBeta={true} - prompt={ + >
- Test prompt -
- } -> -
- -

- Create test index pattern - - +

- - Beta - - -

- - -
- - -
+ Beta + + +

+ + -

- - multiple - , - "single": - filebeat-4-3-22 - , - "star": - filebeat-* - , +

+ + +
+

+ + multiple + , + "single": + filebeat-4-3-22 + , + "star": + filebeat-* + , + } } - } - > - - An index pattern can match a single source, for example, - - - - - filebeat-4-3-22 - - - - - , or - - multiple - - data sources, - - + + An index pattern can match a single source, for example, + + + + + filebeat-4-3-22 + + + + + , or + + multiple + + data sources, + + + + + filebeat-* + + + + + . + + +
+ + - -

+ + + +

+
+ + +
+ +
+ Test prompt
- - -
- -
- Test prompt
-
-
+
+ `; exports[`Header should render normally 1`] = ` -
-
- -

- Create test index pattern -

- - -
- - -
+
+ +

+ Create test index pattern +

+ + -

- - multiple - , - "single": - filebeat-4-3-22 - , - "star": - filebeat-* - , +

+ + +
+

+ + multiple + , + "single": + filebeat-4-3-22 + , + "star": + filebeat-* + , + } } - } - > - - An index pattern can match a single source, for example, - - - - - filebeat-4-3-22 - - - - - , or - - multiple - - data sources, - - + + An index pattern can match a single source, for example, + + + + + filebeat-4-3-22 + + + + + , or + + multiple + + data sources, + + + + + filebeat-* + + + + + . + + +
+ + - -

-
- -
-
+ + + +

+ + + + + `; exports[`Header should render without including system indices 1`] = ` -
-
- -

- Create test index pattern -

- - -
- - -
+
+ +

+ Create test index pattern +

+ + -

- - multiple - , - "single": - filebeat-4-3-22 - , - "star": - filebeat-* - , +

+ + +
+

+ + multiple + , + "single": + filebeat-4-3-22 + , + "star": + filebeat-* + , + } } - } - > - - An index pattern can match a single source, for example, - - - - - filebeat-4-3-22 - - - - - , or - - multiple - - data sources, - - + + An index pattern can match a single source, for example, + + + + + filebeat-4-3-22 + + + + + , or + + multiple + + data sources, + + + + + filebeat-* + + + + + . + + +
+ + - -

-
- -
-
+ + + +

+ + + + + `; diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx index f3d84fa86e9f..b06c9a7e54c7 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx @@ -33,6 +33,7 @@ import React from 'react'; import { Header } from '../header'; import { mount } from 'enzyme'; +import { wrapWithIntl } from 'test_utils/enzyme_helpers'; import { OpenSearchDashboardsContextProvider } from 'src/plugins/opensearch_dashboards_react/public'; import { mockManagementPlugin } from '../../../../mocks'; import { DocLinksStart } from 'opensearch-dashboards/public'; @@ -48,7 +49,7 @@ describe('Header', () => { it('should render normally', () => { const component = mount( -
, + wrapWithIntl(
), { wrappingComponent: OpenSearchDashboardsContextProvider, wrappingComponentProps: { @@ -62,7 +63,7 @@ describe('Header', () => { it('should render without including system indices', () => { const component = mount( -
, + wrapWithIntl(
), { wrappingComponent: OpenSearchDashboardsContextProvider, wrappingComponentProps: { @@ -76,12 +77,14 @@ describe('Header', () => { it('should render a different name, prompt, and beta tag if provided', () => { const component = mount( -
Test prompt} - indexPatternName={indexPatternName} - isBeta={true} - docLinks={mockedDocLinks} - />, + wrapWithIntl( +
Test prompt} + indexPatternName={indexPatternName} + isBeta={true} + docLinks={mockedDocLinks} + /> + ), { wrappingComponent: OpenSearchDashboardsContextProvider, wrappingComponentProps: { diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap index 5218ebd1b4ad..a1941df16574 100644 --- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap +++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap @@ -10,17 +10,13 @@ exports[`Header should render normally 1`] = `

- - Scripted fields - + Scripted fields

- - You can use scripted fields in visualizations and display them in your documents. However, you cannot search scripted fields. - + You can use scripted fields in visualizations and display them in your documents. However, you cannot search scripted fields.

@@ -38,9 +34,7 @@ exports[`Header should render normally 1`] = ` - - Add scripted field - + Add scripted field diff --git a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx index 218225d3e364..6cd734d25993 100644 --- a/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx +++ b/src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx @@ -31,16 +31,15 @@ */ import React from 'react'; -import { render } from 'enzyme'; +import { renderWithIntl } from 'test_utils/enzyme_helpers'; import { RouteComponentProps } from 'react-router-dom'; import { ScopedHistory } from 'opensearch-dashboards/public'; import { scopedHistoryMock } from '../../../../../../../../core/public/mocks'; - import { Header } from './header'; describe('Header', () => { test('should render normally', () => { - const component = render( + const component = renderWithIntl( - - } + -
+ } >
-