IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Convert TimelineColumnResizer.test.tsx to RTL (#61156)

Browse Source
This commit is contained in:
Hamas Shafiq 2023-01-10 21:24:51 +00:00 committed by GitHub
parent 2a291afbae
commit bc3ce5760b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -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"]
],

81
packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx
View File

@ -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('<TimelineColumnResizer>', () => {
let wrapper: ReactWrapper<TimelineColumnResizerProps, {}, TimelineColumnResizer>;
let instance: TimelineColumnResizer;
const mockOnChange = jest.fn();
const props = {
describe('<TimelineColumnResizer>', () => {
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(<TimelineColumnResizer {...(props as unknown as TimelineColumnResizerProps)} />);
instance = wrapper.instance();
mockOnChange.mockReset();
render(<TimelineColumnResizer {...props} />);
});
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)
);
});