refac: migrate TraceHeader from enzyme to RTL

jaegertracing · Nov 10, 2023 · 6b2dc84 · 6b2dc84
1 parent 2821fdb
commit 6b2dc84
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 218 deletions.
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js
@@ -13,57 +13,77 @@
 // 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;
+  describe(`TraceHeader`, () => {
+    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,
+      };
 
-  it('renders as expected', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+      render(<TraceHeader {...props} />);
+    };
 
-  it('renders populated attrs component when props.state === fetchedState.DONE', () => {
-    wrapper.setProps({
-      startTime: 150,
-      totalSpans: 50,
-      state: fetchedState.DONE,
+    it('renders as expected', () => {
+      renderWithProps({});
+      expect(screen.getAllByTestId('TraceDiffHeader--traceHeader').length).toBe(1);
     });
-    expect(wrapper).toMatchSnapshot();
-  });
 
-  it('renders "Select a Trace..." when props.traceID is not provided ', () => {
-    wrapper.setProps({
-      traceID: null,
+    it('renders populated Attrs component when props.state === fetchedState.DONE', () => {
+      renderWithProps({
+        startTime: 150,
+        totalSpans: 50,
+        state: fetchedState.DONE,
+      });
+      expect(screen.getAllByTestId('TraceDiffHeader--traceAttr').length).toBe(3);
+    });
+
+    it('renders "Select a Trace..." when props.traceID is not provided ', () => {
+      renderWithProps({
+        traceID: null,
+      });
+      expect(screen.getByText('Select a Trace...'));
     });
-    expect(wrapper.find('.u-tx-muted').text()).toBe('Select a Trace...');
   });
 
   describe('EmptyAttrs', () => {
     it('renders as expected', () => {
-      expect(shallow(<EmptyAttrs />)).toMatchSnapshot();
+      render(<EmptyAttrs />);
+      expect(screen.getAllByTestId('TraceDiffHeader--traceAttr').length).toBe(1);
+      expect(screen.getByTestId('TraceDiffHeader--traceAttr').textContent.trim()).toBe('');
     });
   });
 
   describe('Attrs', () => {
     it('renders as expected when provided props', () => {
-      expect(shallow(<Attrs duration={700} startTime={150} totalSpans={50} />)).toMatchSnapshot();
+      render(<Attrs duration={700} startTime={150} totalSpans={50} />);
+
+      // Test that the shown values are correctly formatted
+      expect(screen.getByText('January 1, 1970, 12:00: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');
     });
   });
 });
diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx b/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">
+      <li className="TraceDiffHeader--traceAttr" data-testid="TraceDiffHeader--traceAttr">
+        &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">
+      <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>

diff --git a/...jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap b/...jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap