[QualityMetrics/MetricCard] Migrate enzyme tests to RTL (#2602)

## Which problem is this PR solving?
- Partially addresses #1668

## Description of the changes
- This PR migrates
`packages/jaeger-ui/src/components/QualityMetrics/MetricCard.test.js`
from enzyme to RTL.
- I've updated the **MetricCard** to use `arrow={{ pointAtCenter: true
}}` as `arrowPointAtCenter` is deprecated.

## How was this change tested?
- By running `npm run test` after updating snapshots

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [ ] 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`: `npm run lint` and `npm run test`

---------

Signed-off-by: Tanvi Pooranmal Meena <[email protected]>
Signed-off-by: Tanvi Pooranmal Meena <[email protected]>

Author: tanvincible

packages/jaeger-ui/src/components/QualityMetrics/MetricCard.test.js

@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import MetricCard from './MetricCard';
 
 describe('MetricCard', () => {
@@ -63,42 +63,27 @@ describe('MetricCard', () => {
   ];
 
   it('renders as expected without details', () => {
-    expect(shallow(<MetricCard metric={metric} />)).toMatchSnapshot();
-    expect(
-      shallow(
-        <MetricCard
-          metric={{
-            ...metric,
-            details: details.slice(0, 2),
-          }}
-        />
-      )
-    ).toMatchSnapshot();
+    const { container } = render(<MetricCard metric={metric} />);
+    expect(screen.getByText('Metric Name')).toBeInTheDocument();
+    expect(screen.getByText('Metric Description')).toBeInTheDocument();
+    expect(container.querySelector('.MetricCard--Details')).not.toBeInTheDocument();
   });
 
   it('renders as expected with details', () => {
-    expect(
-      shallow(
-        <MetricCard
-          metric={{
-            ...metric,
-            details,
-          }}
-        />
-      )
-    ).toMatchSnapshot();
+    render(<MetricCard metric={{ ...metric, details }} />);
+    expect(screen.getByText(metric.name)).toBeInTheDocument();
+    expect(screen.getByText(metric.description)).toBeInTheDocument();
+    details.forEach(detail => {
+      if (detail.rows && detail.rows.length) {
+        expect(screen.getByText(detail.description)).toBeInTheDocument();
+      }
+    });
   });
 
   it('renders as expected when passCount is zero', () => {
-    expect(
-      shallow(
-        <MetricCard
-          metric={{
-            ...metric,
-            passCount: 0,
-          }}
-        />
-      )
-    ).toMatchSnapshot();
+    render(<MetricCard metric={{ ...metric, passCount: 0 }} />);
+    expect(screen.getByText('Metric Name')).toBeInTheDocument();
+    expect(screen.getByText('0.0%')).toBeInTheDocument();
+    expect(screen.getByText('Passing')).toBeInTheDocument();
   });
 });

packages/jaeger-ui/src/components/QualityMetrics/MetricCard.tsx

@@ -63,7 +63,7 @@ export default class MetricCard extends React.PureComponent<TProps> {
         <div className="MetricCard--Body">
           <span className="MetricCard--TitleHeader">
             {name}{' '}
-            <Tooltip arrowPointAtCenter title="Metric Documentation">
+            <Tooltip arrow={{ pointAtCenter: true }} title="Metric Documentation">
               <a href={metricDocumentationLink} target="_blank" rel="noreferrer noopener">
                 <NewWindowIcon />
               </a>