Convert packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js to RTL (#54822)

Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Toledodev <rafael.toledo@engenharia.ufjf.br>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>

.betterer.results

@@ -23,9 +23,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/slate-plugins/suggestions.test.tsx:2682912140": [
       [0, 18, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js:4256741694": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/TickLabels.test.js:2931161174": [
       [14, 19, 13, "RegExp match", "2409514259"]
     ],

packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js

@@ -12,51 +12,51 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallow } from 'enzyme';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import React from 'react';
-import sinon from 'sinon';
 
-import Scrubber, { getStyles } from './Scrubber';
+import Scrubber from './Scrubber';
 
 describe('<Scrubber>', () => {
   const defaultProps = {
-    onMouseDown: sinon.spy(),
     position: 0,
   };
 
-  let wrapper;
+  let rerender;
 
   beforeEach(() => {
-    wrapper = shallow(<Scrubber {...defaultProps} />);
+    ({ rerender } = render(
+      <svg>
+        <Scrubber {...defaultProps} />
+      </svg>
+    ));
   });
 
   it('contains the proper svg components', () => {
-    const styles = getStyles();
-    expect(
-      wrapper.matchesElement(
-        <g>
-          <g className={styles.ScrubberHandles}>
-            <rect className={styles.ScrubberHandleExpansion} />
-            <rect className={styles.ScrubberHandle} />
-          </g>
-          <line className={styles.ScrubberLine} />
-        </g>
-      )
-    ).toBeTruthy();
+    const scrubberComponent = screen.getByTestId('scrubber-component');
+    const scrubberComponentG = screen.getByTestId('scrubber-component-g');
+
+    expect(within(scrubberComponent).getByTestId('scrubber-component-g')).toBeTruthy();
+    expect(within(scrubberComponent).getByTestId('scrubber-component-line')).toBeTruthy();
+    expect(within(scrubberComponentG).getByTestId('scrubber-component-rect-1')).toBeTruthy();
+    expect(within(scrubberComponentG).getByTestId('scrubber-component-rect-2')).toBeTruthy();
   });
 
   it('calculates the correct x% for a timestamp', () => {
-    wrapper = shallow(<Scrubber {...defaultProps} position={0.5} />);
-    const line = wrapper.find('line').first();
-    const rect = wrapper.find('rect').first();
-    expect(line.prop('x1')).toBe('50%');
-    expect(line.prop('x2')).toBe('50%');
-    expect(rect.prop('x')).toBe('50%');
+    rerender(
+      <svg>
+        <Scrubber {...defaultProps} position={0.5} />
+      </svg>
+    );
+    const line = screen.getByTestId('scrubber-component-line');
+    const rect = screen.getByTestId('scrubber-component-rect-1');
+
+    expect(line).toHaveAttribute('x1', '50%');
+    expect(line).toHaveAttribute('x2', '50%');
+    expect(rect).toHaveAttribute('x', '50%');
   });
 
   it('supports onMouseDown', () => {
-    const event = {};
-    wrapper.find(`.${getStyles().ScrubberHandles}`).prop('onMouseDown')(event);
-    expect(defaultProps.onMouseDown.calledWith(event)).toBeTruthy();
+    expect(fireEvent.mouseDown(screen.getByTestId('scrubber-component-g'))).toBeTruthy();
   });
 });

packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx

@@ -85,8 +85,9 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
   const styles = useStyles2(getStyles);
   const className = cx({ [styles.ScrubberDragging]: isDragging });
   return (
-    <g className={className}>
+    <g className={className} data-testid="scrubber-component">
       <g
+        data-testid="scrubber-component-g"
         className={styles.ScrubberHandles}
         onMouseDown={onMouseDown}
         onMouseEnter={onMouseEnter}
@@ -94,6 +95,7 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
       >
         {/* handleExpansion is only visible when `isDragging` is true */}
         <rect
+          data-testid="scrubber-component-rect-1"
           x={xPercent}
           className={styles.ScrubberHandleExpansion}
           style={{ transform: `translate(-4.5px)` }}
@@ -101,6 +103,7 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
           height="20"
         />
         <rect
+          data-testid="scrubber-component-rect-2"
           x={xPercent}
           className={styles.ScrubberHandle}
           style={{ transform: `translate(-1.5px)` }}
@@ -108,7 +111,13 @@ export default function Scrubber({ isDragging, onMouseDown, onMouseEnter, onMous
           height="20"
         />
       </g>
-      <line className={styles.ScrubberLine} y2="100%" x1={xPercent} x2={xPercent} />
+      <line
+        className={styles.ScrubberLine}
+        y2="100%"
+        x1={xPercent}
+        x2={xPercent}
+        data-testid="scrubber-component-line"
+      />
     </g>
   );
 }