From b73e68ba881cc720c06660e880ae002c474e162f Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Mon, 10 Aug 2020 11:15:51 +0200 Subject: [PATCH 1/3] Increase tooltip timeout from 250ms to 300ms for tests. --- .../components/field_title_bar/field_title_bar.test.js | 5 +++-- .../components/field_type_icon/field_type_icon.test.js | 5 +++-- .../public/cases/components/configure_cases/button.test.tsx | 5 +++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js b/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js index 1b33d68042295..10dcc5eeabb89 100644 --- a/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js +++ b/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js @@ -70,7 +70,8 @@ describe('FieldTitleBar', () => { expect(wrapper.find('EuiToolTip').children()).toHaveLength(1); container.simulate('mouseover'); - // EuiToolTip mounts children after a 250ms delay + // EuiToolTip mounts children after a 250ms delay, + // thus using a 300ms delay to avoid flakyness. setTimeout(() => { wrapper.update(); expect(wrapper.find('EuiToolTip').children()).toHaveLength(2); @@ -78,6 +79,6 @@ describe('FieldTitleBar', () => { wrapper.update(); expect(wrapper.find('EuiToolTip').children()).toHaveLength(1); done(); - }, 250); + }, 300); }); }); diff --git a/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js b/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js index 7e37dc10ade33..a4bdf1586fb88 100644 --- a/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js +++ b/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js @@ -35,8 +35,9 @@ 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); + // EuiToolTip mounts children after a 250ms delay, + // thus using a 300ms delay to avoid flakyness. + setTimeout(() => expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(2), 300); container.simulate('mouseout'); expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(1); diff --git a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx index 6fb693e47560d..f65376cc5fe65 100644 --- a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx +++ b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx @@ -96,11 +96,12 @@ describe('Configuration button', () => { ); newWrapper.find('[data-test-subj="configure-case-button"]').first().simulate('mouseOver'); - // EuiToolTip mounts children after a 250ms delay + // EuiToolTip mounts children after a 250ms delay, + // thus using a 300ms delay to avoid flakyness. setTimeout( () => expect(newWrapper.find('.euiToolTipPopover').text()).toBe(`${titleTooltip}${msgTooltip}`), - 250 + 300 ); }); }); From f69613bea8c551d504ae30eca9fbf2762b9862f9 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Mon, 10 Aug 2020 13:03:12 +0200 Subject: [PATCH 2/3] Refactor to use jest.useFakeTimers() --- .../field_title_bar/field_title_bar.test.js | 32 ++++++++++++------- .../field_type_icon/field_type_icon.test.js | 20 ++++++++++-- .../configure_cases/button.test.tsx | 19 +++++++---- 3 files changed, 50 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js b/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js index 10dcc5eeabb89..682161e9c4fa0 100644 --- a/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js +++ b/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js @@ -62,7 +62,10 @@ 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(); const container = wrapper.find({ className: 'field-name' }); @@ -70,15 +73,22 @@ describe('FieldTitleBar', () => { expect(wrapper.find('EuiToolTip').children()).toHaveLength(1); container.simulate('mouseover'); - // EuiToolTip mounts children after a 250ms delay, - // thus using a 300ms delay to avoid flakyness. - setTimeout(() => { - wrapper.update(); - expect(wrapper.find('EuiToolTip').children()).toHaveLength(2); - container.simulate('mouseout'); - wrapper.update(); - expect(wrapper.find('EuiToolTip').children()).toHaveLength(1); - done(); - }, 300); + + // 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 visible + jest.runAllTimers(); + + wrapper.update(); + expect(wrapper.find('EuiToolTip').children()).toHaveLength(1); + + // Clearing all mocks will also reset fake timers. + jest.clearAllMocks(); }); }); diff --git a/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js b/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js index a4bdf1586fb88..c5062bb33051c 100644 --- a/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js +++ b/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( ); @@ -35,12 +38,23 @@ describe('FieldTypeIcon', () => { expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(1); container.simulate('mouseover'); - // EuiToolTip mounts children after a 250ms delay, - // thus using a 300ms delay to avoid flakyness. - setTimeout(() => expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(2), 300); + + // 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 visible + jest.runAllTimers(); + + typeIconComponent.update(); expect(typeIconComponent.find('EuiToolTip').children()).toHaveLength(1); + + // Clearing all mocks will also reset fake timers. + jest.clearAllMocks(); }); test(`update component`, () => { diff --git a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx b/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx index f65376cc5fe65..56daa9a8364f6 100644 --- a/x-pack/plugins/security_solution/public/cases/components/configure_cases/button.test.tsx +++ b/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,12 +99,14 @@ describe('Configuration button', () => { ); newWrapper.find('[data-test-subj="configure-case-button"]').first().simulate('mouseOver'); - // EuiToolTip mounts children after a 250ms delay, - // thus using a 300ms delay to avoid flakyness. - setTimeout( - () => - expect(newWrapper.find('.euiToolTipPopover').text()).toBe(`${titleTooltip}${msgTooltip}`), - 300 - ); + + // 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(); }); }); From 779593ef6c406b08cd25d406abf833bcee61c6ea Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Mon, 10 Aug 2020 13:10:33 +0200 Subject: [PATCH 3/3] Fix comment text. --- .../components/field_title_bar/field_title_bar.test.js | 2 +- .../components/field_type_icon/field_type_icon.test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js b/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js index 682161e9c4fa0..329863fdc9986 100644 --- a/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js +++ b/x-pack/plugins/ml/public/application/components/field_title_bar/field_title_bar.test.js @@ -82,7 +82,7 @@ describe('FieldTitleBar', () => { container.simulate('mouseout'); - // Run the timers so the EuiTooltip will be visible + // Run the timers so the EuiTooltip will be hidden again jest.runAllTimers(); wrapper.update(); diff --git a/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js b/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js index c5062bb33051c..d4200c2f8366b 100644 --- a/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js +++ b/x-pack/plugins/ml/public/application/components/field_type_icon/field_type_icon.test.js @@ -47,7 +47,7 @@ describe('FieldTypeIcon', () => { container.simulate('mouseout'); - // Run the timers so the EuiTooltip will be visible + // Run the timers so the EuiTooltip will be hidden again jest.runAllTimers(); typeIconComponent.update();