From 426d8cb98b6f20236438cfe335b45a93ba2ddb66 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 22 Jul 2024 15:57:56 -0700 Subject: [PATCH] [tech debt] Convert Enzyme tests to RTL --- .../super_date_picker.test.tsx | 123 +++++++----------- 1 file changed, 45 insertions(+), 78 deletions(-) diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx index 03f6f151647f..f6d9e552a087 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.test.tsx @@ -7,7 +7,6 @@ */ import React from 'react'; -import { mount, ReactWrapper } from 'enzyme'; import { fireEvent } from '@testing-library/react'; import { render } from '../../../test/rtl'; import { requiredProps } from '../../../test'; @@ -16,21 +15,10 @@ import { shouldRenderCustomStyles } from '../../../test/internal'; import { EuiSuperDatePicker, EuiSuperDatePickerProps, - EuiSuperDatePickerInternal, } from './super_date_picker'; -import { EuiButton } from '../../button'; const noop = () => {}; -// Test utils to handle diving into EuiSuperDatePickerInternal -const findInternalInstance = ( - wrapper: ReactWrapper -): [EuiSuperDatePickerInternal, ReactWrapper] => { - const component = wrapper.find('EuiSuperDatePickerInternal'); - const instance = component.instance() as EuiSuperDatePickerInternal; - return [instance, component]; -}; - describe('EuiSuperDatePicker', () => { // RTL doesn't automatically clean up portals/datepicker popovers between tests afterEach(() => { @@ -62,46 +50,26 @@ describe('EuiSuperDatePicker', () => { }); test('refresh is disabled by default', () => { - // By default we expect `asyncInterval` to be not set. - const component = mount(); - const [instancePaused, componentPaused] = findInternalInstance(component); + const { container } = render(); - expect(instancePaused.asyncInterval).toBe(undefined); - expect(componentPaused.prop('isPaused')).toBe(true); + expect( + container.querySelector('.euiAutoRefreshButton') + ).not.toBeInTheDocument(); }); test('updates refresh interval on isPaused prop update', () => { - // If refresh is enabled via `isPaused/onRefresh` we expect - // `asyncInterval` to be present and `asyncInterval.isStopped` to be `false`. const onRefresh = jest.fn(); - const component = mount( + const { container } = render( ); - const [instanceRefresh, componentRefresh] = findInternalInstance(component); - - expect(typeof instanceRefresh.asyncInterval).toBe('object'); - expect(instanceRefresh.asyncInterval!.isStopped).toBe(false); - expect(componentRefresh.prop('isPaused')).toBe(false); - - // If we update the prop `isPaused` we expect the interval to be stopped too. - component.setProps({ isPaused: true }); - const [instanceUpdatedPaused, componentUpdatedPaused] = - findInternalInstance(component); - expect(typeof instanceUpdatedPaused.asyncInterval).toBe('object'); - expect(instanceUpdatedPaused.asyncInterval!.isStopped).toBe(true); - expect(componentUpdatedPaused.prop('isPaused')).toBe(true); - - // Let's start refresh again for a final sanity check. - component.setProps({ isPaused: false }); - const [instanceUpdatedRefresh, componentUpdatedRefresh] = - findInternalInstance(component); - expect(typeof instanceUpdatedRefresh.asyncInterval).toBe('object'); - expect(instanceUpdatedRefresh.asyncInterval!.isStopped).toBe(false); - expect(componentUpdatedRefresh.prop('isPaused')).toBe(false); + const refreshButton = container.querySelector('.euiAutoRefreshButton'); + + expect(refreshButton).toBeInTheDocument(); + expect(refreshButton).toHaveTextContent('1 s'); }); test('Listen for consecutive super date picker refreshes', async () => { @@ -109,7 +77,7 @@ describe('EuiSuperDatePicker', () => { const onRefresh = jest.fn(); - const component = mount( + render( { refreshInterval={10} /> ); - const [instanceRefresh] = findInternalInstance(component); - expect(typeof instanceRefresh.asyncInterval).toBe('object'); - - jest.advanceTimersByTime(10); - await instanceRefresh.asyncInterval!.__pendingFn; jest.advanceTimersByTime(10); - await instanceRefresh.asyncInterval!.__pendingFn; + await jest.runAllTicks(); + expect(onRefresh).toHaveBeenCalledTimes(1); - expect(onRefresh).toBeCalledTimes(2); + jest.advanceTimersByTime(10); + await jest.runAllTicks(); + expect(onRefresh).toHaveBeenCalledTimes(2); jest.useRealTimers(); }); @@ -136,24 +102,31 @@ describe('EuiSuperDatePicker', () => { const onRefresh = jest.fn(); - const component = mount( + const { rerender } = render( ); - const [instanceRefresh] = findInternalInstance(component); jest.advanceTimersByTime(10); - expect(typeof instanceRefresh.asyncInterval).toBe('object'); - await instanceRefresh.asyncInterval!.__pendingFn; - component.setProps({ isPaused: true, refreshInterval: 0 }); - jest.advanceTimersByTime(10); - await instanceRefresh.asyncInterval!.__pendingFn; + await jest.runAllTicks(); + expect(onRefresh).toHaveBeenCalledTimes(1); - expect(onRefresh).toBeCalledTimes(1); + rerender( + + ); + + jest.advanceTimersByTime(10); + await jest.runAllTicks(); + expect(onRefresh).toHaveBeenCalledTimes(1); jest.useRealTimers(); }); @@ -165,20 +138,20 @@ describe('EuiSuperDatePicker', () => { color: 'danger', }; - const component = mount( + const { container } = render( ); - expect(component.find(EuiButton).last().props()).toMatchObject( - updateButtonProps - ); + const updateButton = container.querySelector('.euiSuperUpdateButton')!; + expect(updateButton.className).not.toContain('fill'); + expect(updateButton.className).toContain('danger'); }); it('invokes onFocus callbacks on the date popover buttons', () => { const focusMock = jest.fn(); - const component = mount( + const { getByTestSubject } = render( { /> ); - component - .find('button[data-test-subj="superDatePickerShowDatesButton"]') - .simulate('focus'); - expect(focusMock).toBeCalledTimes(1); + fireEvent.focus(getByTestSubject('superDatePickerShowDatesButton')); + expect(focusMock).toHaveBeenCalledTimes(1); - component - .find('button[data-test-subj="superDatePickerShowDatesButton"]') - .simulate('click'); + fireEvent.click(getByTestSubject('superDatePickerShowDatesButton')); - component - .find('button[data-test-subj="superDatePickerstartDatePopoverButton"]') - .simulate('focus'); - expect(focusMock).toBeCalledTimes(2); + fireEvent.focus( + getByTestSubject('superDatePickerstartDatePopoverButton') + ); + expect(focusMock).toHaveBeenCalledTimes(2); - component - .find('button[data-test-subj="superDatePickerstartDatePopoverButton"]') - .simulate('focus'); - expect(focusMock).toBeCalledTimes(3); + fireEvent.focus(getByTestSubject('superDatePickerendDatePopoverButton')); + expect(focusMock).toHaveBeenCalledTimes(3); }); describe('showUpdateButton', () => {