[tests] Remove enzyme from QualityMetrics tests (#1684)

## Which problem is this PR solving?  
- part of #1668 
- migrating the existing Enzyme based tests to React Testing Libary

## Description of the changes
Currently I migrated 3 files 
- `QualityMetrics/BannerText.test.js`
- `QualityMetrics/CountCard.test.js`

## How was this change tested?
- replaced the shallow module from enzyme to render from RTL

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [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: Freedisch <freeproduc@gmail.com>
Signed-off-by: Freedisch <freeproduc@gamil.com>
Co-authored-by: Freedisch <freeproduc@gamil.com>

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

@@ -13,32 +13,35 @@
 // 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 BannerText from './BannerText';
 
 describe('BannerText', () => {
   it('renders null when props.bannerText is falsy', () => {
-    expect(shallow(<BannerText />).type()).toBe(null);
+    const { container } = render(<BannerText />);
+    expect(container.firstChild).toBe(null);
   });
 
   it('renders header when props.bannerText is a string', () => {
-    expect(shallow(<BannerText bannerText="foo text" />)).toMatchSnapshot();
+    render(<BannerText bannerText="foo text" />);
+    expect(screen.getByText('foo text')).toBeInTheDocument();
   });
 
   it('renders styled header when props.bannerText is a styled value', () => {
-    expect(
-      shallow(
-        <BannerText
-          bannerText={{
-            styling: {
-              background: 'red',
-              color: 'white',
-            },
-            value: 'foo text',
-          }}
-        />
-      )
-    ).toMatchSnapshot();
+    render(
+      <BannerText
+        bannerText={{
+          styling: {
+            background: 'red',
+            color: 'white',
+          },
+          value: 'foo text',
+        }}
+      />
+    );
+
+    expect(screen.getByText('foo text')).toBeInTheDocument();
+    expect(screen.getByText('foo text')).toHaveStyle('background: red; color: white;');
   });
 });

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

@@ -13,24 +13,34 @@
 // 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 CountCard from './CountCard';
 
 describe('CountCard', () => {
   const count = 108;
   const title = 'Test Title';
+  const examples = ['Examples'];
 
   it('renders null when props.count or props.title is absent', () => {
-    expect(shallow(<CountCard count={count} />).type()).toBe(null);
-    expect(shallow(<CountCard title={title} />).type()).toBe(null);
+    const { container: containerWithoutTitle } = render(<CountCard count={count} />);
+    expect(containerWithoutTitle.firstChild).toBe(null);
+    const { container: containerWithoutCount } = render(<CountCard title={title} />);
+    expect(containerWithoutCount.firstChild).toBe(null);
   });
 
   it('renders as expected when given count and title', () => {
-    expect(shallow(<CountCard count={count} title={title} />)).toMatchSnapshot();
+    render(<CountCard count={count} title={title} />);
+
+    expect(screen.getByText(count)).toBeInTheDocument();
+    expect(screen.getByText(title)).toBeInTheDocument();
   });
 
   it('renders as expected when given count, title, and examples', () => {
-    expect(shallow(<CountCard count={count} title={title} examples={['foo']} />)).toMatchSnapshot();
+    render(<CountCard count={count} title={title} examples={examples} />);
+
+    expect(screen.getByText(count)).toBeInTheDocument();
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(screen.getByText(examples[0])).toBeInTheDocument();
   });
 });