Convert TimelineCollapser test to RTL (#51281)

.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"]
     ],

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 = {
+    expect(() => setup()).not.toThrow();
-      onCollapseAll: () => {},
+  });
-      onCollapseOne: () => {},
+
-      onExpandAll: () => {},
+  it('renders correctly', () => {
-      onExpandOne: () => {},
+    setup();
-    };
+
-    const wrapper = shallow(<TimelineCollapser {...props} />);
+    expect(screen.getByTestId('TimelineCollapser')).toBeInTheDocument();
-    expect(wrapper).toBeDefined();
+    expect(screen.getByRole('button', { name: 'Expand All' })).toBeInTheDocument();
-    expect(wrapper.find('[data-test-id="TimelineCollapser"]').length).toBe(1);
+    expect(screen.getByRole('button', { name: 'Collapse All' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Expand +1' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Collapse +1' })).toBeInTheDocument();
   });
 });

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