Chore: Convert KeyValuesTable to RTL (#51278)

* Convert KeyValuesTable to RTL

* Update data-testid

* Update data-testid

* Convert KeyValuesTable to RTL

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

.betterer.results

@@ -44,9 +44,6 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [
       [14, 26, 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/index.test.js:700147304": [
       [16, 19, 13, "RegExp match", "2409514259"]
     ],
@@ -2555,7 +2552,7 @@ exports[`better eslint`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx:1954428690": [
       [97, 35, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx:1594863792": [
+    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx:3587041872": [
       [77, 35, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx:3379895243": [
@@ -5702,7 +5699,7 @@ exports[`better eslint`] = {
       [56, 15, 3, "Unexpected any. Specify a different type.", "193409811"],
       [75, 24, 86, "Do not use any type assertions.", "2242309894"]
     ],
-    "public/app/features/explore/TraceView/TraceView.test.tsx:4208667279": [
+    "public/app/features/explore/TraceView/TraceView.test.tsx:598956578": [
       [61, 21, 79, "Do not use any type assertions.", "4192888253"],
       [65, 9, 3, "Unexpected any. Specify a different type.", "193409811"],
       [159, 18, 9, "Do not use any type assertions.", "3815122951"],

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

@@ -12,60 +12,64 @@
 // 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 CopyIcon from '../../common/CopyIcon';
-import { ubInlineBlock } from '../../uberUtilityStyles';
-
 import KeyValuesTable, { LinkValue } from './KeyValuesTable';
 
-describe('LinkValue', () => {
+const data = [
-  const title = 'titleValue';
+  { key: 'span.kind', value: 'client' },
-  const href = 'hrefValue';
+  { key: 'omg', value: 'mos-def' },
-  const childrenText = 'childrenTextValue';
+  { key: 'numericString', value: '12345678901234567890' },
-  const wrapper = shallow(
+  { key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) },
-    <LinkValue href={href} title={title}>
+];
-      {childrenText}
-    </LinkValue>
-  );
 
+const setup = (propOverrides) => {
+  const props = {
+    data: data,
+    ...propOverrides,
+  };
+  return render(<KeyValuesTable {...props} />);
+};
+
+describe('LinkValue', () => {
   it('renders as expected', () => {
-    expect(wrapper.find('a').prop('href')).toBe(href);
+    const title = 'titleValue';
-    expect(wrapper.find('a').prop('title')).toBe(title);
+    const href = 'hrefValue';
-    expect(wrapper.find('a').text()).toMatch(/childrenText/);
+    const childrenText = 'childrenTextValue';
+    render(
+      <LinkValue href={href} title={title}>
+        {childrenText}
+      </LinkValue>
+    );
+    expect(screen.getByRole('link', { name: 'titleValue' })).toBeInTheDocument();
+    expect(screen.getByText(/^childrenTextValue$/)).toBeInTheDocument();
   });
 });
 
-describe('<KeyValuesTable>', () => {
+describe('KeyValuesTable tests', () => {
-  let wrapper;
-
-  const data = [
-    { key: 'span.kind', value: 'client' },
-    { key: 'omg', value: 'mos-def' },
-    { key: 'numericString', value: '12345678901234567890' },
-    { key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) },
-  ];
-
-  beforeEach(() => {
-    wrapper = shallow(<KeyValuesTable data={data} />);
-  });
-
   it('renders without exploding', () => {
-    expect(wrapper).toBeDefined();
+    expect(() => setup()).not.toThrow();
-    expect(wrapper.find('[data-test-id="KeyValueTable"]').length).toBe(1);
   });
 
+  it('renders a table', () => {
+    setup();
+
+    expect(screen.getByTestId('KeyValueTable')).toBeInTheDocument();
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
   it('renders a table row for each data element', () => {
-    const trs = wrapper.find('tr');
+    setup();
-    expect(trs.length).toBe(data.length);
+
-    trs.forEach((tr, i) => {
+    expect(screen.getByRole('table')).toBeInTheDocument();
-      expect(tr.find('[data-test-id="KeyValueTable--keyColumn"]').text()).toMatch(data[i].key);
+    expect(screen.getAllByRole('cell')).toHaveLength(12);
-    });
+    expect(screen.getAllByTestId('KeyValueTable--keyColumn')).toHaveLength(4);
+    expect(screen.getByRole('row', { name: 'span.kind "client"' })).toBeInTheDocument();
+    expect(screen.getByRole('row', { name: 'jsonkey { "hello": "world" }' })).toBeInTheDocument();
   });
 
   it('renders a single link correctly', () => {
-    wrapper.setProps({
+    setup({
       linksGetter: (array, i) =>
         array[i].key === 'span.kind'
           ? [
@@ -77,29 +81,12 @@ describe('<KeyValuesTable>', () => {
           : [],
     });
 
-    const anchor = wrapper.find(LinkValue);
+    expect(screen.getByRole('row', { name: 'span.kind More info about client' })).toBeInTheDocument();
-    expect(anchor).toHaveLength(1);
-    expect(anchor.prop('href')).toBe('http://example.com/?kind=client');
-    expect(anchor.prop('title')).toBe('More info about client');
-    expect(anchor.closest('tr').find('td').first().text()).toBe('span.kind');
   });
 
-  it('renders a <CopyIcon /> with correct copyText for each data element', () => {
+  it('renders a <CopyIcon /> for each data element', () => {
-    const copyIcons = wrapper.find(CopyIcon);
+    setup();
-    expect(copyIcons.length).toBe(data.length);
-    copyIcons.forEach((copyIcon, i) => {
-      expect(copyIcon.prop('copyText')).toBe(JSON.stringify(data[i], null, 2));
-      expect(copyIcon.prop('tooltipTitle')).toBe('Copy JSON');
-    });
-  });
 
-  it('renders a span value containing numeric string correctly', () => {
+    expect(screen.getAllByRole('button')).toHaveLength(4);
-    const el = wrapper.find(`.${ubInlineBlock}`);
-    expect(el.length).toBe(data.length);
-    el.forEach((valueDiv, i) => {
-      if (data[i].key !== 'jsonkey') {
-        expect(valueDiv.html()).toMatch(`"${data[i].value}"`);
-      }
-    });
   });
 });

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

@@ -108,7 +108,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
   const { data, linksGetter } = props;
   const styles = useStyles2(getStyles);
   return (
-    <div className={cx(styles.KeyValueTable)} data-test-id="KeyValueTable">
+    <div className={cx(styles.KeyValueTable)} data-testid="KeyValueTable">
       <table className={uWidth100}>
         <tbody className={styles.body}>
           {data.map((row, i) => {
@@ -133,7 +133,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
             return (
               // `i` is necessary in the key because row.key can repeat
               <tr className={styles.row} key={`${row.key}-${i}`}>
-                <td className={styles.keyColumn} data-test-id="KeyValueTable--keyColumn">
+                <td className={styles.keyColumn} data-testid="KeyValueTable--keyColumn">
                   {row.key}
                 </td>
                 <td>{valueMarkup}</td>

public/app/features/explore/TraceView/TraceView.test.tsx

@@ -119,21 +119,21 @@ describe('TraceView', () => {
     const firstSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[0];
     await userEvent.click(firstSpan);
     await userEvent.click(screen.getByText(/Process/));
-    table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' });
+    table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' });
     expect(table.innerHTML).toContain('client-uuid-1');
     await userEvent.click(firstSpan);
 
     const secondSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[1];
     await userEvent.click(secondSpan);
     await userEvent.click(screen.getByText(/Process/));
-    table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' });
+    table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' });
     expect(table.innerHTML).toContain('client-uuid-2');
     await userEvent.click(secondSpan);
 
     const thirdSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[2];
     await userEvent.click(thirdSpan);
     await userEvent.click(screen.getByText(/Process/));
-    table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' });
+    table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' });
     expect(table.innerHTML).toContain('client-uuid-3');
   });