Use jest.useFakeTimers instead of hard coded timeout for tooltip tests. (#74642) (#74926)

Refactor to use jest.useFakeTimers().

Author: walterra

x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js

@@ -62,22 +62,33 @@ describe('FieldTitleBar', () => {
     expect(hasClassName).toBeTruthy();
   });
 
-  test(`tooltip hovering`, (done) => {
+  test(`tooltip hovering`, () => {
+    // Use fake timers so we don't have to wait for the EuiToolTip timeout
+    jest.useFakeTimers();
+
     const props = { card: { fieldName: 'foo', type: 'bar' } };
     const wrapper = mountWithIntl(<FieldTitleBar {...props} />);
     const container = wrapper.find({ className: 'field-name' });
 
     expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);
 
     container.simulate('mouseover');
-    // EuiToolTip mounts children after a 250ms delay
-    setTimeout(() => {
-      wrapper.update();
-      expect(wrapper.find('EuiToolTip').children()).toHaveLength(2);
-      container.simulate('mouseout');
-      wrapper.update();
-      expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);
-      done();
-    }, 250);
+
+    // Run the timers so the EuiTooltip will be visible
+    jest.runAllTimers();
+
+    wrapper.update();
+    expect(wrapper.find('EuiToolTip').children()).toHaveLength(2);
+
+    container.simulate('mouseout');
+
+    // Run the timers so the EuiTooltip will be hidden again
+    jest.runAllTimers();
+
+    wrapper.update();
+    expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);
+
+    // Clearing all mocks will also reset fake timers.
+    jest.clearAllMocks();
   });
 });

x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js

@@ -27,6 +27,9 @@ describe('FieldTypeIcon', () => {
   });
 
   test(`render with tooltip and test hovering`, () => {
+    // Use fake timers so we don't have to wait for the EuiToolTip timeout
+    jest.useFakeTimers();
+
     const typeIconComponent = mount(
       <FieldTypeIcon type={ML_JOB_FIELD_TYPES.KEYWORD} tooltipEnabled={true} />
     );
@@ -35,11 +38,23 @@ describe('FieldTypeIcon', () => {
     expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(1);
 
     container.simulate('mouseover');
-    // EuiToolTip mounts children after a 250ms delay
-    setTimeout(() => expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(2), 250);
+
+    // Run the timers so the EuiTooltip will be visible
+    jest.runAllTimers();
+
+    typeIconComponent.update();
+    expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(2);
 
     container.simulate('mouseout');
+
+    // Run the timers so the EuiTooltip will be hidden again
+    jest.runAllTimers();
+
+    typeIconComponent.update();
     expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(1);
+
+    // Clearing all mocks will also reset fake timers.
+    jest.clearAllMocks();
   });
 
   test(`update component`, () => {

x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx

@@ -80,6 +80,9 @@ describe('Configuration button', () => {
   });
 
   test('it shows the tooltip when hovering the button', () => {
+    // Use fake timers so we don't have to wait for the EuiToolTip timeout
+    jest.useFakeTimers();
+
     const msgTooltip = 'My message tooltip';
     const titleTooltip = 'My title';
 
@@ -96,11 +99,14 @@ describe('Configuration button', () => {
     );
 
     newWrapper.find('[data-test-subj="configure-case-button"]').first().simulate('mouseOver');
-    // EuiToolTip mounts children after a 250ms delay
-    setTimeout(
-      () =>
-        expect(newWrapper.find('.euiToolTipPopover').text()).toBe(`${titleTooltip}${msgTooltip}`),
-      250
-    );
+
+    // Run the timers so the EuiTooltip will be visible
+    jest.runAllTimers();
+
+    newWrapper.update();
+    expect(newWrapper.find('.euiToolTipPopover').text()).toBe(`${titleTooltip}${msgTooltip}`);
+
+    // Clearing all mocks will also reset fake timers.
+    jest.clearAllMocks();
   });
 });