refac: migrate ExamplesLink and EmphasizedNode components from en…

…zyme to RTL (#2066)

## Which problem is this PR solving?
Fixes part of #1668 

## Description of the changes
- Migrates `ExamplesLink` and `EmphasizedNode` components from enzyme to
RTL
- Replaces snapshot testing with actual test for the URLs

## How was this change tested?
Running the tests locally

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

Signed-off-by: Eshaan Aggarwal <[email protected]>

packages/jaeger-ui/src/components/common/EmphasizedNode.test.js

@@ -13,23 +13,25 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import EmphasizedNode from './EmphasizedNode';
+import '@testing-library/jest-dom';
 
 describe('<EmphasizedNode>', () => {
-  let wrapper;
-  let defaultProps;
+  const defaultProps = {
+    height: 100,
+    width: 500,
+  };
 
-  beforeEach(() => {
-    defaultProps = {
-      height: 100,
-      width: 500,
-    };
+  it('renders with default props', () => {
+    const { container } = render(<EmphasizedNode {...defaultProps} />);
 
-    wrapper = shallow(<EmphasizedNode {...defaultProps} />);
-  });
+    const recElements = container.querySelectorAll('rect');
 
-  it('renders with default props', () => {
-    expect(wrapper).toMatchSnapshot();
+    expect(recElements.length).toBe(4);
+    recElements.forEach(element => {
+      expect(element).toHaveAttribute('height', defaultProps.height.toString());
+      expect(element).toHaveAttribute('width', defaultProps.width.toString());
+    });
   });
 });

packages/jaeger-ui/src/components/common/EmphasizedNode.tsx

@@ -25,7 +25,7 @@ export default class EmphasizedNode extends React.PureComponent<Props> {
   render() {
     const { height, width } = this.props;
     return (
-      <>
+      <svg>
         <rect
           className="EmphasizedNode--contrast is-non-scaling"
           vectorEffect="non-scaling-stroke"
@@ -40,7 +40,7 @@ export default class EmphasizedNode extends React.PureComponent<Props> {
           height={height}
         />
         <rect className="EmphasizedNode is-scaling" width={width} height={height} />
-      </>
+      </svg>
     );
   }
 }

packages/jaeger-ui/src/components/common/ExamplesLink.test.js

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import ExamplesLink from './ExamplesLink';
 
@@ -25,45 +26,49 @@ describe('ExamplesLink', () => {
     {
       traceID: 'bar',
     },
-    {
-      traceID: 'baz',
-    },
   ];
+
   const spanLinks = traceLinks.map(({ traceID }, i) => ({
     traceID: `${traceID}${i}`,
     spanIDs: new Array(i + 1).fill('spanID').map((str, j) => `${str}${i}${j}`),
   }));
 
+  const expectedTraceParams = 'traceID=foo&traceID=bar';
+  const expectedSpanParams = 'span=spanID00%40foo0&span=spanID10%20spanID11%40bar1';
+
   it('renders null when props.examples is absent', () => {
-    expect(shallow(<ExamplesLink />).type()).toBe(null);
+    render(<ExamplesLink />);
+    expect(screen.queryByRole('link')).toBeNull();
   });
 
   it('renders null when props.examples is empty', () => {
-    expect(shallow(<ExamplesLink examples={[]} />).type()).toBe(null);
+    render(<ExamplesLink examples={[]} />);
+    expect(screen.queryByRole('link')).toBeNull();
   });
 
-  it('renders as expected when given trace links', () => {
-    expect(shallow(<ExamplesLink examples={traceLinks} />)).toMatchSnapshot();
+  it('renders correctly when given trace links', () => {
+    render(<ExamplesLink examples={traceLinks} />);
+    expect(screen.getByRole('link')).toHaveAttribute('href', `/search?${expectedTraceParams}`);
   });
 
   it('renders as expected when given span links', () => {
-    expect(shallow(<ExamplesLink examples={spanLinks} />)).toMatchSnapshot();
+    render(<ExamplesLink examples={spanLinks} />);
+    expect(screen.getByRole('link')).toHaveAttribute('href', `/search?${expectedSpanParams}`);
   });
 
   it('renders as expected when given both span and trace links', () => {
-    expect(shallow(<ExamplesLink examples={spanLinks.concat(traceLinks)} />)).toMatchSnapshot();
+    render(<ExamplesLink examples={spanLinks.concat(traceLinks)} />);
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      `/search?${expectedSpanParams}&${expectedTraceParams}`
+    );
   });
 
   it('renders label text iff props.includeText is true', () => {
-    expect(
-      shallow(<ExamplesLink examples={traceLinks} />)
-        .find('a')
-        .props().children[0]
-    ).toBe(undefined);
-    expect(
-      shallow(<ExamplesLink examples={traceLinks} includeText />)
-        .find('a')
-        .props().children[0]
-    ).toBe('Examples ');
+    render(<ExamplesLink examples={traceLinks} />);
+    expect(screen.queryByText('Examples')).toBeNull();
+
+    render(<ExamplesLink examples={traceLinks} includeText />);
+    expect(screen.getByText('Examples')).toBeInTheDocument();
   });
 });

packages/jaeger-ui/src/components/common/ExamplesLink.tsx

@@ -39,10 +39,12 @@ function hasSpans(example: TExample | TExampleWithSpans): example is TExampleWit
 function getGetUrlArg(examples: TExample[]): { spanLinks: Record<string, string>; traceID: string[] } {
   const spanLinks: Record<string, string> = {};
   const traceID: string[] = [];
+
   examples.forEach((example: TExample) => {
     if (hasSpans(example)) spanLinks[example.traceID] = example.spanIDs.join(' ');
     else traceID.push(example.traceID);
   });
+
   return {
     spanLinks,
     traceID,