Convert test to RTL (#56279)

.betterer.results

@@ -41,9 +41,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.js:551014442": [
       [13, 26, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/index.test.js:1541367299": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/core/components/Select/MetricSelect.test.tsx:1074737147": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

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

@@ -12,7 +12,8 @@
 // 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';
@@ -20,8 +21,6 @@ import { createTheme } from '@grafana/data';
 import traceGenerator from '../demo/trace-generators';
 import transformTraceData from '../model/transform-trace-data';
 
-import TimelineHeaderRow from './TimelineHeaderRow';
-
 import TraceTimelineViewer from './index';
 
 jest.mock('@grafana/runtime', () => {
@@ -42,12 +41,17 @@ describe('<TraceTimelineViewer>', () => {
       },
     },
     traceTimeline: {
+      childrenHiddenIDs: new Set(),
+      hoverIndentGuideIds: new Set(),
       spanNameColumnWidth: 0.5,
+      detailStates: new Map(),
     },
     expandAll: jest.fn(),
     collapseAll: jest.fn(),
     expandOne: jest.fn(),
+    registerAccessors: jest.fn(),
     collapseOne: jest.fn(),
+    setTrace: jest.fn(),
     theme: createTheme(),
     history: {
       replace: () => {},
@@ -56,27 +60,34 @@ describe('<TraceTimelineViewer>', () => {
       search: null,
     },
   };
-  let wrapper;
-
-  beforeEach(() => {
-    wrapper = shallow(<TraceTimelineViewer {...props} />)
-      .dive()
-      .dive();
-  });
 
   it('it does not explode', () => {
-    expect(wrapper).toBeDefined();
+    expect(() => render(<TraceTimelineViewer {...props} />)).not.toThrow();
   });
 
-  it('it sets up actions', () => {
+  it('it sets up actions', async () => {
-    const headerRow = wrapper.find(TimelineHeaderRow);
+    render(<TraceTimelineViewer {...props} />);
-    headerRow.props().onCollapseAll();
+
-    headerRow.props().onExpandAll();
+    const expandOne = screen.getByRole('button', { name: 'Expand +1' });
-    headerRow.props().onExpandOne();
+    const collapseOne = screen.getByRole('button', { name: 'Collapse +1' });
-    headerRow.props().onCollapseOne();
+    const expandAll = screen.getByRole('button', { name: 'Expand All' });
-    expect(props.collapseAll.mock.calls.length).toBe(1);
+    const collapseAll = screen.getByRole('button', { name: 'Collapse All' });
-    expect(props.expandAll.mock.calls.length).toBe(1);
+
-    expect(props.expandOne.mock.calls.length).toBe(1);
+    expect(expandOne).toBeInTheDocument();
-    expect(props.collapseOne.mock.calls.length).toBe(1);
+    expect(collapseOne).toBeInTheDocument();
+    expect(expandAll).toBeInTheDocument();
+    expect(collapseAll).toBeInTheDocument();
+
+    await userEvent.click(expandOne);
+    expect(props.expandOne).toHaveBeenCalled();
+
+    await userEvent.click(collapseOne);
+    expect(props.collapseOne).toHaveBeenCalled();
+
+    await userEvent.click(expandAll);
+    expect(props.expandAll).toHaveBeenCalled();
+
+    await userEvent.click(collapseAll);
+    expect(props.collapseAll).toHaveBeenCalled();
   });
 });