Convert packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js to RTL (#49107)

* convert SpanBar tests to RTL and add testing-library/react dependency

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* fix

* use e2e selector everywhere

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

.betterer.results

@@ -71,9 +71,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [
       [14, 26, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js:1478502145": [
-      [14, 17, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js:1451240090": [
       [14, 26, 13, "RegExp match", "2409514259"]
     ],

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -265,7 +265,7 @@ export const Components = {
     placeholder: 'Choose starting day of the week',
   },
   TraceViewer: {
-    spanBar: () => '[data-test-id="SpanBar--wrapper"]',
+    spanBar: 'data-testid SpanBar--wrapper',
   },
   QueryField: { container: 'Query field' },
   ValuePicker: {

packages/jaeger-ui-components/package.json

@@ -10,6 +10,8 @@
   },
   "devDependencies": {
     "@grafana/tsconfig": "^1.2.0-rc1",
+    "@testing-library/react": "12.1.4",
+    "@testing-library/user-event": "14.2.0",
     "@types/classnames": "^2.2.7",
     "@types/deep-freeze": "^0.1.1",
     "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5",
@@ -27,6 +29,7 @@
   "dependencies": {
     "@emotion/css": "11.7.1",
     "@grafana/data": "9.0.0-pre",
+    "@grafana/e2e-selectors": "9.0.0-pre",
     "@grafana/ui": "9.0.0-pre",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",

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

@@ -12,11 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
-import { Popover } from '../common/Popover';
+import { selectors } from '@grafana/e2e-selectors';
 
 import SpanBar from './SpanBar';
 
@@ -75,25 +75,23 @@ describe('<SpanBar>', () => {
     },
   };
 
-  it('renders without exploding', () => {
-    const wrapper = mount(<SpanBar {...props} />);
-    expect(wrapper).toBeDefined();
-    const { onMouseOver, onMouseLeave } = wrapper.find('[data-test-id="SpanBar--wrapper"]').props();
-    const labelElm = wrapper.find('[data-test-id="SpanBar--label"]');
-    expect(labelElm.text()).toBe(shortLabel);
-    act(() => {
-      onMouseOver();
-    });
-    expect(labelElm.text()).toBe(longLabel);
-    act(() => {
-      onMouseLeave();
-    });
-    expect(labelElm.text()).toBe(shortLabel);
+  it('renders without exploding', async () => {
+    render(<SpanBar {...props} />);
+    expect(screen.getByText(shortLabel)).toBeInTheDocument();
+    expect(screen.queryByText(longLabel)).not.toBeInTheDocument();
+
+    await userEvent.hover(screen.getByTestId(selectors.components.TraceViewer.spanBar));
+    expect(screen.queryByText(shortLabel)).not.toBeInTheDocument();
+    expect(screen.getByText(longLabel)).toBeInTheDocument();
+
+    await userEvent.unhover(screen.getByTestId(selectors.components.TraceViewer.spanBar));
+    expect(screen.getByText(shortLabel)).toBeInTheDocument();
+    expect(screen.queryByText(longLabel)).not.toBeInTheDocument();
   });
 
   it('log markers count', () => {
     // 3 log entries, two grouped together with the same timestamp
-    const wrapper = mount(<SpanBar {...props} />);
-    expect(wrapper.find(Popover).length).toEqual(2);
+    render(<SpanBar {...props} />);
+    expect(screen.getAllByTestId('SpanBar--logMarker')).toHaveLength(2);
   });
 });

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

@@ -18,6 +18,7 @@ import { groupBy as _groupBy } from 'lodash';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../Theme';
@@ -150,7 +151,7 @@ function SpanBar({
       onMouseLeave={setShortLabel}
       onMouseOver={setLongLabel}
       aria-hidden
-      data-test-id="SpanBar--wrapper"
+      data-testid={selectors.components.TraceViewer.spanBar}
     >
       <div
         aria-label={label}
@@ -161,7 +162,7 @@ function SpanBar({
           width: toPercent(viewEnd - viewStart),
         }}
       >
-        <div className={cx(styles.label, labelClassName)} data-test-id="SpanBar--label">
+        <div className={cx(styles.label, labelClassName)} data-testid="SpanBar--label">
           {label}
         </div>
       </div>
@@ -173,7 +174,7 @@ function SpanBar({
               <AccordianLogs interactive={false} isOpen logs={logGroups[positionKey]} timestamp={traceStartTime} />
             }
           >
-            <div className={styles.logMarker} style={{ left: positionKey }} />
+            <div data-testid="SpanBar--logMarker" className={styles.logMarker} style={{ left: positionKey }} />
           </Popover>
         ))}
       </div>

yarn.lock

@@ -4978,8 +4978,11 @@ __metadata:
   dependencies:
     "@emotion/css": 11.7.1
     "@grafana/data": 9.0.0-pre
+    "@grafana/e2e-selectors": 9.0.0-pre
     "@grafana/tsconfig": ^1.2.0-rc1
     "@grafana/ui": 9.0.0-pre
+    "@testing-library/react": 12.1.4
+    "@testing-library/user-event": 14.2.0
     "@types/classnames": ^2.2.7
     "@types/deep-freeze": ^0.1.1
     "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5"