From 970356973f498a04987eaf14d07354e78825c55b Mon Sep 17 00:00:00 2001 From: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com> Date: Mon, 30 Jun 2025 14:10:03 +0200 Subject: [PATCH] [ML] Migrate `Enzyme` tests to `RTL` (#225423) Resolves https://github.com/elastic/kibana/issues/223197 (cherry picked from commit a01759c410312b65134c9daf505d94f8e55b9c44) --- .../__snapshots__/list.test.tsx.snap | 879 +++++++++++------- .../custom_url_editor/list.test.tsx | 37 +- .../custom_urls/custom_url_editor/list.tsx | 6 +- .../timerange_bar/timerange_bar.test.js | 14 +- .../outlier_exploration.test.tsx | 31 - .../create_analytics_button.test.tsx | 24 +- ...explorer_no_influencers_found.test.js.snap | 12 +- .../explorer_no_influencers_found.test.js | 11 +- .../explorer_no_results_found.test.js.snap | 51 +- .../explorer_no_results_found.test.js | 13 +- .../explorer_chart_label.test.js.snap | 133 ++- .../explorer_chart_label_badge.test.js.snap | 28 +- .../explorer_chart_label.test.js | 16 +- .../explorer_chart_label_badge.test.js | 8 +- .../filter_list_usage_popover.test.js.snap | 142 +-- .../filter_list_usage_popover.test.js | 52 +- 16 files changed, 793 insertions(+), 664 deletions(-) delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.test.tsx diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/__snapshots__/list.test.tsx.snap b/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/__snapshots__/list.test.tsx.snap index b282465efc7d6..234c59d661a61 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/__snapshots__/list.test.tsx.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/__snapshots__/list.test.tsx.snap @@ -4,389 +4,590 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
- - - - } + id="generated-id-row" > - - - - - - } +
+ +
+
+
+
+ +
+
+
+
+ +
+
- - - - + +
+
+
+
+ +
+
+
+
+ +
- - } +
- - - - + +
+
+
+
+ +
+
+
+
+ +
- - - } - delay="regular" - disableScreenReaderOutput={false} - display="inlineBlock" - position="top" +
+
- - - - - + + +
+
+
+
- - - } - delay="regular" - disableScreenReaderOutput={false} - display="inlineBlock" - position="top" +
+
- - - - - - + + +
+
+
+ +
- - - - } + id="generated-id-row" > - - - - - - } +
+ +
+
+
+
+ +
+
+
+
+ +
+
- - - - + +
+
+
+
+ +
+
+
+
+ +
- - } +
- - - - + +
+
+
+
+ +
+
+
+
+ +
- - - } - delay="regular" - disableScreenReaderOutput={false} - display="inlineBlock" - position="top" +
+
- - - - - + + +
+
+
+
- - - } - delay="regular" - disableScreenReaderOutput={false} - display="inlineBlock" - position="top" +
+
- - - - - - + + +
+
+
+ +
- - - - } + id="generated-id-row" > - - - - - - } +
+ +
+
+
+
+ +
+
+
+
+ +
+
- - - - + +
+
+
+
+ +
+
+
+
+ +
- - } +
- - - - + +
+
+
+
+ +
+
+
+
+ +
- - - } - delay="regular" - disableScreenReaderOutput={false} - display="inlineBlock" - position="top" +
+
- - - - - + + +
+
+
+
- - - } - delay="regular" - disableScreenReaderOutput={false} - display="inlineBlock" - position="top" +
+
- - - - - - + + +
+
+
+ +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.test.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.test.tsx index 6fe6da5ce1f64..140c44f599133 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.test.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.test.tsx @@ -6,11 +6,13 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import type { Job } from '../../../../../common/types/anomaly_detection_jobs'; import type { CustomUrlListProps } from './list'; import { CustomUrlList } from './list'; +import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; jest.mock('../../../contexts/kibana'); @@ -53,27 +55,32 @@ function prepareTest(setCustomUrlsFn: jest.Mock) { dataViewListItems: [], }; - return shallow(); + return render( + + + + ); } describe('CustomUrlList', () => { - const setCustomUrls = jest.fn(() => {}); + const setCustomUrls = jest.fn(); test('renders a list of custom URLs', () => { - const wrapper = prepareTest(setCustomUrls); - expect(wrapper).toMatchSnapshot(); + const { container } = prepareTest(setCustomUrls); + expect(container.firstChild).toMatchSnapshot(); }); - test('switches custom URL field to textarea and calls setCustomUrls on change', () => { - const wrapper = prepareTest(setCustomUrls); - wrapper.update(); - const url1LabelInput = wrapper.find('[data-test-subj="mlJobEditCustomUrlInput_0"]'); - url1LabelInput.simulate('focus'); - wrapper.update(); - const url1LabelTextarea = wrapper.find('[data-test-subj="mlJobEditCustomUrlTextarea_0"]'); - expect(url1LabelTextarea).toBeDefined(); - url1LabelTextarea.simulate('change', { target: { value: 'Edit' } }); - wrapper.update(); + test('switches custom URL field to textarea and calls setCustomUrls on change', async () => { + const { getByTestId } = prepareTest(setCustomUrls); + const user = userEvent.setup(); + + const input = getByTestId('mlJobEditCustomUrlInput_0'); + await user.click(input); + + const textarea = getByTestId('mlJobEditCustomUrlTextarea_0'); + expect(textarea).toBeInTheDocument(); + + await user.type(textarea, 'Edit'); expect(setCustomUrls).toHaveBeenCalled(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx index e76b55a6f2369..a24aa041b6c10 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx @@ -211,8 +211,8 @@ export const CustomUrlList: FC = ({ : []; return ( - <> - + + = ({ - + ); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js index d697c5b7939f4..a81abd5335d53 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/job_selector/timerange_bar/timerange_bar.test.js @@ -5,8 +5,8 @@ * 2.0. */ -import { mount } from 'enzyme'; import React from 'react'; +import { render } from '@testing-library/react'; import { TimeRangeBar } from './timerange_bar'; describe('TimeRangeBar', () => { @@ -17,16 +17,16 @@ describe('TimeRangeBar', () => { }; test('Renders gantt bar when isRunning is false', () => { - const wrapper = mount(); - const ganttBar = wrapper.find('div[data-test-subj="mlJobSelectorGanttBar"]'); + const { getByTestId } = render(); + const ganttBar = getByTestId('mlJobSelectorGanttBar'); - expect(ganttBar).toHaveLength(1); + expect(ganttBar).toBeInTheDocument(); }); test('Renders running animation bar when isRunning is true', () => { - const wrapper = mount(); - const runningBar = wrapper.find('div[data-test-subj="mlJobSelectorGanttBarRunning"]'); + const { getByTestId } = render(); + const runningBar = getByTestId('mlJobSelectorGanttBarRunning'); - expect(runningBar).toHaveLength(1); + expect(runningBar).toBeInTheDocument(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.test.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.test.tsx deleted file mode 100644 index b038695a4573d..0000000000000 --- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/outlier_exploration.test.tsx +++ /dev/null @@ -1,31 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import { shallow } from 'enzyme'; -import React from 'react'; -import { OutlierExploration } from './outlier_exploration'; -import { kibanaContextMock } from '../../../../../contexts/kibana/__mocks__/kibana_context'; - -// workaround to make React.memo() work with enzyme -jest.mock('react', () => { - const r = jest.requireActual('react'); - return { ...r, memo: (x: any) => x }; -}); - -describe('Data Frame Analytics: ', () => { - test('Minimal initialization', () => { - const wrapper = shallow( - - - - ); - // Without the jobConfig being loaded, the component will just return empty. - expect(wrapper.text()).toMatch(''); - // TODO Once React 16.9 is available we can write tests covering asynchronous hooks. - }); -}); diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/create_analytics_button.test.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/create_analytics_button.test.tsx index 9b3f86070a6cb..f37542e43b5c5 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/create_analytics_button.test.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_button/create_analytics_button.test.tsx @@ -5,17 +5,31 @@ * 2.0. */ -import { mount } from 'enzyme'; import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { CreateAnalyticsButton } from './create_analytics_button'; describe('Data Frame Analytics: ', () => { - test('Minimal initialization', () => { - const wrapper = mount( - + test('renders button with correct text', () => { + render(); + + expect(screen.getByText('Create job')).toBeInTheDocument(); + }); + + test('calls navigateToSourceSelection when clicked', async () => { + const navigateToSourceSelection = jest.fn(); + const user = userEvent.setup(); + + render( + ); - expect(wrapper.find('EuiButton').text()).toBe('Create job'); + await user.click(screen.getByText('Create job')); + expect(navigateToSourceSelection).toHaveBeenCalledTimes(1); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap index e9206eb99ec5a..4958af134e040 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/__snapshots__/explorer_no_influencers_found.test.js.snap @@ -1,13 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ExplorerNoInfluencersFound snapshot 1`] = ` - +
+ No field_name influencers found +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.test.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.test.js index 4d89c81c0e639..186a78b6dbb29 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_influencers_found/explorer_no_influencers_found.test.js @@ -6,12 +6,17 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; import { ExplorerNoInfluencersFound } from './explorer_no_influencers_found'; describe('ExplorerNoInfluencersFound', () => { test('snapshot', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + const { container } = render( + + + + ); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap index d797054457bf5..42cdaee023b2c 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/__snapshots__/explorer_no_results_found.test.js.snap @@ -1,18 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ExplorerNoInfluencersFound snapshot 1`] = ` - -

- -

- - } - iconType="info" - title={

} -/> +exports[`ExplorerNoResultsFound snapshot 1`] = ` +
+
+
+ +
+
+

+ No results found +

+
+
+

+ Try widening the time selection or moving further back in time +

+
+
+
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/explorer_no_results_found.test.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/explorer_no_results_found.test.js index a36edf7ed4856..01f93601d1f82 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/explorer_no_results_found.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/components/explorer_no_results_found/explorer_no_results_found.test.js @@ -6,12 +6,17 @@ */ import React from 'react'; -import { shallow } from 'enzyme'; +import { render } from '@testing-library/react'; +import { __IntlProvider as IntlProvider } from '@kbn/i18n-react'; import { ExplorerNoResultsFound } from './explorer_no_results_found'; -describe('ExplorerNoInfluencersFound', () => { +describe('ExplorerNoResultsFound', () => { test('snapshot', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + const { container } = render( + + + + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap index 329d7c4cea75f..5895d70bab15e 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap @@ -1,92 +1,65 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = ` - +exports[`ExplorerChartLabelBadge renders the chart label in one line 1`] = ` + - - high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03) -  –  + high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03) +  –  + + + + + + nginx.access.remote_ip + + + 72.57.0.53 + + + - -   - - - - } - css="unknown styles" - position="top" - size="s" - /> + +   + + + + + Info + - + `; -exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = ` - +exports[`ExplorerChartLabelBadge renders the chart label in two lines 1`] = ` + - - high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03) -   - - - - } - css="unknown styles" - position="top" - size="s" - /> - - - - + high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)   - + + + + Info + + + + `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap index 7f7fab0220c73..4bc55eb9b5de9 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap @@ -1,16 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = ` +exports[`ExplorerChartLabelBadge renders entity label badge 1`] = ` - - nginx.access.remote_ip - - - 72.57.0.53 - - + + + nginx.access.remote_ip + + + 72.57.0.53 + + + + `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js index 9ba30281e7f1a..957651214de64 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js @@ -7,16 +7,16 @@ import seriesConfig from '../../__mocks__/mock_series_config_filebeat.json'; -import { shallow } from 'enzyme'; import React from 'react'; +import { render } from '@testing-library/react'; import { ExplorerChartLabel } from './explorer_chart_label'; const DetectorLabel = {seriesConfig.detectorLabel}; describe('ExplorerChartLabelBadge', () => { - test('Render the chart label in one line.', () => { - const wrapper = shallow( + test('renders the chart label in one line', () => { + const { container } = render( { wrapLabel={false} /> ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); - test('Render the chart label in two lines.', () => { - const wrapper = shallow( + test('renders the chart label in two lines', () => { + const { container } = render( ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js index 0aae42e226be9..a10d6ce05f1b9 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js @@ -7,14 +7,14 @@ import seriesConfig from '../../__mocks__/mock_series_config_filebeat.json'; -import { shallow } from 'enzyme'; import React from 'react'; +import { render } from '@testing-library/react'; import { ExplorerChartLabelBadge } from './explorer_chart_label_badge'; describe('ExplorerChartLabelBadge', () => { - test('Render entity label badge.', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + test('renders entity label badge', () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/__snapshots__/filter_list_usage_popover.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/__snapshots__/filter_list_usage_popover.test.js.snap index c34b4a218b038..a0009c4ff1958 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/__snapshots__/filter_list_usage_popover.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/__snapshots__/filter_list_usage_popover.test.js.snap @@ -1,123 +1,49 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FilterListUsagePopover opens the popover onButtonClick 1`] = ` -
- - 3 detectors - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} - id="detector_filter_list_usage" - isOpen={true} - ownFocus={true} - panelClassName="ml-filter-list-usage-popover" - panelPaddingSize="m" - repositionToCrossAxis={true} - > -
    -
  • - mean responsetime -
    • -
  • - max responsetime -
    • -
  • - count -
    • -
- -
-`; - exports[`FilterListUsagePopover renders the popover for 1 job 1`] = `
- - 1 job - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
    -
  • - farequote -
    • -
- + +
`; exports[`FilterListUsagePopover renders the popover for 2 detectors 1`] = `
- - 3 detectors - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
    -
  • - mean responsetime -
    • -
  • - max responsetime -
    • -
  • - count -
    • -
- + +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/filter_list_usage_popover.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/filter_list_usage_popover.test.js index a0809278b81d9..ab0197b663a49 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/filter_list_usage_popover.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/filter_list_usage_popover/filter_list_usage_popover.test.js @@ -5,22 +5,12 @@ * 2.0. */ -import { shallow } from 'enzyme'; import React from 'react'; +import { render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { FilterListUsagePopover } from './filter_list_usage_popover'; -function prepareDetectorsTest() { - const props = { - entityType: 'detector', - entityValues: ['mean responsetime', 'max responsetime', 'count'], - }; - - const wrapper = shallow(); - - return { wrapper }; -} - describe('FilterListUsagePopover', () => { test('renders the popover for 1 job', () => { const props = { @@ -28,21 +18,37 @@ describe('FilterListUsagePopover', () => { entityValues: ['farequote'], }; - const component = shallow(); - - expect(component).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders the popover for 2 detectors', () => { - const test = prepareDetectorsTest(); - expect(test.wrapper).toMatchSnapshot(); + const detectorProps = { + entityType: 'detector', + entityValues: ['mean responsetime', 'max responsetime', 'count'], + }; + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); - test('opens the popover onButtonClick', () => { - const test = prepareDetectorsTest(); - const instance = test.wrapper.instance(); - instance.onButtonClick(); - test.wrapper.update(); - expect(test.wrapper).toMatchSnapshot(); + test('opens the popover on button click', async () => { + const detectorProps = { + entityType: 'detector', + entityValues: ['mean responsetime', 'max responsetime', 'count'], + }; + const { getByRole, queryByText, getByText } = render( + + ); + + // Popover should be closed initially + expect(queryByText('mean responsetime')).not.toBeInTheDocument(); + + const user = userEvent.setup(); + await user.click(getByRole('button')); + + // Verify popover content is visible without using snapshots + expect(getByText('mean responsetime')).toBeInTheDocument(); + expect(getByText('max responsetime')).toBeInTheDocument(); + expect(getByText('count')).toBeInTheDocument(); }); });