Convert `packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js` and `packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js` to RTL (#49148)

* convert AccordianText and TestList tests to RTL

* convert AccordianText and TestList tests to RTL

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* fix TextList and AccordianText tests

* remove getrow function

* readd TextList props

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

.betterer.results

@@ -77,15 +77,9 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.test.js:2429764318": [
       [14, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js:1966455998": [
-      [14, 17, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js:3813002651": [
       [14, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js:3006381933": [
-      [14, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js:2816619357": [
       [16, 19, 13, "RegExp match", "2409514259"]
     ],

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js

@@ -12,17 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { mount } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 
 import AccordianText from './AccordianText';
-import TextList from './TextList';
 
 const warnings = ['Duplicated tag', 'Duplicated spanId'];
 
 describe('<AccordianText>', () => {
-  let wrapper;
-
   const props = {
     compact: false,
     data: warnings,
@@ -32,25 +29,22 @@ describe('<AccordianText>', () => {
     onToggle: jest.fn(),
   };
 
-  beforeEach(() => {
-    wrapper = mount(<AccordianText {...props} />);
-  });
-
   it('renders without exploding', () => {
-    expect(wrapper).toBeDefined();
-    expect(wrapper.exists()).toBe(true);
+    render(<AccordianText {...props} />);
+    expect(() => render(<AccordianText {...props} />)).not.toThrow();
   });
 
   it('renders the label', () => {
-    const header = wrapper.find(`[data-test-id="AccordianText--header"] > strong`);
-    expect(header.length).toBe(1);
-    expect(header.text()).toBe(props.label);
+    render(<AccordianText {...props} />);
+    const { getByText } = within(screen.getByTestId('AccordianText--header'));
+    expect(getByText(props.label)).toBeInTheDocument();
   });
 
   it('renders the content when it is expanded', () => {
-    wrapper.setProps({ isOpen: true });
-    const content = wrapper.find(TextList);
-    expect(content.length).toBe(1);
-    expect(content.prop('data')).toBe(warnings);
+    props.isOpen = true;
+    render(<AccordianText {...props} />);
+    warnings.forEach((warning) => {
+      expect(screen.getByText(warning)).toBeInTheDocument();
+    });
   });
 });

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

@@ -86,7 +86,7 @@ export default function AccordianText(props: AccordianTextProps) {
   const styles = useStyles2(getStyles);
   return (
     <div className={className || ''}>
-      <div className={cx(styles.header, headerClassName)} {...headerProps} data-test-id="AccordianText--header">
+      <div className={cx(styles.header, headerClassName)} {...headerProps} data-testid="AccordianText--header">
         {arrow}
         <strong>{label}</strong> ({data.length})
       </div>

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js

@@ -12,30 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { shallow } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 
 import TextList from './TextList';
 
 describe('<TextList>', () => {
-  let wrapper;
-
-  const data = [
-    { key: 'span.kind', value: 'client' },
-    { key: 'omg', value: 'mos-def' },
-  ];
-
-  beforeEach(() => {
-    wrapper = shallow(<TextList data={data} />);
-  });
+  const data = ['client', 'mos-def'];
 
   it('renders without exploding', () => {
-    expect(wrapper).toBeDefined();
-    expect(wrapper.find('[data-test-id="TextList"]').length).toBe(1);
+    expect(() => render(<TextList data={data} />)).not.toThrow();
   });
 
   it('renders a table row for each data element', () => {
-    const trs = wrapper.find('li');
-    expect(trs.length).toBe(data.length);
+    render(<TextList data={data} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(data.length);
   });
 });

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

@@ -48,7 +48,7 @@ export default function TextList(props: TextListProps) {
   const { data } = props;
   const styles = useStyles2(getStyles);
   return (
-    <div className={cx(styles.TextList)} data-test-id="TextList">
+    <div className={cx(styles.TextList)} data-testid="TextList">
       <ul className={styles.List}>
         {data.map((row, i) => {
           return (