From fe5416508a34fdda5427a46710b723bddd605c7d Mon Sep 17 00:00:00 2001 From: Seyaji <67058118+Seyaji@users.noreply.github.com> Date: Wed, 22 Jun 2022 17:46:36 +0100 Subject: [PATCH] Chore: Convert TracePageHeader test to RTL (#51216) * Convert TracePageHeader test to RTL * Convert TracePageHeader test to RTL * Convert TracePageHeader test to RTL --- .betterer.results | 3 - .../TracePageHeader/TracePageHeader.test.js | 115 ++++++++++++------ 2 files changed, 80 insertions(+), 38 deletions(-) diff --git a/.betterer.results b/.betterer.results index 00e24807afa..10d830aecf2 100644 --- a/.betterer.results +++ b/.betterer.results @@ -44,9 +44,6 @@ exports[`no enzyme tests`] = { "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.js:186764954": [ [14, 19, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js:3242042907": [ - [14, 26, 13, "RegExp match", "2409514259"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [ [14, 26, 13, "RegExp match", "2409514259"] ], diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js index e5542b5ea76..bb6955051dd 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js @@ -12,75 +12,120 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { shallow, mount } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import React from 'react'; -import LabeledList from '../common/LabeledList'; import traceGenerator from '../demo/trace-generators'; import { getTraceName } from '../model/trace-viewer'; import transformTraceData from '../model/transform-trace-data'; -import SpanGraph from './SpanGraph'; -import TracePageHeader, { HEADER_ITEMS } from './TracePageHeader'; +import TracePageHeader from './TracePageHeader'; -describe('', () => { - const trace = transformTraceData(traceGenerator.trace({})); +const trace = transformTraceData(traceGenerator.trace({})); +const setup = (propOverrides) => { const defaultProps = { trace, + hideMap: false, showArchiveButton: false, showShortcutsHelp: false, showStandaloneLink: false, showViewOptions: false, textFilter: '', + viewRange: { time: { current: [10, 20] } }, updateTextFilter: () => {}, + ...propOverrides, }; - let wrapper; + return render(); +}; - beforeEach(() => { - wrapper = shallow(); +describe('TracePageHeader test', () => { + it('should render a header ', () => { + setup(); + + expect(screen.getByRole('banner')).toBeInTheDocument(); }); - it('renders a
', () => { - expect(wrapper.find('header').length).toBe(1); + it('should render nothing if a trace is not present', () => { + setup({ trace: null }); + + expect(screen.queryByRole('banner')).not.toBeInTheDocument(); + expect(screen.queryByRole('heading', { traceName: getTraceName(trace.spans) })).not.toBeInTheDocument(); + expect(screen.queryAllByRole('listitem')).toHaveLength(0); + expect(screen.queryByText(/Reset Selection/)).not.toBeInTheDocument(); }); - it('renders an empty
if a trace is not present', () => { - wrapper = mount(); - expect(wrapper.children().length).toBe(0); + it('should render the trace title', () => { + setup(); + + expect(screen.getByRole('heading', { traceName: getTraceName(trace.spans) })).toBeInTheDocument(); }); - it('renders the trace title', () => { - expect(wrapper.find({ traceName: getTraceName(trace.spans) })).toBeTruthy(); + it('should render the header items', () => { + setup(); + + const headerItems = screen.queryAllByRole('listitem'); + + expect(headerItems).toHaveLength(5); + // Year-month-day hour-minute-second + expect(headerItems[0].textContent.match(/Trace Start:\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\.\d{3}/g)).toBeTruthy(); + expect(headerItems[1].textContent.match(/Duration:[\d|\.][\.|\d|s][\.|\d|s]?[\d]?/)).toBeTruthy(); + expect(headerItems[2].textContent.match(/Services:\d\d?/g)).toBeTruthy(); + expect(headerItems[3].textContent.match(/Depth:\d\d?/)).toBeTruthy(); + expect(headerItems[4].textContent.match(/Total Spans:\d\d?\d?\d?/)).toBeTruthy(); }); - it('renders the header items', () => { - wrapper.find('.horizontal .item').forEach((item, i) => { - expect(item.contains(HEADER_ITEMS[i].title)).toBeTruthy(); - expect(item.contains(HEADER_ITEMS[i].renderer(defaultProps.trace))).toBeTruthy(); - }); - }); + it('should render a ', () => { + setup(); - it('renders start time in header with millisecond precision', () => { - const startTimeMs = wrapper.find(LabeledList).props().items[0].value.props.children[1].props.children; - expect(startTimeMs).toMatch(/:\d\d\.\d\d\d/g); - }); - - it('renders a ', () => { - expect(wrapper.find(SpanGraph).length).toBe(1); + expect(screen.getByText(/Reset Selection/)).toBeInTheDocument(); }); describe('observes the visibility toggles for various UX elements', () => { it('hides the minimap when hideMap === true', () => { - expect(wrapper.find(SpanGraph).length).toBe(1); - wrapper.setProps({ hideMap: true }); - expect(wrapper.find(SpanGraph).length).toBe(0); + setup({ hideMap: true }); + + expect(screen.queryByText(/Reset Selection/)).not.toBeInTheDocument(); }); it('hides the summary when hideSummary === true', () => { - expect(wrapper.find(LabeledList).length).toBe(1); - wrapper.setProps({ hideSummary: true }); - expect(wrapper.find(LabeledList).length).toBe(0); + const { rerender } = setup({ hideSummary: false }); + expect(screen.queryAllByRole('listitem')).toHaveLength(5); + + rerender(); + expect(screen.queryAllByRole('listitem')).toHaveLength(0); + + rerender( + {}} + /> + ); + expect(screen.queryAllByRole('listitem')).toHaveLength(0); + + rerender( + {}} + /> + ); + expect(screen.queryAllByRole('listitem')).toHaveLength(5); }); }); });