Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Additional Test Coverage around TimelineViewingLayer #617

Merged
merged 3 commits into from
Aug 22, 2020
Merged

Additional Test Coverage around TimelineViewingLayer #617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5b687e6
add additional tests around existing TimelineViewingLayer functionality
tklever Aug 13, 2020
0c8c73c
migrate from callback ref to CreateRef in TimelineViewingLayer
tklever Aug 13, 2020
3bc82ef
Merge branch 'master' into TimelineViewingLayer-tests
rubenvp8510 Aug 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 46 additions & 4 deletions ...c/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ describe('<TimelineViewingLayer>', () => {

it('sets _root to the root DOM node', () => {
expect(instance._root).toBeDefined();
expect(wrapper.find('.TimelineViewingLayer').getDOMNode()).toBe(instance._root);
expect(wrapper.find('.TimelineViewingLayer').getDOMNode()).toBe(instance._root.current);
});

describe('uses DraggableManager', () => {
Expand All @@ -75,10 +75,17 @@ describe('<TimelineViewingLayer>', () => {
it('returns the dragging bounds from _getDraggingBounds()', () => {
const left = 10;
const width = 100;
instance._root.getBoundingClientRect = () => ({ left, width });
instance._root.current.getBoundingClientRect = () => ({ left, width });
expect(instance._getDraggingBounds()).toEqual({ width, clientXLeft: left });
});

it('throws error on call to _getDraggingBounds() on unmounted component', () => {
wrapper.unmount();
expect(instance._getDraggingBounds).toThrow(
'Component must be mounted in order to determine DraggableBounds'
);
});

it('updates viewRange.time.cursor via _draggerReframe._onMouseMove', () => {
const value = 0.5;
const cursor = mapFromSubRange(viewStart, viewEnd, value);
Expand All @@ -101,7 +108,7 @@ describe('<TimelineViewingLayer>', () => {

it('handles drag move via _draggerReframe._onDragMove', () => {
const anchor = 0.25;
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } };
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: 0.5 } };
const value = 0.5;
const shift = mapFromSubRange(viewStart, viewEnd, value);
// make sure `anchor` is already present on the props
Expand All @@ -118,12 +125,29 @@ describe('<TimelineViewingLayer>', () => {
const value = 0.5;
const shift = mapFromSubRange(viewStart, viewEnd, value);
const anchor = 0.25;
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } };
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift } };
wrapper.setProps({ viewRangeTime });
instance._draggerReframe._onDragEnd({ manager, value });
expect(manager.resetBounds.mock.calls).toEqual([[]]);
expect(props.updateViewRangeTime.mock.calls).toEqual([[anchor, shift, 'timeline-header']]);
});

it('_draggerReframe._onDragEnd sorts anchor and shift', () => {
const manager = { resetBounds: jest.fn() };
const value = 0.5;
const shift = mapFromSubRange(viewStart, viewEnd, value);
const anchor = 0.75;
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift } };
wrapper.setProps({ viewRangeTime });
instance._draggerReframe._onDragEnd({ manager, value });
expect(props.updateViewRangeTime.mock.calls).toEqual([[shift, anchor, 'timeline-header']]);
});

it('resets draggable bounds on boundsInvalidator update', () => {
const spy = jest.spyOn(instance._draggerReframe, 'resetBounds');
wrapper.setProps({ boundsInvalidator: 'SOMETHING-NEW' });
expect(spy).toHaveBeenCalledTimes(1);
});
});

describe('render()', () => {
Expand Down Expand Up @@ -155,6 +179,24 @@ describe('<TimelineViewingLayer>', () => {
expect(wrapper.find('.isDraggingRight.isReframeDrag').length).toBe(1);
});

it('renders the reframe dragging normalized left', () => {
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor: -0.25, shift: viewEnd } };
wrapper.setProps({ viewRangeTime });
expect(wrapper.find('.isDraggingRight.isReframeDrag').length).toBe(1);
});

it('renders the reframe dragging normalized right', () => {
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor: viewStart, shift: 1.25 } };
wrapper.setProps({ viewRangeTime });
expect(wrapper.find('.isDraggingRight.isReframeDrag').length).toBe(1);
});

it('does not render the reframe on out of bounds', () => {
const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor: 1.5, shift: 1.75 } };
wrapper.setProps({ viewRangeTime });
expect(wrapper.find('.isReframeDrag').length).toBe(0);
});

it('renders the shiftStart dragging', () => {
const viewRangeTime = { ...props.viewRangeTime, shiftStart: viewEnd };
wrapper.setProps({ viewRangeTime });
Expand Down
29 changes: 14 additions & 15 deletions ...i/src/components/TracePage/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ function getMarkers(
*/
export default class TimelineViewingLayer extends React.PureComponent<TimelineViewingLayerProps> {
_draggerReframe: DraggableManager;
_root: Element | TNil;
_root: React.RefObject<HTMLDivElement>;

constructor(props: TimelineViewingLayerProps) {
super(props);
Expand All @@ -134,7 +134,7 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
onMouseLeave: this._handleReframeMouseLeave,
onMouseMove: this._handleReframeMouseMove,
});
this._root = undefined;
this._root = React.createRef();
}

componentDidUpdate(prevProps: Readonly<TimelineViewingLayerProps>) {
Expand All @@ -148,15 +148,12 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
this._draggerReframe.dispose();
}

_setRoot = (elm: Element | TNil) => {
this._root = elm;
};

_getDraggingBounds = (): DraggableBounds => {
if (!this._root) {
throw new Error('invalid state');
const current = this._root.current;
if (!current) {
throw new Error('Component must be mounted in order to determine DraggableBounds');
}
const { left: clientXLeft, width } = this._root.getBoundingClientRect();
const { left: clientXLeft, width } = current.getBoundingClientRect();
return { clientXLeft, width };
};

Expand All @@ -170,20 +167,22 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
this.props.updateNextViewRangeTime({ cursor: undefined });
};

_handleReframeDragUpdate = ({ value }: DraggingUpdate) => {
_getAnchorAndShift = (value: number) => {
const { current, reframe } = this.props.viewRangeTime;
const [viewStart, viewEnd] = current;
const shift = mapFromViewSubRange(viewStart, viewEnd, value);
const anchor = reframe ? reframe.anchor : shift;
return { anchor, shift };
};

_handleReframeDragUpdate = ({ value }: DraggingUpdate) => {
const { anchor, shift } = this._getAnchorAndShift(value);
const update = { reframe: { anchor, shift } };
this.props.updateNextViewRangeTime(update);
};

_handleReframeDragEnd = ({ manager, value }: DraggingUpdate) => {
const { current, reframe } = this.props.viewRangeTime;
const [viewStart, viewEnd] = current;
const shift = mapFromViewSubRange(viewStart, viewEnd, value);
const anchor = reframe ? reframe.anchor : shift;
const { anchor, shift } = this._getAnchorAndShift(value);
const [start, end] = shift < anchor ? [shift, anchor] : [anchor, shift];
manager.resetBounds();
this.props.updateViewRangeTime(start, end, 'timeline-header');
Expand All @@ -202,7 +201,7 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
<div
aria-hidden
className="TimelineViewingLayer"
ref={this._setRoot}
ref={this._root}
onMouseDown={this._draggerReframe.handleMouseDown}
onMouseLeave={this._draggerReframe.handleMouseLeave}
onMouseMove={this._draggerReframe.handleMouseMove}
Expand Down