From 91ee0191400405e35a6a5e807a5c2ab676ef3a8a Mon Sep 17 00:00:00 2001
From: Seyaji <67058118+Seyaji@users.noreply.github.com>
Date: Thu, 23 Jun 2022 18:20:16 +0100
Subject: [PATCH] Convert TimelineCollapser test to RTL (#51281)

---
 .betterer.results                             |  3 --
 .../TimelineCollapser.test.js                 | 34 +++++++++++++------
 .../TimelineHeaderRow/TimelineCollapser.tsx   |  2 +-
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index e061663fb8e..9d6c94a8e46 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -59,9 +59,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js:174536706": [
       [14, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.test.js:4018342820": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js:2286101708": [
       [15, 17, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.test.js
index 842ebd484c5..0fd4a5e00ee 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.test.js
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.test.js
@@ -12,21 +12,33 @@
 // 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 React from 'react';
 
 import { TimelineCollapser } from './TimelineCollapser';
 
-describe('<TimelineCollapser>', () => {
+const setup = () => {
+  const props = {
+    onCollapseAll: () => {},
+    onCollapseOne: () => {},
+    onExpandAll: () => {},
+    onExpandOne: () => {},
+  };
+  return render(<TimelineCollapser {...props} />);
+};
+
+describe('TimelineCollapser test', () => {
   it('renders without exploding', () => {
-    const props = {
-      onCollapseAll: () => {},
-      onCollapseOne: () => {},
-      onExpandAll: () => {},
-      onExpandOne: () => {},
-    };
-    const wrapper = shallow(<TimelineCollapser {...props} />);
-    expect(wrapper).toBeDefined();
-    expect(wrapper.find('[data-test-id="TimelineCollapser"]').length).toBe(1);
+    expect(() => setup()).not.toThrow();
+  });
+
+  it('renders correctly', () => {
+    setup();
+
+    expect(screen.getByTestId('TimelineCollapser')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Expand All' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Collapse All' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Expand +1' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Collapse +1' })).toBeInTheDocument();
   });
 });
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
index 06043008504..cfa75305191 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineCollapser.tsx
@@ -40,7 +40,7 @@ export function TimelineCollapser(props: CollapserProps) {
   const { onExpandAll, onExpandOne, onCollapseAll, onCollapseOne } = props;
   const styles = useStyles2(getStyles);
   return (
-    <div className={styles.TimelineCollapser} data-test-id="TimelineCollapser">
+    <div className={styles.TimelineCollapser} data-testid="TimelineCollapser">
       <IconButton tooltip="Expand +1" size="xl" tooltipPlacement="top" name="angle-down" onClick={onExpandOne} />
       <IconButton tooltip="Collapse +1" size="xl" tooltipPlacement="top" name="angle-right" onClick={onCollapseOne} />
       <IconButton