From bc3ce5760b5f820400465c134f3f5a0b7abc9a0d Mon Sep 17 00:00:00 2001 From: Hamas Shafiq Date: Tue, 10 Jan 2023 21:24:51 +0000 Subject: [PATCH] Chore: Convert `TimelineColumnResizer.test.tsx` to RTL (#61156) --- .betterer.results | 3 - .../TimelineColumnResizer.test.tsx | 81 ++++--------------- 2 files changed, 16 insertions(+), 68 deletions(-) diff --git a/.betterer.results b/.betterer.results index 2d243cd67e2..29264a986a6 100644 --- a/.betterer.results +++ b/.betterer.results @@ -14,9 +14,6 @@ exports[`no enzyme tests`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.tsx:3266788928": [ [14, 56, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx:1220382119": [ - [15, 31, 13, "RegExp match", "2409514259"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.tsx:3450948735": [ [15, 31, 13, "RegExp match", "2409514259"] ], diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx index 02b836d2710..e1074cc7dc0 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx @@ -12,94 +12,45 @@ // See the License for the specific language governing permissions and // limitations under the License. +import { fireEvent, render, screen } from '@testing-library/react'; import cx from 'classnames'; -import { mount, ReactWrapper } from 'enzyme'; import React from 'react'; -import DraggableManager, { DraggingUpdate } from 'src/utils/DraggableManager'; import TimelineColumnResizer, { getStyles, TimelineColumnResizerProps } from './TimelineColumnResizer'; -describe('', () => { - let wrapper: ReactWrapper; - let instance: TimelineColumnResizer; +const mockOnChange = jest.fn(); - const props = { +describe('', () => { + const props: TimelineColumnResizerProps = { min: 0.1, max: 0.9, - onChange: jest.fn(), + onChange: mockOnChange, position: 0.5, + columnResizeHandleHeight: 10, }; beforeEach(() => { - props.onChange.mockReset(); - wrapper = mount(); - instance = wrapper.instance(); + mockOnChange.mockReset(); + render(); }); it('renders without exploding', () => { - expect(wrapper).toBeDefined(); - expect(wrapper.find('[data-testid="TimelineColumnResizer"]').length).toBe(1); - expect(wrapper.find('[data-testid="TimelineColumnResizer--gripIcon"]').length).toBe(1); - expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').length).toBe(1); - }); - - it('sets the root elm', () => { - const rootWrapper = wrapper.find('[data-testid="TimelineColumnResizer"]'); - expect(rootWrapper.getDOMNode()).toBe(instance._rootElm); - }); - - describe('uses DraggableManager', () => { - it('handles mouse down on the dragger', () => { - const dragger = wrapper.find({ onMouseDown: instance._dragManager.handleMouseDown }); - expect(dragger.length).toBe(1); - expect(dragger.is('[data-testid="TimelineColumnResizer--dragger"]')).toBe(true); - }); - - it('returns the draggable bounds via _getDraggingBounds()', () => { - const left = 10; - const width = 100; - instance._rootElm!.getBoundingClientRect = () => ({ left, width } as DOMRect); - expect(instance._getDraggingBounds()).toEqual({ - width, - clientXLeft: left, - maxValue: props.max, - minValue: props.min, - }); - }); - - it('handles drag start', () => { - const value = Math.random(); - expect(wrapper.state('dragPosition')).toBe(null); - instance._handleDragUpdate({ value } as DraggingUpdate); - expect(wrapper.state('dragPosition')).toBe(value); - }); - - it('handles drag end', () => { - const manager = { resetBounds: jest.fn() } as unknown as DraggableManager; - const value = Math.random(); - wrapper.setState({ dragPosition: 2 * value }); - instance._handleDragEnd({ manager, value } as DraggingUpdate); - expect(jest.mocked(manager.resetBounds).mock.calls).toEqual([[]]); - expect(wrapper.state('dragPosition')).toBe(null); - expect(props.onChange.mock.calls).toEqual([[value]]); - }); + expect(screen.getByTestId('TimelineColumnResizer')).toBeTruthy(); + expect(screen.getByTestId('TimelineColumnResizer--gripIcon')).toBeTruthy(); + expect(screen.getByTestId('TimelineColumnResizer--dragger')).toBeTruthy(); }); it('does not render a dragging indicator when not dragging', () => { const styles = getStyles(); - expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style')?.right).toBe(undefined); - expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe(styles.dragger); + expect(screen.getByTestId('TimelineColumnResizer--dragger')).toHaveStyle(`right: ${undefined}`); + expect(screen.getByTestId('TimelineColumnResizer--dragger')).toHaveClass(styles.dragger); }); it('renders a dragging indicator when dragging', () => { - instance._dragManager.isDragging = () => true; - instance._handleDragUpdate({ value: props.min } as DraggingUpdate); - instance.forceUpdate(); - wrapper.update(); - expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style')?.right).toBeDefined(); - const styles = getStyles(); - expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe( + fireEvent.mouseDown(screen.getByTestId('TimelineColumnResizer--dragger'), { clientX: 0 }); + fireEvent.mouseMove(screen.getByTestId('TimelineColumnResizer--dragger'), { clientX: -5 }); + expect(screen.getByTestId('TimelineColumnResizer--dragger')).toHaveClass( cx(styles.dragger, styles.draggerDragging, styles.draggerDraggingLeft) ); });