From 8b0f82ad7d931739717221dfc3b174ae464fc120 Mon Sep 17 00:00:00 2001 From: Eshaan Aggarwal <96648934+EshaanAgg@users.noreply.github.com> Date: Sun, 12 Nov 2023 09:27:05 +0530 Subject: [PATCH] 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 --- .../TraceDiffHeader/TraceHeader.test.js | 80 ++++++-- .../TraceDiff/TraceDiffHeader/TraceHeader.tsx | 28 +-- .../__snapshots__/TraceHeader.test.js.snap | 178 ------------------ 3 files changed, 76 insertions(+), 210 deletions(-) delete mode 100644 packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.test.js index 90f75c0204..248a615992 100644 --- 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,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(); - }); + const props = { + ...originalProps, + ...passedProps, + }; + + render(); + }; 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()).toMatchSnapshot(); + render(); + + expect(screen.getByTestId('TraceDiffHeader--traceAttr--empty')); }); }); describe('Attrs', () => { it('renders as expected when provided props', () => { - expect(shallow()).toMatchSnapshot(); + // Represents a minute in microseconds + const ONE_MINUTE = 60 * 10 ** 6; + + render(); + + // 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()).toMatchSnapshot(); + render(); + + // 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 index d54c50ffd8..5baba664bb 100644 --- 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 ( -
    -
  •  
    • +
      +
    • +   +
    ); } @@ -55,18 +57,19 @@ export function EmptyAttrs() { export function Attrs(props: AttrsProps) { const { startTime, duration, totalSpans } = props; return ( -
      -
    • - +
        +
      • +
        • -
      • +
      • Duration: - {formatDuration(duration || 0)} + {formatDuration(duration || 0)}
        • -
      • - Spans: {totalSpans || 0} +
      • + Spans: {' '} + {totalSpans || 0}
      ); @@ -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 ( -
      -

      +
      +

      {traceID ? ( @@ -91,7 +95,7 @@ export default function TraceHeader(props: Props) { Select a Trace... )} - +

      diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap deleted file mode 100644 index 6cd72265c0..0000000000 --- a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/__snapshots__/TraceHeader.test.js.snap +++ /dev/null @@ -1,178 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TraceHeader Attrs Attrs renders as expected when missing props 1`] = ` -
        -
      • - - - -
        • -
      • - - Duration: - - - 0μs - -
        • -
      • - - Spans: - - - - 0 - -
        • -
      -`; - -exports[`TraceHeader Attrs renders as expected when provided props 1`] = ` -
        -
      • - - - -
        • -
      • - - Duration: - - - 700μs - -
        • -
      • - - Spans: - - - - 50 - -
        • -
      -`; - -exports[`TraceHeader EmptyAttrs renders as expected 1`] = ` -
        -
      • -   -
        • -
      -`; - -exports[`TraceHeader renders as expected 1`] = ` -
      -

      - - - - - trace-i - - - - -

      - -
      -`; - -exports[`TraceHeader renders populated attrs component when props.state === fetchedState.DONE 1`] = ` -
      -

      - - - - - trace-i - - - - -

      - -
      -`;