From 0b1a886b9d194553d147b05bbc737e1e88072b65 Mon Sep 17 00:00:00 2001
From: Seyaji <67058118+Seyaji@users.noreply.github.com>
Date: Thu, 23 Jun 2022 08:55:38 +0100
Subject: [PATCH] Chore: Convert GraphTicks test to RTL (#51203)

* Convert GraphTicks test to RTL

* Convert GraphTicks test to RTL
---
 .betterer.results                             |  3 ---
 .../SpanGraph/GraphTicks.test.js              | 27 ++++++++++++-------
 .../TracePageHeader/SpanGraph/GraphTicks.tsx  |  2 +-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 37f471c894e..423a379c096 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -29,9 +29,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/slate-plugins/suggestions.test.tsx:3654981205": [
       [0, 18, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js:940336852": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js:4256741694": [
       [14, 19, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js
index 77736bee6e0..ffb2af7c879 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js
@@ -12,12 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 
 import GraphTicks from './GraphTicks';
 
-describe('<GraphTicks>', () => {
+const setup = (propOverrides) => {
   const defaultProps = {
     items: [
       { valueWidth: 100, valueOffset: 25, serviceName: 'a' },
@@ -25,20 +25,27 @@ describe('<GraphTicks>', () => {
     ],
     valueWidth: 200,
     numTicks: 4,
+    ...propOverrides,
   };
 
-  let ticksG;
-
-  beforeEach(() => {
-    const wrapper = shallow(<GraphTicks {...defaultProps} />);
-    ticksG = wrapper.find('[data-test="ticks"]');
-  });
+  return render(
+    <svg>
+      <GraphTicks {...defaultProps} />
+    </svg>
+  );
+};
 
+describe('GraphTicks tests', () => {
   it('creates a <g> for ticks', () => {
-    expect(ticksG.length).toBe(1);
+    setup();
+
+    expect(screen.getByTestId('ticks')).toBeInTheDocument();
   });
 
   it('creates a line for each ticks excluding the first and last', () => {
-    expect(ticksG.find('line').length).toBe(defaultProps.numTicks - 1);
+    setup({ numTicks: 6 });
+
+    // defaultProps.numTicks - 1 === expect
+    expect(screen.getByTestId('ticks').children).toHaveLength(5);
   });
 });
diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx
index 145db1bf459..ce2244456ee 100644
--- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx
+++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx
@@ -42,7 +42,7 @@ export default function GraphTicks(props: GraphTicksProps) {
   }
 
   return (
-    <g data-test="ticks" aria-hidden="true">
+    <g data-testid="ticks" aria-hidden="true">
       {ticks}
     </g>
   );