[9.1] [ML] Migrate Enzyme tests to RTL (#225423)

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(<CustomUrlList {...props} />);
+  return render(
+    <IntlProvider>
+      <CustomUrlList {...props} />
+    </IntlProvider>
+  );
 }
 
 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();
   });
 });

x-pack/platform/plugins/shared/ml/public/application/components/custom_urls/custom_url_editor/list.tsx

@@ -211,8 +211,8 @@ export const CustomUrlList: FC<CustomUrlListProps> = ({
       : [];
 
     return (
-      <>
-        <EuiFlexGroup key={`url_${index}`} data-test-subj={`mlJobEditCustomUrlItem_${index}`}>
+      <React.Fragment key={`url_${index}`}>
+        <EuiFlexGroup data-test-subj={`mlJobEditCustomUrlItem_${index}`}>
           <EuiFlexItem grow={false}>
             <EuiFormRow
               label={
@@ -341,7 +341,7 @@ export const CustomUrlList: FC<CustomUrlListProps> = ({
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-      </>
+      </React.Fragment>
     );
   });
 

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(<TimeRangeBar timerange={timeRange} />);
-    const ganttBar = wrapper.find('div[data-test-subj="mlJobSelectorGanttBar"]');
+    const { getByTestId } = render(<TimeRangeBar timerange={timeRange} />);
+    const ganttBar = getByTestId('mlJobSelectorGanttBar');
 
-    expect(ganttBar).toHaveLength(1);
+    expect(ganttBar).toBeInTheDocument();
   });
 
   test('Renders running animation bar when isRunning is true', () => {
-    const wrapper = mount(<TimeRangeBar timerange={timeRange} isRunning={true} />);
-    const runningBar = wrapper.find('div[data-test-subj="mlJobSelectorGanttBarRunning"]');
+    const { getByTestId } = render(<TimeRangeBar timerange={timeRange} isRunning={true} />);
+    const runningBar = getByTestId('mlJobSelectorGanttBarRunning');
 
-    expect(runningBar).toHaveLength(1);
+    expect(runningBar).toBeInTheDocument();
   });
 });

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: <CreateAnalyticsButton />', () => {
-  test('Minimal initialization', () => {
-    const wrapper = mount(
-      <CreateAnalyticsButton isDisabled={false} navigateToSourceSelection={jest.fn()} />
+  test('renders button with correct text', () => {
+    render(<CreateAnalyticsButton isDisabled={false} navigateToSourceSelection={jest.fn()} />);
+
+    expect(screen.getByText('Create job')).toBeInTheDocument();
+  });
+
+  test('calls navigateToSourceSelection when clicked', async () => {
+    const navigateToSourceSelection = jest.fn();
+    const user = userEvent.setup();
+
+    render(
+      <CreateAnalyticsButton
+        isDisabled={false}
+        navigateToSourceSelection={navigateToSourceSelection}
+      />
     );
 
-    expect(wrapper.find('EuiButton').text()).toBe('Create job');
+    await user.click(screen.getByText('Create job'));
+    expect(navigateToSourceSelection).toHaveBeenCalledTimes(1);
   });
 });

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(<ExplorerNoInfluencersFound viewBySwimlaneFieldName="field_name" />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <IntlProvider>
+        <ExplorerNoInfluencersFound viewBySwimlaneFieldName="field_name" />
+      </IntlProvider>
+    );
+    expect(container).toMatchSnapshot();
   });
 });

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(<ExplorerNoResultsFound />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(
+      <IntlProvider>
+        <ExplorerNoResultsFound hasResults={false} selectedJobsRunning={false} />
+      </IntlProvider>
+    );
+    expect(container.firstChild).toMatchSnapshot();
   });
 });