From 7623f6ac6437594f41ea1bd5e40773586809dc82 Mon Sep 17 00:00:00 2001
From: Chrysa Dikonimaki <xrdikonimaki@hotmail.com>
Date: Fri, 20 May 2022 12:02:43 +0200
Subject: [PATCH]  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                             |  6 ----
 .../SpanDetail/AccordianText.test.js          | 28 ++++++++-----------
 .../SpanDetail/AccordianText.tsx              |  2 +-
 .../SpanDetail/TextList.test.js               | 20 ++++---------
 .../SpanDetail/TextList.tsx                   |  2 +-
 5 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index e4df49386e2..0766c17123e 100644
--- a/.betterer.results
+++ b/.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"]
     ],
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js
index 54803bf11ba..53ce8d23702 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js
+++ b/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();
+    });
   });
 });
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx
index 9af61f1375d..c7bbb516562 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.tsx
+++ b/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>
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js
index 207e186cb77..7e71bd6c85b 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js
+++ b/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);
   });
 });
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.tsx
index a46685ca7e9..20af23d63e8 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.tsx
+++ b/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 (