Convert SpanDetail/index.test.js to RTL (#56019)

.betterer.results

@@ -29,9 +29,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/SpanDetail/index.test.js:1241675783": [
-      [16, 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.test.js

@@ -14,23 +14,19 @@
 
 jest.mock('../utils');
 
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import LabeledList from '../../common/LabeledList';
 import traceGenerator from '../../demo/trace-generators';
 import transformTraceData from '../../model/transform-trace-data';
 import { formatDuration } from '../utils';
 
-import AccordianKeyValues from './AccordianKeyValues';
-import AccordianLogs from './AccordianLogs';
 import DetailState from './DetailState';
 
 import SpanDetail, { getAbsoluteTime } from './index';
 
 describe('<SpanDetail>', () => {
-  let wrapper;
-
   // use `transformTraceData` on a fake trace to get a fully processed span
   const span = transformTraceData(traceGenerator.trace({ numberOfSpans: 1 })).spans[0];
   const detailState = new DetailState().toggleLogs().toggleProcess().toggleReferences().toggleTags();
@@ -47,7 +43,7 @@ describe('<SpanDetail>', () => {
     tagsToggle: jest.fn(),
     warningsToggle: jest.fn(),
     referencesToggle: jest.fn(),
-    createFocusSpanLink: jest.fn(),
+    createFocusSpanLink: jest.fn().mockReturnValue({}),
     topOfViewRefType: 'Explore',
   };
   span.logs = [
@@ -117,81 +113,68 @@ describe('<SpanDetail>', () => {
     props.processToggle.mockReset();
     props.logsToggle.mockReset();
     props.logItemToggle.mockReset();
-    wrapper = shallow(<SpanDetail {...props} />);
   });
 
   it('renders without exploding', () => {
-    expect(wrapper).toBeDefined();
+    expect(() => render(<SpanDetail {...props} />)).not.toThrow();
   });
 
   it('shows the operation name', () => {
-    expect(wrapper.find('h2').text()).toBe(span.operationName);
+    render(<SpanDetail {...props} />);
+    expect(screen.getByRole('heading', { name: span.operationName })).toBeInTheDocument();
   });
 
   it('lists the service name, duration and start time', () => {
-    const words = ['Duration:', 'Service:', 'Start Time:'];
+    render(<SpanDetail {...props} />);
-    const overview = wrapper.find(LabeledList);
+    expect(screen.getByText('Duration:')).toBeInTheDocument();
-    expect(
+    expect(screen.getByText('Service:')).toBeInTheDocument();
-      overview
+    expect(screen.getByText('Start Time:')).toBeInTheDocument();
-        .prop('items')
-        .map((item) => item.label)
-        .sort()
-    ).toEqual(words);
   });
 
   it('start time shows the absolute time', () => {
-    const startTime = wrapper.find(LabeledList).prop('items')[2].value;
+    render(<SpanDetail {...props} />);
     const absoluteTime = getAbsoluteTime(span.startTime);
-    expect(startTime).toContain(absoluteTime);
+    expect(
+      screen.getByText((text) => {
+        return text.includes(absoluteTime);
+      })
+    ).toBeInTheDocument();
   });
 
-  it('renders the span tags', () => {
+  it('renders the span tags', async () => {
-    const target = <AccordianKeyValues data={span.tags} label="Attributes" isOpen={detailState.isTagsOpen} />;
+    render(<SpanDetail {...props} />);
-    expect(wrapper.containsMatchingElement(target)).toBe(true);
+    await userEvent.click(screen.getByRole('switch', { name: /Attributes/ }));
-    wrapper.find({ data: span.tags }).simulate('toggle');
     expect(props.tagsToggle).toHaveBeenLastCalledWith(span.spanID);
   });
 
-  it('renders the process tags', () => {
+  it('renders the process tags', async () => {
-    const target = <AccordianKeyValues data={span.process.tags} label="Resource" isOpen={detailState.isProcessOpen} />;
+    render(<SpanDetail {...props} />);
-    expect(wrapper.containsMatchingElement(target)).toBe(true);
+    await userEvent.click(screen.getByRole('switch', { name: /Resource/ }));
-    wrapper.find({ data: span.process.tags }).simulate('toggle');
     expect(props.processToggle).toHaveBeenLastCalledWith(span.spanID);
   });
 
-  it('renders the logs', () => {
+  it('renders the logs', async () => {
-    const somethingUniq = {};
+    render(<SpanDetail {...props} />);
-    const target = (
+    await userEvent.click(screen.getByRole('switch', { name: /Events/ }));
-      <AccordianLogs
-        logs={span.logs}
-        isOpen={detailState.logs.isOpen}
-        openedItems={detailState.logs.openedItems}
-        timestamp={traceStartTime}
-      />
-    );
-    expect(wrapper.containsMatchingElement(target)).toBe(true);
-    const accordianLogs = wrapper.find(AccordianLogs);
-    accordianLogs.simulate('toggle');
-    accordianLogs.simulate('itemToggle', somethingUniq);
     expect(props.logsToggle).toHaveBeenLastCalledWith(span.spanID);
-    expect(props.logItemToggle).toHaveBeenLastCalledWith(span.spanID, somethingUniq);
+    await userEvent.click(screen.getByRole('switch', { name: /oh the log/ }));
+    expect(props.logItemToggle).toHaveBeenLastCalledWith(span.spanID, props.span.logs[0]);
   });
 
-  it('renders the warnings', () => {
+  it('renders the warnings', async () => {
-    const warningElm = wrapper.find({ data: span.warnings });
+    render(<SpanDetail {...props} />);
-    expect(warningElm.length).toBe(1);
+    await userEvent.click(screen.getByRole('switch', { name: /Warnings/ }));
-    warningElm.simulate('toggle');
     expect(props.warningsToggle).toHaveBeenLastCalledWith(span.spanID);
   });
 
-  it('renders the references', () => {
+  it('renders the references', async () => {
-    const refElem = wrapper.find({ data: span.references });
+    render(<SpanDetail {...props} />);
-    expect(refElem.length).toBe(1);
+    await userEvent.click(screen.getByRole('switch', { name: /References/ }));
-    refElem.simulate('toggle');
     expect(props.referencesToggle).toHaveBeenLastCalledWith(span.spanID);
   });
 
   it('renders deep link URL', () => {
-    expect(wrapper.find('a').exists()).toBeTruthy();
+    render(<SpanDetail {...props} />);
+    expect(document.getElementsByTagName('a').length).toBeGreaterThan(1);
   });
 });