mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Convert TimelineViewingLayer.test.tsx to RTL (#61056)
This commit is contained in:
Hamas Shafiq
GitHub
parent
e6dee8a723
commit
ac25913f53
@ -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"]
|
||||
]
|
||||
|
||||
@ -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-<id>), 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('<TimelineViewingLayer>', () => {
|
||||
let wrapper: ReactWrapper<TimelineViewingLayerProps, {}, TimelineViewingLayer>;
|
||||
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('<TimelineViewingLayer>', () => {
|
||||
},
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
props.updateNextViewRangeTime.mockReset();
|
||||
props.updateViewRangeTime.mockReset();
|
||||
wrapper = mount(<TimelineViewingLayer {...(props as unknown as TimelineViewingLayerProps)} />);
|
||||
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(<TimelineViewingLayer {...props} />);
|
||||
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(<TimelineViewingLayer {...props} />);
|
||||
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(<TimelineViewingLayer {...props} />);
|
||||
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(<TimelineViewingLayer {...props} />);
|
||||
expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).not.toBeInTheDocument();
|
||||
|
||||
viewRangeTime = { ...baseViewRangeTime, shiftEnd: cursor };
|
||||
props = { ...props, viewRangeTime };
|
||||
render(<TimelineViewingLayer {...props} />);
|
||||
expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).not.toBeInTheDocument();
|
||||
|
||||
viewRangeTime = { ...baseViewRangeTime, reframe: { anchor: cursor, shift: cursor } };
|
||||
props = { ...props, viewRangeTime };
|
||||
render(<TimelineViewingLayer {...props} />);
|
||||
expect(screen.queryByTestId('TimelineViewingLayer--cursorGuide')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user