Chore: Convert TimelineHeaderRow to RTL (#51390)

* 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>

.betterer.results

@@ -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": [
+    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:4192868446": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:1423129438": [
       [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"]
     ],

packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx

@@ -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={{

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

@@ -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-testid="TimelineColumnResizer"]').length).toBe(1);
-    expect(wrapper.find('[data-test-id="TimelineColumnResizer--gripIcon"]').length).toBe(1);
+    expect(wrapper.find('[data-testid="TimelineColumnResizer--gripIcon"]').length).toBe(1);
-    expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').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-testid="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('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)
     );
   });

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

@@ -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>
     );

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

@@ -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>', () => {
+const nameColumnWidth = 0.25;
-  let wrapper;
+const setup = () => {
-
-  const nameColumnWidth = 0.25;
   const props = {
     nameColumnWidth,
     duration: 1234,
@@ -42,67 +35,55 @@ describe('<TimelineHeaderRow>', () => {
     },
   };
 
-  beforeEach(() => {
+  return render(<TimelineHeaderRow {...props} />);
-    wrapper = shallow(<TimelineHeaderRow {...props} />);
+};
-  });
 
+describe('TimelineHeaderRow', () => {
   it('renders without exploding', () => {
-    expect(wrapper).toBeDefined();
+    expect(() => setup()).not.toThrow();
-    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);
   });
 
   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 = (
+    setup();
-      <TimelineViewingLayer
+
-        boundsInvalidator={nameColumnWidth}
+    expect(screen.getByTestId('TimelineViewingLayer')).toBeInTheDocument();
-        updateNextViewRangeTime={props.updateNextViewRangeTime}
-        updateViewRangeTime={props.updateViewRangeTime}
-        viewRangeTime={props.viewRangeTime}
-      />
-    );
-    expect(wrapper.containsMatchingElement(elm)).toBe(true);
   });
 
   it('renders the Ticks', () => {
-    const [viewStart, viewEnd] = props.viewRangeTime.current;
+    setup();
-    const elm = (
-      <Ticks
-        numTicks={props.numTicks}
-        startTime={viewStart * props.duration}
-        endTime={viewEnd * props.duration}
-        showLabels
-      />
-    );
-    expect(wrapper.containsMatchingElement(elm)).toBe(true);
-  });
 
-  it('renders the TimelineColumnResizer', () => {
+    expect(screen.getAllByTestId('TicksID')).toHaveLength(5);
-    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);
   });
 });

packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx

@@ -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

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

@@ -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);

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

@@ -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)}

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

@@ -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>
   );

public/app/features/explore/TraceView/TraceView.test.tsx

@@ -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');