Migrate TraceDiffs/Header from enzyme to RTL (#1962)

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

## Description of the changes
Migrates `TraceHeader.tsx` from enzyme to RTL. Removes the snapshot
tests to relevant assertions with the help of `test-ids`.

## How was this change tested?
Running the test suite 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 <96648934+EshaanAgg@users.noreply.github.com>
Co-authored-by: Yuri Shkuro <yurishkuro@users.noreply.github.com>

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js

@@ -13,57 +13,97 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import TraceHeader, { Attrs, EmptyAttrs } from './TraceHeader';
 import { fetchedState } from '../../../constants';
 
 describe('TraceHeader', () => {
-  const props = {
-    duration: 700,
-    error: { errorKey: 'errorValue' },
-    traceID: 'trace-id',
-    traceName: 'trace name',
-  };
-  let wrapper;
+  const renderWithProps = (passedProps = {}) => {
+    const originalProps = {
+      duration: 700,
+      error: { errorKey: 'errorValue' },
+      traceID: 'trace-id',
+      traceName: 'trace name',
+    };
 
-  beforeEach(() => {
-    wrapper = shallow(<TraceHeader {...props} />);
-  });
+    const props = {
+      ...originalProps,
+      ...passedProps,
+    };
+
+    render(<TraceHeader {...props} />);
+  };
 
   it('renders as expected', () => {
-    expect(wrapper).toMatchSnapshot();
+    renderWithProps();
+
+    expect(screen.getAllByTestId('TraceDiffHeader--traceHeader').length).toBe(1);
   });
 
-  it('renders populated attrs component when props.state === fetchedState.DONE', () => {
-    wrapper.setProps({
+  it('renders populated Attrs component when props.state === fetchedState.DONE', () => {
+    renderWithProps({
       startTime: 150,
       totalSpans: 50,
       state: fetchedState.DONE,
     });
-    expect(wrapper).toMatchSnapshot();
+
+    expect(screen.getByTestId('TraceDiffHeader--traceAttributes'));
+    expect(screen.getByTestId('TraceDiffHeader--traceAttr--date'));
+    expect(screen.getByTestId('TraceDiffHeader--traceAttr--duration'));
+    expect(screen.getByTestId('TraceDiffHeader--traceAttr--spans'));
+
+    expect(() => screen.getByTestId('TraceDiffHeader--emptyTraceAttributes')).toThrow();
+  });
+
+  it('renders populated EmptyAttrs component when props.state !== fetchedState.DONE', () => {
+    renderWithProps({
+      startTime: 150,
+      totalSpans: 50,
+      state: fetchedState.LOADING,
+    });
+
+    expect(screen.getByTestId('TraceDiffHeader--emptyTraceAttributes'));
+    expect(() => screen.getByTestId('TraceDiffHeader--traceAttributes')).toThrow();
   });
 
   it('renders "Select a Trace..." when props.traceID is not provided ', () => {
-    wrapper.setProps({
+    renderWithProps({
       traceID: null,
     });
-    expect(wrapper.find('.u-tx-muted').text()).toBe('Select a Trace...');
+
+    expect(screen.getByText('Select a Trace...'));
   });
 
   describe('EmptyAttrs', () => {
     it('renders as expected', () => {
-      expect(shallow(<EmptyAttrs />)).toMatchSnapshot();
+      render(<EmptyAttrs />);
+
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--empty'));
     });
   });
 
   describe('Attrs', () => {
     it('renders as expected when provided props', () => {
-      expect(shallow(<Attrs duration={700} startTime={150} totalSpans={50} />)).toMatchSnapshot();
+      // Represents a minute in microseconds
+      const ONE_MINUTE = 60 * 10 ** 6;
+
+      render(<Attrs duration={700} startTime={ONE_MINUTE} totalSpans={50} />);
+
+      // Test that the shown values are correctly formatted
+      expect(screen.getByText('January 1, 1970, 12:01:00 am'));
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--duration').textContent).toBe('700μs');
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--spans').textContent).toBe('50');
     });
 
     it('Attrs renders as expected when missing props', () => {
-      expect(shallow(<Attrs />)).toMatchSnapshot();
+      render(<Attrs />);
+
+      // Test that the default values are correctly
+      expect(screen.getByText('January 1, 1970, 12:00:00 am'));
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--duration').textContent).toBe('0μs');
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr--spans').textContent).toBe('0');
     });
   });
 });

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx

@@ -45,8 +45,10 @@ type AttrsProps = {
 // exported for tests
 export function EmptyAttrs() {
   return (
-    <ul className="TraecDiffHeader--traceAttributes">
-      <li className="TraecDiffHeader--traceAttr">&nbsp;</li>
+    <ul className="TraceDiffHeader--traceAttributes" data-testid="TraceDiffHeader--emptyTraceAttributes">
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr--empty">
+        &nbsp;
+      </li>
     </ul>
   );
 }
@@ -55,18 +57,19 @@ export function EmptyAttrs() {
 export function Attrs(props: AttrsProps) {
   const { startTime, duration, totalSpans } = props;
   return (
-    <ul className="TraecDiffHeader--traceAttributes">
-      <li className="TraecDiffHeader--traceAttr">
-        <strong>
+    <ul className="TraceDiffHeader--traceAttributes" data-testid="TraceDiffHeader--traceAttributes">
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr">
+        <strong data-testid="TraceDiffHeader--traceAttr--date">
           <RelativeDate value={(startTime || 0) / 1000} includeTime fullMonthName />
         </strong>
       </li>
-      <li className="TraecDiffHeader--traceAttr">
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr">
         <span className="u-tx-muted">Duration: </span>
-        <strong>{formatDuration(duration || 0)}</strong>
+        <strong data-testid="TraceDiffHeader--traceAttr--duration">{formatDuration(duration || 0)}</strong>
       </li>
-      <li className="TraecDiffHeader--traceAttr">
-        <span className="u-tx-muted">Spans: </span> <strong>{totalSpans || 0}</strong>
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr">
+        <span className="u-tx-muted">Spans: </span>{' '}
+        <strong data-testid="TraceDiffHeader--traceAttr--spans">{totalSpans || 0}</strong>
       </li>
     </ul>
   );
@@ -75,9 +78,10 @@ export function Attrs(props: AttrsProps) {
 export default function TraceHeader(props: Props) {
   const { duration, error, startTime, state, traceID, totalSpans, traceName } = props;
   const AttrsComponent = state === fetchedState.DONE ? Attrs : EmptyAttrs;
+
   return (
-    <div className="TraecDiffHeader--traceHeader">
-      <h1 className="TraecDiffHeader--traceTitle">
+    <div className="TraceDiffHeader--traceHeader" data-testid="TraceDiffHeader--traceHeader">
+      <h1 className="TraceDiffHeader--traceTitle">
         <span>
           {traceID ? (
             <React.Fragment>
@@ -91,7 +95,7 @@ export default function TraceHeader(props: Props) {
             <span className="u-tx-muted">Select a Trace...</span>
           )}
         </span>
-        <IoChevronDown className="TraecDiffHeader--traceTitleChevron" />
+        <IoChevronDown className="TraceDiffHeader--traceTitleChevron" />
       </h1>
       <AttrsComponent startTime={startTime} duration={duration} totalSpans={totalSpans} />
     </div>