[Test] Wrap FunComponent in unit test with IntlProvider #654

ananzh · 2021-07-16T16:40:20Z

Description

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 parent wrapper.

This PR solves 7 out of 8 unit tests with this issue by wrapping the . The enzyme_helper contains functions with injected intl object and 4 unit tests can eliminate console error by switching mount to mountWithIntl and render to renderWithIntl. For the other 3 unit tests, the argument type wrappingComponent is not assignable to parameter of type context. This PR wraps these components with simple IntlProvider.

Partically Resolved:

#593

Test result:

src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx

yarn test:jest src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx -u
yarn run v1.22.5
$ node scripts/jest src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx -u
 PASS  src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx
  TelemetryManagementSectionComponent
    ✓ renders as expected (9 ms)
    ✓ renders null because query does not match the SEARCH_TERMS (39 ms)
    ✓ renders because query matches the SEARCH_TERMS (31 ms)
    ✓ renders null because allowChangingOptInStatus is false (4 ms)
    ✓ shows the OptInExampleFlyout (47 ms)
    ✓ shows the OptInSecurityExampleFlyout (24 ms)
    ✓ does not show the endpoint link when isSecurityExampleEnabled returns false (9 ms)
    ✓ toggles the OptIn button (32 ms)
    ✓ test the wrapper (for coverage purposes)

 › 1 snapshot updated.
  console.error
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
        in OptInExampleFlyout (created by TelemetryManagementSection)
        in TelemetryManagementSection (created by WrapperComponent)
        in WrapperComponent

      75 |       const { fetchExample } = this.props;
      76 |       const clusters = await fetchExample();
    > 77 |       this.setState({
         |            ^
      78 |         data: Array.isArray(clusters) ? clusters : null,
      79 |         isLoading: false,
      80 |         hasPrivilegeToRead: true,

      at warningWithoutStack (node_modules/react-dom/cjs/react-dom.development.js:530:32)
      at warnAboutUpdateOnUnmountedFiberInDEV (node_modules/react-dom/cjs/react-dom.development.js:25738:5)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23679:5)
      at Object.enqueueSetState (node_modules/react-dom/cjs/react-dom.development.js:13994:5)
      at OptInExampleFlyout.setState (node_modules/react/cjs/react.development.js:325:16)
      at OptInExampleFlyout.componentDidMount (src/plugins/telemetry_management_section/public/components/opt_in_example_flyout.tsx:77:12)

Snapshot Summary
 › 1 snapshot updated from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       9 passed, 9 total
Snapshots:   1 updated, 3 passed, 4 total
Time:        3.903 s, estimated 4 s
Ran all test suites matching /src\/plugins\/telemetry_management_section\/public\/components\/telemetry_management_section.test.tsx/i.
Done in 5.81s.

/src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx

yarn test:jest /src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx
yarn run v1.22.5
$ node scripts/jest /src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx
 PASS  src/plugins/index_pattern_management/public/components/field_editor/components/scripting_call_outs/warning_call_out.test.tsx
  ScriptingWarningCallOut
    ✓ should render normally (16 ms)
    ✓ should render nothing if not visible (1 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   2 passed, 2 total
Time:        4.703 s, estimated 5 s
Ran all test suites matching /\/src\/plugins\/index_pattern_management\/public\/components\/field_editor\/components\/scripting_call_outs\/warning_call_out.test.tsx/i.
Done in 6.61s.

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx

yarn test:jest src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx
yarn run v1.22.5
$ node scripts/jest src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx
 PASS  src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/header/header.test.tsx
  Header
    ✓ should render normally (14 ms)
    ✓ should render without including system indices (5 ms)
    ✓ should render a different name, prompt, and beta tag if provided (7 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   3 passed, 3 total
Time:        5.036 s, estimated 9 s
Ran all test suites matching /src\/plugins\/index_pattern_management\/public\/components\/create_index_pattern_wizard\/components\/header\/header.test.tsx/i.
Done in 7.48s.

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

yarn test:jest src/core/public/core_app/status/components/server_status.test.tsx
yarn run v1.22.5
$ node scripts/jest src/core/public/core_app/status/components/server_status.test.tsx
 PASS  src/core/public/core_app/status/components/server_status.test.tsx
  ServerStatus
    ✓ renders correctly for green state (19 ms)
    ✓ renders correctly for red state (8 ms)
    ✓ displays the correct `name` (7 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   6 passed, 6 total
Time:        2.818 s, estimated 3 s
Ran all test suites matching /src\/core\/public\/core_app\/status\/components\/server_status.test.tsx/i.
Done in 5.17s.

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

yarn test:jest src/core/public/application/ui/app_container.test.tsx
yarn run v1.22.5
$ node scripts/jest src/core/public/application/ui/app_container.test.tsx
 PASS  src/core/public/application/ui/app_container.test.tsx
  AppContainer
    ✓ should hide the "not found" page before mounting the route (35 ms)
    ✓ should call setIsMounting while mounting (4 ms)
    ✓ should call setIsMounting(false) if mounting throws (18 ms)

  console.error
    Error: Mounting failed!
        at Object.mount (/home/anan/work/OpenSearch-Dashboards/src/core/public/application/ui/app_container.test.tsx:165:15)

      106 |         // TODO: add error UI
      107 |         // eslint-disable-next-line no-console
    > 108 |         console.error(e);
          |                 ^
      109 |       } finally {
      110 |         if (elementRef.current) {
      111 |           setShowSpinner(false);

      at mount (src/core/public/application/ui/app_container.tsx:108:17)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        3.124 s
Ran all test suites matching /src\/core\/public\/application\/ui\/app_container.test.tsx/i.
Done in 5.58s.

src/plugins/vis_default_editor/public/components/controls/percentiles.test.tsx

 yarn test:jest src/plugins/vis_default_editor/public/components/controls/percentiles.test.tsx
yarn run v1.22.5
$ node scripts/jest src/plugins/vis_default_editor/public/components/controls/percentiles.test.tsx
 PASS  src/plugins/vis_default_editor/public/components/controls/percentiles.test.tsx
  PercentilesEditor component
    ✓ should set valid state to true after adding a unique percentile (35 ms)
    ✓ should set valid state to false after adding a duplicate percentile (28 ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        3.089 s
Ran all test suites matching /src\/plugins\/vis_default_editor\/public\/components\/controls\/percentiles.test.tsx/i.
Done in 5.44s.

src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx

yarn test:jest src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx -u
yarn run v1.22.5
$ node scripts/jest src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx -u
 PASS  src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/header.test.tsx
  Header
    ✓ should render normally (16 ms)

 › 1 snapshot updated.
Snapshot Summary
 › 1 snapshot updated from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 updated, 1 total
Time:        3.273 s, estimated 4 s
Ran all test suites matching /src\/plugins\/index_pattern_management\/public\/components\/edit_index_pattern\/scripted_fields_table\/components\/header\/header.test.tsx/i.
Done in 5.19s.

Check List

New functionality includes testing.
- All tests pass
New functionality has been documented.
- New functionality has javadoc added
Commits are signed per the DCO using --signoff

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 Signed-off-by: Anan Zhuang <[email protected]>

opensearch-ci-bot · 2021-07-16T16:42:22Z

✅ DCO Check Passed 4af7777

kavilla

LGTM

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]>

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: #593 Backport PR: #654 Signed-off-by: Anan Zhuang <[email protected]>

ananzh added test:unit v1.1.0 labels Jul 16, 2021

ananzh requested review from tmarkley, kavilla and boktorbb July 16, 2021 16:40

ananzh self-assigned this Jul 16, 2021

kavilla approved these changes Jul 22, 2021

View reviewed changes

tmarkley approved these changes Jul 22, 2021

View reviewed changes

ananzh mentioned this pull request Jul 23, 2021

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

Merged

5 tasks

ananzh merged commit b9eb9c6 into opensearch-project:main Jul 23, 2021

ananzh deleted the intlerror branch February 23, 2022 17:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Test] Wrap FunComponent in unit test with IntlProvider #654

[Test] Wrap FunComponent in unit test with IntlProvider #654

ananzh commented Jul 16, 2021

opensearch-ci-bot commented Jul 16, 2021

kavilla left a comment

[Test] Wrap FunComponent in unit test with IntlProvider #654

[Test] Wrap FunComponent in unit test with IntlProvider #654

Conversation

ananzh commented Jul 16, 2021

Description

Partically Resolved:

Test result:

Check List

opensearch-ci-bot commented Jul 16, 2021

kavilla left a comment

Choose a reason for hiding this comment