From f2b06abb330c1dd1c2767730a59af44f2fd1adba Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Mon, 3 Oct 2022 10:22:50 +0100 Subject: [PATCH] Convert SpanDetail/index.test.js to RTL (#56019) --- .betterer.results | 3 - .../SpanDetail/index.test.js | 87 ++++++++----------- 2 files changed, 35 insertions(+), 55 deletions(-) diff --git a/.betterer.results b/.betterer.results index 65b9dce1476..e8f91a1b754 100644 --- a/.betterer.results +++ b/.betterer.results @@ -29,9 +29,6 @@ exports[`no enzyme tests`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [ [14, 26, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js:1241675783": [ - [16, 19, 13, "RegExp match", "2409514259"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js:174536706": [ [14, 19, 13, "RegExp match", "2409514259"] ], diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js index b9423169915..70f74c92848 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js @@ -14,23 +14,19 @@ jest.mock('../utils'); -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; -import LabeledList from '../../common/LabeledList'; import traceGenerator from '../../demo/trace-generators'; import transformTraceData from '../../model/transform-trace-data'; import { formatDuration } from '../utils'; -import AccordianKeyValues from './AccordianKeyValues'; -import AccordianLogs from './AccordianLogs'; import DetailState from './DetailState'; import SpanDetail, { getAbsoluteTime } from './index'; describe('', () => { - let wrapper; - // use `transformTraceData` on a fake trace to get a fully processed span const span = transformTraceData(traceGenerator.trace({ numberOfSpans: 1 })).spans[0]; const detailState = new DetailState().toggleLogs().toggleProcess().toggleReferences().toggleTags(); @@ -47,7 +43,7 @@ describe('', () => { tagsToggle: jest.fn(), warningsToggle: jest.fn(), referencesToggle: jest.fn(), - createFocusSpanLink: jest.fn(), + createFocusSpanLink: jest.fn().mockReturnValue({}), topOfViewRefType: 'Explore', }; span.logs = [ @@ -117,81 +113,68 @@ describe('', () => { props.processToggle.mockReset(); props.logsToggle.mockReset(); props.logItemToggle.mockReset(); - wrapper = shallow(); }); it('renders without exploding', () => { - expect(wrapper).toBeDefined(); + expect(() => render()).not.toThrow(); }); it('shows the operation name', () => { - expect(wrapper.find('h2').text()).toBe(span.operationName); + render(); + expect(screen.getByRole('heading', { name: span.operationName })).toBeInTheDocument(); }); it('lists the service name, duration and start time', () => { - const words = ['Duration:', 'Service:', 'Start Time:']; - const overview = wrapper.find(LabeledList); - expect( - overview - .prop('items') - .map((item) => item.label) - .sort() - ).toEqual(words); + render(); + expect(screen.getByText('Duration:')).toBeInTheDocument(); + expect(screen.getByText('Service:')).toBeInTheDocument(); + expect(screen.getByText('Start Time:')).toBeInTheDocument(); }); it('start time shows the absolute time', () => { - const startTime = wrapper.find(LabeledList).prop('items')[2].value; + render(); const absoluteTime = getAbsoluteTime(span.startTime); - expect(startTime).toContain(absoluteTime); + expect( + screen.getByText((text) => { + return text.includes(absoluteTime); + }) + ).toBeInTheDocument(); }); - it('renders the span tags', () => { - const target = ; - expect(wrapper.containsMatchingElement(target)).toBe(true); - wrapper.find({ data: span.tags }).simulate('toggle'); + it('renders the span tags', async () => { + render(); + await userEvent.click(screen.getByRole('switch', { name: /Attributes/ })); expect(props.tagsToggle).toHaveBeenLastCalledWith(span.spanID); }); - it('renders the process tags', () => { - const target = ; - expect(wrapper.containsMatchingElement(target)).toBe(true); - wrapper.find({ data: span.process.tags }).simulate('toggle'); + it('renders the process tags', async () => { + render(); + await userEvent.click(screen.getByRole('switch', { name: /Resource/ })); expect(props.processToggle).toHaveBeenLastCalledWith(span.spanID); }); - it('renders the logs', () => { - const somethingUniq = {}; - const target = ( - - ); - expect(wrapper.containsMatchingElement(target)).toBe(true); - const accordianLogs = wrapper.find(AccordianLogs); - accordianLogs.simulate('toggle'); - accordianLogs.simulate('itemToggle', somethingUniq); + it('renders the logs', async () => { + render(); + await userEvent.click(screen.getByRole('switch', { name: /Events/ })); expect(props.logsToggle).toHaveBeenLastCalledWith(span.spanID); - expect(props.logItemToggle).toHaveBeenLastCalledWith(span.spanID, somethingUniq); + await userEvent.click(screen.getByRole('switch', { name: /oh the log/ })); + expect(props.logItemToggle).toHaveBeenLastCalledWith(span.spanID, props.span.logs[0]); }); - it('renders the warnings', () => { - const warningElm = wrapper.find({ data: span.warnings }); - expect(warningElm.length).toBe(1); - warningElm.simulate('toggle'); + it('renders the warnings', async () => { + render(); + await userEvent.click(screen.getByRole('switch', { name: /Warnings/ })); expect(props.warningsToggle).toHaveBeenLastCalledWith(span.spanID); }); - it('renders the references', () => { - const refElem = wrapper.find({ data: span.references }); - expect(refElem.length).toBe(1); - refElem.simulate('toggle'); + it('renders the references', async () => { + render(); + await userEvent.click(screen.getByRole('switch', { name: /References/ })); expect(props.referencesToggle).toHaveBeenLastCalledWith(span.spanID); }); it('renders deep link URL', () => { - expect(wrapper.find('a').exists()).toBeTruthy(); + render(); + expect(document.getElementsByTagName('a').length).toBeGreaterThan(1); }); });