IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-24 09:50:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Convert TimelineHeaderRow to RTL (#51390)

Browse Source 
* update data-testids

* update data-testids

* Convert TimelineHeaderRow test to RTL

* update data-testids

* Convert TimelineHeaderRow test to RTL

* Convert TimelineHeaderRow test to RTL

* modify TraceView test

* revert test

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Ran yarn betterer

* update selector

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
Co-authored-by: Hamas Shafiq <hamas.shafiq@grafana.com>
This commit is contained in:
Seyaji 2022-09-09 11:44:05 +01:00 committed by GitHub
parent 6b2ff6f25b
commit 096fc76e23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 72 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.betterer.results
View File

@ -47,13 +47,10 @@ exports[`no enzyme tests`] = {
"packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js:174536706": [
[14, 19, 13, "RegExp match", "2409514259"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js:2286101708": [
"packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js:989353473": [
[15, 17, 13, "RegExp match", "2409514259"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js:2106409544": [
[14, 19, 13, "RegExp match", "2409514259"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:1423129438": [
"packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:4192868446": [
[15, 17, 13, "RegExp match", "2409514259"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.js:551014442": [
@ -1990,10 +1987,6 @@ exports[`better eslint`] = {
"packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],

1
packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx
View File

@ -78,6 +78,7 @@ export default function Ticks(props: TicksProps) {
const portion = i / (numTicks - 1);
ticks.push(
<div
data-testid="TicksID"
key={portion}
className={styles.TicksTick}
style={{

18
packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js
View File

@ -37,13 +37,13 @@ describe('<TimelineColumnResizer>', () => {
it('renders without exploding', () => {
expect(wrapper).toBeDefined();
expect(wrapper.find('[data-test-id="TimelineColumnResizer"]').length).toBe(1);
expect(wrapper.find('[data-test-id="TimelineColumnResizer--gripIcon"]').length).toBe(1);
expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').length).toBe(1);
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-test-id="TimelineColumnResizer"]');
const rootWrapper = wrapper.find('[data-testid="TimelineColumnResizer"]');
expect(rootWrapper.getDOMNode()).toBe(instance._rootElm);
});
@ -51,7 +51,7 @@ describe('<TimelineColumnResizer>', () => {
it('handles mouse down on the dragger', () => {
const dragger = wrapper.find({ onMouseDown: instance._dragManager.handleMouseDown });
expect(dragger.length).toBe(1);
expect(dragger.is('[data-test-id="TimelineColumnResizer--dragger"]')).toBe(true);
expect(dragger.is('[data-testid="TimelineColumnResizer--dragger"]')).toBe(true);
});
it('returns the draggable bounds via _getDraggingBounds()', () => {
@ -86,8 +86,8 @@ describe('<TimelineColumnResizer>', () => {
it('does not render a dragging indicator when not dragging', () => {
const styles = getStyles();
expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('style').right).toBe(undefined);
expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('className')).toBe(styles.dragger);
expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style').right).toBe(undefined);
expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe(styles.dragger);
});
it('renders a dragging indicator when dragging', () => {
@ -95,10 +95,10 @@ describe('<TimelineColumnResizer>', () => {
instance._handleDragUpdate({ value: props.min });
instance.forceUpdate();
wrapper.update();
expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('style').right).toBeDefined();
expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style').right).toBeDefined();
const styles = getStyles();
expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('className')).toBe(
expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe(
cx(styles.dragger, styles.draggerDragging, styles.draggerDraggingLeft)
);
});

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

@ -194,11 +194,11 @@ export default class TimelineColumnResizer extends React.PureComponent<
const isDragging = isDraggingLeft || isDraggingRight;
return (
<div className={styles.TimelineColumnResizer} ref={this._setRootElm} data-test-id="TimelineColumnResizer">
<div className={styles.TimelineColumnResizer} ref={this._setRootElm} data-testid="TimelineColumnResizer">
<div
className={cx(styles.gripIcon, isDragging && styles.gripIconDragging)}
style={gripStyle}
data-test-id="TimelineColumnResizer--gripIcon"
data-testid="TimelineColumnResizer--gripIcon"
/>
<div
aria-hidden
@ -210,7 +210,7 @@ export default class TimelineColumnResizer extends React.PureComponent<
)}
onMouseDown={this._dragManager.handleMouseDown}
style={draggerStyle}
data-test-id="TimelineColumnResizer--dragger"
data-testid="TimelineColumnResizer--dragger"
/>
</div>
);

101
packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js
View File

@ -12,20 +12,13 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import React from 'react';
import Ticks from '../Ticks';
import { TimelineCollapser } from './TimelineCollapser';
import TimelineColumnResizer from './TimelineColumnResizer';
import TimelineHeaderRow from './TimelineHeaderRow';
import TimelineViewingLayer from './TimelineViewingLayer';
describe('<TimelineHeaderRow>', () => {
let wrapper;
const nameColumnWidth = 0.25;
const nameColumnWidth = 0.25;
const setup = () => {
const props = {
nameColumnWidth,
duration: 1234,
@ -42,67 +35,55 @@ describe('<TimelineHeaderRow>', () => {
},
};
beforeEach(() => {
wrapper = shallow(<TimelineHeaderRow {...props} />);
});
return render(<TimelineHeaderRow {...props} />);
};
describe('TimelineHeaderRow', () => {
it('renders without exploding', () => {
expect(wrapper).toBeDefined();
expect(wrapper.find('[data-test-id="TimelineHeaderRow"]').length).toBe(1);
});
it('propagates the name column width', () => {
const nameCol = wrapper.find({ width: nameColumnWidth });
const timelineCol = wrapper.find({ width: 1 - nameColumnWidth });
expect(nameCol.length).toBe(1);
expect(timelineCol.length).toBe(1);
expect(() => setup()).not.toThrow();
});
it('renders the title', () => {
expect(wrapper.find('h4').text()).toMatch(/Service.*?Operation/);
setup();
expect(screen.getByRole('heading', { name: 'Service & Operation' }));
});
it('renders the collapser controls', () => {
setup();
expect(screen.getByRole('button', { name: 'Expand All' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Collapse All' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Expand +1' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Collapse +1' })).toBeInTheDocument();
});
it('renders the resizer controls', () => {
setup();
expect(screen.getByTestId('TimelineColumnResizer')).toBeInTheDocument();
expect(screen.getByTestId('TimelineColumnResizer--dragger')).toBeInTheDocument();
expect(screen.getByTestId('TimelineColumnResizer--gripIcon')).toBeInTheDocument();
});
it('propagates the name column width', () => {
setup();
const timelineCells = screen.queryAllByTestId('TimelineRowCell');
expect(timelineCells).toHaveLength(2);
expect(getComputedStyle(timelineCells[0]).maxWidth).toBe(`${nameColumnWidth * 100}%`);
expect(getComputedStyle(timelineCells[1]).maxWidth).toBe(`${(1 - nameColumnWidth) * 100}%`);
});
it('renders the TimelineViewingLayer', () => {
const elm = (
<TimelineViewingLayer
boundsInvalidator={nameColumnWidth}
updateNextViewRangeTime={props.updateNextViewRangeTime}
updateViewRangeTime={props.updateViewRangeTime}
viewRangeTime={props.viewRangeTime}
/>
);
expect(wrapper.containsMatchingElement(elm)).toBe(true);
setup();
expect(screen.getByTestId('TimelineViewingLayer')).toBeInTheDocument();
});
it('renders the Ticks', () => {
const [viewStart, viewEnd] = props.viewRangeTime.current;
const elm = (
<Ticks
numTicks={props.numTicks}
startTime={viewStart * props.duration}
endTime={viewEnd * props.duration}
showLabels
/>
);
expect(wrapper.containsMatchingElement(elm)).toBe(true);
});
setup();
it('renders the TimelineColumnResizer', () => {
const elm = (
<TimelineColumnResizer position={nameColumnWidth} onChange={props.onColummWidthChange} min={0.2} max={0.85} />
);
expect(wrapper.containsMatchingElement(elm)).toBe(true);
});
it('renders the TimelineCollapser', () => {
const elm = (
<TimelineCollapser
onCollapseAll={props.onCollapseAll}
onExpandAll={props.onExpandAll}
onCollapseOne={props.onCollapseOne}
onExpandOne={props.onExpandOne}
/>
);
expect(wrapper.containsMatchingElement(elm)).toBe(true);
expect(screen.getAllByTestId('TicksID')).toHaveLength(5);
});
});

2
packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx
View File

@ -89,7 +89,7 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) {
const [viewStart, viewEnd] = viewRangeTime.current;
const styles = useStyles2(getStyles);
return (
<TimelineRow className={styles.TimelineHeaderRow} data-test-id="TimelineHeaderRow">
<TimelineRow className={styles.TimelineHeaderRow} data-testid="TimelineHeaderRow">
<TimelineRow.Cell className={cx(ubFlex, ubPx2, styles.TimelineHeaderWrapper)} width={nameColumnWidth}>
<h4 className={styles.TimelineHeaderRowTitle}>Service &amp; Operation</h4>
<TimelineCollapser

20
packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js
View File

@ -46,12 +46,12 @@ describe('<TimelineViewingLayer>', () => {
it('renders without exploding', () => {
expect(wrapper).toBeDefined();
expect(wrapper.find('[data-test-id="TimelineViewingLayer"]').length).toBe(1);
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-test-id="TimelineViewingLayer"]').getDOMNode()).toBe(instance._root);
expect(wrapper.find('[data-testid="TimelineViewingLayer"]').getDOMNode()).toBe(instance._root);
});
describe('uses DraggableManager', () => {
@ -67,7 +67,7 @@ describe('<TimelineViewingLayer>', () => {
it('provides the DraggableManager handlers as callbacks', () => {
const { handleMouseDown, handleMouseLeave, handleMouseMove } = instance._draggerReframe;
const rootWrapper = wrapper.find('[data-test-id="TimelineViewingLayer"]');
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);
@ -137,17 +137,17 @@ describe('<TimelineViewingLayer>', () => {
const baseViewRangeTime = { ...props.viewRangeTime, cursor };
wrapper.setProps({ viewRangeTime: baseViewRangeTime });
// cursor is rendered when solo
expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(1);
expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(1);
// cursor is skipped when shiftStart, shiftEnd, or reframe are present
let viewRangeTime = { ...baseViewRangeTime, shiftStart: cursor };
wrapper.setProps({ viewRangeTime });
expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(0);
expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0);
viewRangeTime = { ...baseViewRangeTime, shiftEnd: cursor };
wrapper.setProps({ viewRangeTime });
expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(0);
expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0);
viewRangeTime = { ...baseViewRangeTime, reframe: { anchor: cursor, shift: cursor } };
wrapper.setProps({ viewRangeTime });
expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(0);
expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0);
});
it('renders the reframe dragging', () => {
@ -156,7 +156,7 @@ describe('<TimelineViewingLayer>', () => {
const styles = getStyles();
expect(
wrapper
.find('[data-test-id="Dragged"]')
.find('[data-testid="Dragged"]')
.prop('className')
.indexOf(
cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedDraggingRight, styles.draggedReframeDrag)
@ -170,7 +170,7 @@ describe('<TimelineViewingLayer>', () => {
const styles = getStyles();
expect(
wrapper
.find('[data-test-id="Dragged"]')
.find('[data-testid="Dragged"]')
.prop('className')
.indexOf(
cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedDraggingRight, styles.draggedShiftDrag)
@ -185,7 +185,7 @@ describe('<TimelineViewingLayer>', () => {
const styles = getStyles();
expect(
wrapper
.find('[data-test-id="Dragged"]')
.find('[data-testid="Dragged"]')
.prop('className')
.indexOf(cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedShiftDrag)) >= 0
).toBe(true);

6
packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx
View File

@ -168,7 +168,7 @@ function getMarkers(viewStart: number, viewEnd: number, from: number, to: number
<div
className={cx(styles.TimelineViewingLayerDragged, styles.TimelineViewingLayerDraggedDraggingLeft, cls)}
style={{ left, width }}
data-test-id="Dragged"
data-testid="Dragged"
/>
);
}
@ -265,13 +265,13 @@ export default class TimelineViewingLayer extends React.PureComponent<TimelineVi
onMouseDown={this._draggerReframe.handleMouseDown}
onMouseLeave={this._draggerReframe.handleMouseLeave}
onMouseMove={this._draggerReframe.handleMouseMove}
data-test-id="TimelineViewingLayer"
data-testid="TimelineViewingLayer"
>
{cusrorPosition != null && (
<div
className={styles.TimelineViewingLayerCursorGuide}
style={{ left: cusrorPosition }}
data-test-id="TimelineViewingLayer--cursorGuide"
data-testid="TimelineViewingLayer--cursorGuide"
/>
)}
{reframe != null && getMarkers(viewStart, viewEnd, reframe.anchor, reframe.shift, false)}

2
packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx
View File

@ -61,7 +61,7 @@ export function TimelineRowCell(props: TimelineRowCellProps) {
const widthPercent = `${width * 100}%`;
const mergedStyle = { ...style, flexBasis: widthPercent, maxWidth: widthPercent };
return (
<div className={cx(ubRelative, className)} style={mergedStyle} {...(rest as any)}>
<div className={cx(ubRelative, className)} style={mergedStyle} data-testid="TimelineRowCell" {...rest}>
{children}
</div>
);

2
public/app/features/explore/TraceView/TraceView.test.tsx
View File

@ -105,7 +105,7 @@ describe('TraceView', () => {
it('shows timeline ticks', () => {
renderTraceViewNew();
function ticks() {
return screen.getByText('', { selector: 'div[data-test-id="TimelineHeaderRow"]' }).children[1].children[1]
return screen.getByText('', { selector: 'div[data-testid="TimelineHeaderRow"]' }).children[1].children[1]
.textContent;
}
expect(ticks()).toBe('0μs274.5μs549μs823.5μs1.1ms');