[Remote clusters] Fixed skipped test for search bar (#97472) (#99323)

* Fixed skipped search test

* Fixed eslint error

* Added setSearchBarValue helper to testbed and unskipped search tests in CCR

* Fixed eslint errors and added a comment to the setSearchBarValue method

* Added a mock for EuiSearchBox

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/auto_follow_pattern_list.test.js

@@ -63,7 +63,6 @@ describe('<AutoFollowPatternList />', () => {
   });
 
   describe('when there are multiple pages of auto-follow patterns', () => {
-    let find;
     let component;
     let table;
     let actions;
@@ -83,7 +82,7 @@ describe('<AutoFollowPatternList />', () => {
       httpRequestsMockHelpers.setLoadAutoFollowPatternsResponse({ patterns: autoFollowPatterns });
 
       // Mount the component
-      ({ find, component, table, actions, form } = setup());
+      ({ component, table, actions, form } = setup());
 
       await nextTick(); // Make sure that the http request is fulfilled
       component.update();
@@ -98,9 +97,8 @@ describe('<AutoFollowPatternList />', () => {
       expect(tableCellsValues.length).toBe(10);
     });
 
-    // Skipped until we can figure out how to get this test to work.
-    test.skip('search works', () => {
-      form.setInputValue(find('autoFollowPatternSearch'), 'unique');
+    test('search works', () => {
+      form.setInputValue('autoFollowPatternSearch', 'unique');
       const { tableCellsValues } = table.getMetaData('autoFollowPatternListTable');
       expect(tableCellsValues.length).toBe(1);
     });

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/follower_indices_list.test.js

@@ -69,7 +69,6 @@ describe('<FollowerIndicesList />', () => {
   });
 
   describe('when there are multiple pages of follower indices', () => {
-    let find;
     let component;
     let table;
     let actions;
@@ -93,7 +92,7 @@ describe('<FollowerIndicesList />', () => {
       httpRequestsMockHelpers.setLoadFollowerIndicesResponse({ indices: followerIndices });
 
       // Mount the component
-      ({ find, component, table, actions, form } = setup());
+      ({ component, table, actions, form } = setup());
 
       await nextTick(); // Make sure that the http request is fulfilled
       component.update();
@@ -108,9 +107,8 @@ describe('<FollowerIndicesList />', () => {
       expect(tableCellsValues.length).toBe(10);
     });
 
-    // Skipped until we can figure out how to get this test to work.
-    test.skip('search works', () => {
-      form.setInputValue(find('followerIndexSearch'), 'unique');
+    test('search works', () => {
+      form.setInputValue('followerIndexSearch', 'unique');
       const { tableCellsValues } = table.getMetaData('followerIndexListTable');
       expect(tableCellsValues.length).toBe(1);
     });

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/index.ts

@@ -7,3 +7,4 @@
 
 import './breadcrumbs.mock';
 import './track_ui_metric.mock';
+import './search_box.mock';

x-pack/plugins/cross_cluster_replication/public/__jest__/client_integration/mocks/search_box.mock.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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 React from 'react';
+import { EuiSearchBoxProps } from '@elastic/eui/src/components/search_bar/search_box';
+
+jest.mock('@elastic/eui/lib/components/search_bar/search_box', () => {
+  return {
+    EuiSearchBox: (props: EuiSearchBoxProps) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockSearchBox'}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          props.onSearch(event.target.value);
+        }}
+      />
+    ),
+  };
+});

x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js

@@ -55,11 +55,12 @@ const getFilteredPatterns = (autoFollowPatterns, queryText) => {
     const normalizedSearchText = queryText.toLowerCase();
 
     return autoFollowPatterns.filter((autoFollowPattern) => {
+      // default values to avoid undefined errors
       const {
-        name,
-        remoteCluster,
-        followIndexPatternPrefix,
-        followIndexPatternSuffix,
+        name = '',
+        remoteCluster = '',
+        followIndexPatternPrefix = '',
+        followIndexPatternSuffix = '',
       } = autoFollowPattern;
 
       const inName = name.toLowerCase().includes(normalizedSearchText);

x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/follower_indices_table/follower_indices_table.js

@@ -54,7 +54,8 @@ const getFilteredIndices = (followerIndices, queryText) => {
     const normalizedSearchText = queryText.toLowerCase();
 
     return followerIndices.filter((followerIndex) => {
-      const { name, remoteCluster, leaderIndex } = followerIndex;
+      // default values to avoid undefined errors
+      const { name = '', remoteCluster = '', leaderIndex = '' } = followerIndex;
 
       if (name.toLowerCase().includes(normalizedSearchText)) {
         return true;

x-pack/plugins/remote_clusters/__jest__/client_integration/list/remote_clusters_list.test.js

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { getRouter } from '../../../public/application/services';
@@ -16,6 +17,19 @@ import { setupEnvironment, getRandomString, findTestSubject } from '../helpers';
 
 import { setup } from './remote_clusters_list.helpers';
 
+jest.mock('@elastic/eui/lib/components/search_bar/search_box', () => {
+  return {
+    EuiSearchBox: (props) => (
+      <input
+        data-test-subj={props['data-test-subj'] || 'mockSearchBox'}
+        onChange={(event) => {
+          props.onSearch(event.target.value);
+        }}
+      />
+    ),
+  };
+});
+
 describe('<RemoteClusterList />', () => {
   const { server, httpRequestsMockHelpers } = setupEnvironment();
 
@@ -64,7 +78,6 @@ describe('<RemoteClusterList />', () => {
   });
 
   describe('when there are multiple pages of remote clusters', () => {
-    let find;
     let table;
     let actions;
     let component;
@@ -88,7 +101,7 @@ describe('<RemoteClusterList />', () => {
       httpRequestsMockHelpers.setLoadRemoteClustersResponse(remoteClusters);
 
       await act(async () => {
-        ({ find, table, actions, form, component } = setup());
+        ({ table, actions, component, form } = setup());
       });
 
       component.update();
@@ -103,9 +116,8 @@ describe('<RemoteClusterList />', () => {
       expect(tableCellsValues.length).toBe(10);
     });
 
-    // Skipped until we can figure out how to get this test to work.
-    test.skip('search works', () => {
-      form.setInputValue(find('remoteClusterSearch'), 'unique');
+    test('search works', () => {
+      form.setInputValue('remoteClusterSearch', 'unique');
       const { tableCellsValues } = table.getMetaData('remoteClusterListTable');
       expect(tableCellsValues.length).toBe(1);
     });