Chore: Convert SpanDetailsRow test to RTL (#51345)

* Convert SpanDetailsRow test to RTL

* Convert SpanDetailsRow test to RTL

.betterer.results

@@ -47,9 +47,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js:700147304": [
       [16, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.test.js:2623922632": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js:174536706": [
       [14, 19, 13, "RegExp match", "2409514259"]
     ],

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx

@@ -195,7 +195,7 @@ export default function SpanDetail(props: SpanDetailProps) {
   const focusSpanLink = createFocusSpanLink(traceID, spanID);
 
   return (
-    <div>
+    <div data-testid="span-detail-component">
       <div className={styles.header}>
         <h2 className={cx(ubM0)}>{operationName}</h2>
         <div className={styles.listWrapper}>

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

@@ -12,89 +12,69 @@
 // 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 userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { createTheme } from '@grafana/data';
 
-import SpanDetail from './SpanDetail';
 import DetailState from './SpanDetail/DetailState';
 import { UnthemedSpanDetailRow } from './SpanDetailRow';
-import SpanTreeOffset from './SpanTreeOffset';
 
-jest.mock('./SpanTreeOffset');
-
-describe('<SpanDetailRow>', () => {
-  const spanID = 'some-id';
+const testSpan = {
+  spanID: 'testSpanID',
+  traceID: 'testTraceID',
+  depth: 3,
+  process: {
+    serviceName: 'some-service',
+    tags: [{ key: 'tag-key', value: 'tag-value' }],
+  },
+};
+const setup = (propOverrides) => {
   const props = {
     color: 'some-color',
     columnDivision: 0.5,
     detailState: new DetailState(),
     onDetailToggled: jest.fn(),
-    linksGetter: jest.fn(),
     isFilteredOut: false,
     logItemToggle: jest.fn(),
     logsToggle: jest.fn(),
     processToggle: jest.fn(),
-    span: { spanID, depth: 3 },
+    createFocusSpanLink: jest.fn(),
+    hoverIndentGuideIds: new Map(),
+    span: testSpan,
     tagsToggle: jest.fn(),
     traceStartTime: 1000,
     theme: createTheme(),
+    ...propOverrides,
   };
+  return render(<UnthemedSpanDetailRow {...props} />);
+};
 
-  let wrapper;
-
-  beforeEach(() => {
-    props.onDetailToggled.mockReset();
-    props.linksGetter.mockReset();
-    props.logItemToggle.mockReset();
-    props.logsToggle.mockReset();
-    props.processToggle.mockReset();
-    props.tagsToggle.mockReset();
-    wrapper = shallow(<UnthemedSpanDetailRow {...props} />);
-  });
-
+describe('SpanDetailRow tests', () => {
   it('renders without exploding', () => {
-    expect(wrapper).toBeDefined();
+    expect(() => setup()).not.toThrow();
   });
 
-  it('escalates toggle detail', () => {
-    const calls = props.onDetailToggled.mock.calls;
-    expect(calls.length).toBe(0);
-    wrapper.find('[data-test-id="detail-row-expanded-accent"]').prop('onClick')();
-    expect(calls).toEqual([[spanID]]);
+  it('calls toggle on click', async () => {
+    const mockToggle = jest.fn();
+    setup({ onDetailToggled: mockToggle });
+    expect(mockToggle).not.toHaveBeenCalled();
+
+    const detailRow = screen.getByTestId('detail-row-expanded-accent');
+    await userEvent.click(detailRow);
+    expect(mockToggle).toHaveBeenCalled();
   });
 
   it('renders the span tree offset', () => {
-    const spanTreeOffset = <SpanTreeOffset span={props.span} showChildrenIcon={false} />;
-    expect(wrapper.contains(spanTreeOffset)).toBe(true);
+    setup();
+
+    expect(screen.getByTestId('SpanTreeOffset--indentGuide')).toBeInTheDocument();
   });
 
   it('renders the SpanDetail', () => {
-    const spanDetail = (
-      <SpanDetail
-        detailState={props.detailState}
-        linksGetter={wrapper.instance()._linksGetter}
-        logItemToggle={props.logItemToggle}
-        logsToggle={props.logsToggle}
-        processToggle={props.processToggle}
-        span={props.span}
-        tagsToggle={props.tagsToggle}
-        traceStartTime={props.traceStartTime}
-      />
-    );
-    expect(wrapper.contains(spanDetail)).toBe(true);
-  });
+    setup();
 
-  it('adds span when calling linksGetter', () => {
-    const spanDetail = wrapper.find(SpanDetail);
-    const linksGetter = spanDetail.prop('linksGetter');
-    const tags = [{ key: 'myKey', value: 'myValue' }];
-    const linksGetterResponse = {};
-    props.linksGetter.mockReturnValueOnce(linksGetterResponse);
-    const result = linksGetter(tags, 0);
-    expect(result).toBe(linksGetterResponse);
-    expect(props.linksGetter).toHaveBeenCalledTimes(1);
-    expect(props.linksGetter).toHaveBeenCalledWith(props.span, tags, 0);
+    expect(screen.getByTestId('span-detail-component')).toBeInTheDocument();
   });
 });

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

@@ -150,7 +150,7 @@ export class UnthemedSpanDetailRow extends React.PureComponent<SpanDetailRowProp
               onClick={this._detailToggle}
               role="switch"
               style={{ borderColor: color }}
-              data-test-id="detail-row-expanded-accent"
+              data-testid="detail-row-expanded-accent"
             />
           </span>
         </TimelineRow.Cell>