From ac25913f53448c43f5405313949ab98af2f63a4f Mon Sep 17 00:00:00 2001 From: Hamas Shafiq Date: Tue, 17 Jan 2023 12:35:36 +0000 Subject: [PATCH] Chore: Convert `TimelineViewingLayer.test.tsx` to RTL (#61056) --- .betterer.results | 3 - .../TimelineViewingLayer.test.tsx | 235 ++++-------------- 2 files changed, 42 insertions(+), 196 deletions(-) diff --git a/.betterer.results b/.betterer.results index 43be61f43d5..2a58c91dbb0 100644 --- a/.betterer.results +++ b/.betterer.results @@ -11,9 +11,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/TimelineViewingLayer.test.tsx:3450948735": [ - [15, 31, 13, "RegExp match", "2409514259"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.tsx:3891071965": [ [13, 42, 13, "RegExp match", "2409514259"] ] diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.tsx index f90c2c1fd52..654ac191b18 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.tsx @@ -12,34 +12,18 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { cx } from '@emotion/css'; -import { mount, ReactWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import React from 'react'; -import DraggableManager, { DraggingUpdate } from 'src/utils/DraggableManager'; import { ViewRangeTime } from '../types'; -import TimelineViewingLayer, { getStyles, TimelineViewingLayerProps } from './TimelineViewingLayer'; - -function mapFromSubRange(viewStart: number, viewEnd: number, value: number) { - return viewStart + value * (viewEnd - viewStart); -} - -// Remove the prefix generated by cx (css-), i.e. change the string from something like: -// 'css-7g92us-TimelineViewingLayerDragged-Timeline...' -// to: -// 'TimelineViewingLayerDragged-Timeline...' -function removeCxPrefix(cxString: string) { - return cxString.split('-').slice(2).join('-'); -} +import TimelineViewingLayer, { TimelineViewingLayerProps } from './TimelineViewingLayer'; describe('', () => { - let wrapper: ReactWrapper; - let instance: TimelineViewingLayer; - const viewStart = 0.25; const viewEnd = 0.9; - const props = { + + let props: TimelineViewingLayerProps = { boundsInvalidator: Math.random(), updateNextViewRangeTime: jest.fn(), updateViewRangeTime: jest.fn(), @@ -48,184 +32,49 @@ describe('', () => { }, }; - beforeEach(() => { - props.updateNextViewRangeTime.mockReset(); - props.updateViewRangeTime.mockReset(); - wrapper = mount(); - instance = wrapper.instance(); - }); - it('renders without exploding', () => { - expect(wrapper).toBeDefined(); - expect(wrapper.find('[data-testid="TimelineViewingLayer"]').length).toBe(1); - }); - - it('sets _root to the root DOM node', () => { - expect(instance._root).toBeDefined(); - expect(wrapper.find('[data-testid="TimelineViewingLayer"]').getDOMNode()).toBe(instance._root); - }); - - describe('uses DraggableManager', () => { - it('initializes the DraggableManager', () => { - const dm = instance._draggerReframe; - expect(dm).toBeDefined(); - expect(dm._onMouseMove).toBe(instance._handleReframeMouseMove); - expect(dm._onMouseLeave).toBe(instance._handleReframeMouseLeave); - expect(dm._onDragStart).toBe(instance._handleReframeDragUpdate); - expect(dm._onDragMove).toBe(instance._handleReframeDragUpdate); - expect(dm._onDragEnd).toBe(instance._handleReframeDragEnd); - }); - - it('provides the DraggableManager handlers as callbacks', () => { - const { handleMouseDown, handleMouseLeave, handleMouseMove } = instance._draggerReframe; - const rootWrapper = wrapper.find('[data-testid="TimelineViewingLayer"]'); - expect(rootWrapper.prop('onMouseDown')).toBe(handleMouseDown); - expect(rootWrapper.prop('onMouseLeave')).toBe(handleMouseLeave); - expect(rootWrapper.prop('onMouseMove')).toBe(handleMouseMove); - }); - - it('returns the dragging bounds from _getDraggingBounds()', () => { - const left = 10; - const width = 100; - instance._root!.getBoundingClientRect = () => ({ left, width } as DOMRect); - expect(instance._getDraggingBounds()).toEqual({ width, clientXLeft: left }); - }); - - it('updates viewRange.time.cursor via _draggerReframe._onMouseMove', () => { - const value = 0.5; - const cursor = mapFromSubRange(viewStart, viewEnd, value); - instance._draggerReframe._onMouseMove!({ value } as DraggingUpdate); - expect(props.updateNextViewRangeTime.mock.calls).toEqual([[{ cursor }]]); - }); - - it('resets viewRange.time.cursor via _draggerReframe._onMouseLeave', () => { - instance._draggerReframe._onMouseLeave!(null as unknown as DraggingUpdate); - expect(props.updateNextViewRangeTime.mock.calls).toEqual([[{ cursor: undefined }]]); - }); - - it('handles drag start via _draggerReframe._onDragStart', () => { - const value = 0.5; - const shift = mapFromSubRange(viewStart, viewEnd, value); - const update = { reframe: { shift, anchor: shift } }; - instance._draggerReframe._onDragStart!({ value } as DraggingUpdate); - expect(props.updateNextViewRangeTime.mock.calls).toEqual([[update]]); - }); - - it('handles drag move via _draggerReframe._onDragMove', () => { - const anchor = 0.25; - const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } } as ViewRangeTime; - const value = 0.5; - const shift = mapFromSubRange(viewStart, viewEnd, value); - // make sure `anchor` is already present on the props - wrapper.setProps({ viewRangeTime }); - expect(wrapper.prop('viewRangeTime').reframe?.anchor).toBe(anchor); - // the next update should integrate `value` and use the existing anchor - instance._draggerReframe._onDragStart!({ value } as DraggingUpdate); - const update = { reframe: { anchor, shift } }; - expect(props.updateNextViewRangeTime.mock.calls).toEqual([[update]]); - }); - - it('handles drag end via _draggerReframe._onDragEnd', () => { - const manager = { resetBounds: jest.fn() } as unknown as DraggableManager; - const value = 0.5; - const shift = mapFromSubRange(viewStart, viewEnd, value); - const anchor = 0.25; - const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } } as ViewRangeTime; - wrapper.setProps({ viewRangeTime }); - instance._draggerReframe._onDragEnd!({ manager, value } as DraggingUpdate); - expect(jest.mocked(manager.resetBounds).mock.calls).toEqual([[]]); - expect(props.updateViewRangeTime.mock.calls).toEqual([[anchor, shift, 'timeline-header']]); - }); + render(); + expect(screen.getByTestId('TimelineViewingLayer')).toBeTruthy(); }); describe('render()', () => { it('renders nothing without a nextViewRangeTime', () => { - expect(wrapper.find('div').length).toBe(1); - }); - - it('renders the cursor when it is the only non-current value set', () => { - const cursor = viewStart + 0.5 * (viewEnd - viewStart); - const baseViewRangeTime = { ...props.viewRangeTime, cursor }; - wrapper.setProps({ viewRangeTime: baseViewRangeTime }); - // cursor is rendered when solo - expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(1); - // cursor is skipped when shiftStart, shiftEnd, or reframe are present - let viewRangeTime: ViewRangeTime = { - ...baseViewRangeTime, - shiftStart: cursor, - shiftEnd: cursor, - reframe: { anchor: cursor, shift: cursor }, - }; - wrapper.setProps({ viewRangeTime }); - expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0); - viewRangeTime = { ...baseViewRangeTime, shiftEnd: cursor }; - wrapper.setProps({ viewRangeTime }); - expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0); - viewRangeTime = { ...baseViewRangeTime, reframe: { anchor: cursor, shift: cursor } }; - wrapper.setProps({ viewRangeTime }); - expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0); - }); - - it('renders the reframe dragging', () => { - const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor: viewStart, shift: viewEnd } }; - wrapper.setProps({ viewRangeTime }); - const styles = getStyles(); - expect( - wrapper - .find('[data-testid="Dragged"]') - .prop('className')! - .indexOf( - removeCxPrefix( - cx( - styles.TimelineViewingLayerDragged, - styles.TimelineViewingLayerDraggedDraggingLeft, - styles.TimelineViewingLayerDraggedDraggingRight, - styles.TimelineViewingLayerDraggedReframeDrag - ) - ) - ) >= 0 - ).toBe(true); - }); - - it('renders the shiftStart dragging', () => { - const viewRangeTime = { ...props.viewRangeTime, shiftStart: viewEnd }; - wrapper.setProps({ viewRangeTime }); - const styles = getStyles(); - expect( - wrapper - .find('[data-testid="Dragged"]') - .prop('className')! - .indexOf( - removeCxPrefix( - cx( - styles.TimelineViewingLayerDragged, - styles.TimelineViewingLayerDraggedDraggingLeft, - styles.TimelineViewingLayerDraggedDraggingRight, - styles.TimelineViewingLayerDraggedShiftDrag - ) - ) - ) >= 0 - ).toBe(true); - }); - - it('renders the shiftEnd dragging', () => { - const viewRangeTime = { ...props.viewRangeTime, shiftEnd: viewStart }; - wrapper.setProps({ viewRangeTime }); - const styles = getStyles(); - expect( - wrapper - .find('[data-testid="Dragged"]') - .prop('className')! - .indexOf( - removeCxPrefix( - cx( - styles.TimelineViewingLayerDragged, - styles.TimelineViewingLayerDraggedDraggingLeft, - styles.TimelineViewingLayerDraggedShiftDrag - ) - ) - ) >= 0 - ).toBe(true); + render(); + expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).not.toBeInTheDocument(); }); }); + + it('renders the cursor when it is the only non-current value set', () => { + const cursor = viewStart + 0.5 * (viewEnd - viewStart); + const baseViewRangeTime = { ...props.viewRangeTime, cursor }; + props = { ...props, viewRangeTime: baseViewRangeTime }; + render(); + expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).toBeInTheDocument(); + }); + + it('does not render the cursor when shiftStart, shiftEnd, or reframe are present', () => { + const cursor = viewStart + 0.5 * (viewEnd - viewStart); + const baseViewRangeTime = { ...props.viewRangeTime, cursor }; + + let viewRangeTime: ViewRangeTime = { + ...baseViewRangeTime, + shiftStart: cursor, + shiftEnd: cursor, + reframe: { anchor: cursor, shift: cursor }, + }; + + props = { ...props, viewRangeTime }; + render(); + expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).not.toBeInTheDocument(); + + viewRangeTime = { ...baseViewRangeTime, shiftEnd: cursor }; + props = { ...props, viewRangeTime }; + render(); + expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).not.toBeInTheDocument(); + + viewRangeTime = { ...baseViewRangeTime, reframe: { anchor: cursor, shift: cursor } }; + props = { ...props, viewRangeTime }; + render(); + expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).not.toBeInTheDocument(); + }); });