diff --git a/.betterer.results b/.betterer.results index c4ecf72cd83..e6260144960 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1,5 +1,5 @@ // BETTERER RESULTS V2. -// +// // If this file contains merge conflicts, use `betterer merge` to automatically resolve them: // https://phenomnomnominal.github.io/betterer/docs/results-file/#merge // @@ -71,9 +71,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/SpanBarRow.test.js:1451240090": [ - [14, 26, 13, "RegExp match", "2409514259"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js:2408389970": [ [14, 19, 13, "RegExp match", "2409514259"] ], @@ -98,7 +95,7 @@ exports[`no enzyme tests`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.test.js:2623922632": [ [14, 19, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js:1117377794": [ + "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js:174536706": [ [14, 19, 13, "RegExp match", "2409514259"] ], "packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.test.js:743308415": [ diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js index 4835da041e2..e584f83fcfe 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js @@ -12,24 +12,20 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { mount, shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; import SpanBarRow from './SpanBarRow'; -import { SpanLinksMenu } from './SpanLinks'; -import SpanTreeOffset from './SpanTreeOffset'; - -jest.mock('./SpanTreeOffset', () => { - // eslint-disable-next-line react/display-name - return () => SpanTreeOffset; -}); describe('', () => { const spanID = 'some-id'; const props = { + addHoverIndentGuideId: jest.fn(), className: 'a-class-name', color: 'color-a', columnDivision: '0.5', + hoverIndentGuideIds: new Set(), isChildrenExpanded: true, isDetailExpanded: false, isFilteredOut: false, @@ -51,6 +47,7 @@ describe('', () => { hasChildren: true, process: { serviceName: 'service-name', + tags: [], }, spanID, logs: [], @@ -58,33 +55,33 @@ describe('', () => { }, }; - let wrapper; - beforeEach(() => { props.onDetailToggled.mockReset(); props.onChildrenToggled.mockReset(); - wrapper = mount(); }); it('renders without exploding', () => { - expect(wrapper).toBeDefined(); + expect(() => render()).not.toThrow(); }); - it('escalates detail toggling', () => { + it('escalates detail toggling', async () => { + render(); const { onDetailToggled } = props; expect(onDetailToggled.mock.calls.length).toBe(0); - wrapper.find('div[data-test-id="span-view"]').prop('onClick')(); + await userEvent.click(screen.getByTestId('span-view')); expect(onDetailToggled.mock.calls).toEqual([[spanID]]); }); - it('escalates children toggling', () => { + it('escalates children toggling', async () => { + render(); const { onChildrenToggled } = props; expect(onChildrenToggled.mock.calls.length).toBe(0); - wrapper.find(SpanTreeOffset).prop('onClick')(); - expect(onChildrenToggled.mock.calls).toEqual([[spanID]]); + await userEvent.click(screen.getByTestId('icon-wrapper')); + expect(onChildrenToggled.mock.calls.length).toBe(1); }); it('render references button', () => { + render(); const newSpan = Object.assign({}, props.span); const span = Object.assign(newSpan, { references: [ @@ -107,7 +104,7 @@ describe('', () => { ], }); - const spanRow = shallow( + render( ', () => { traceLinks: [{ href: 'href' }, { href: 'href' }], })} /> - ) - .dive() - .dive() - .dive(); - const menu = spanRow.find(SpanLinksMenu); - expect(menu.length).toEqual(1); + ); + expect(screen.getAllByTestId('SpanLinksMenu')).toHaveLength(1); }); it('render referenced to by single span', () => { + render(); const span = Object.assign( { subsidiarilyReferencedBy: [ @@ -139,7 +133,7 @@ describe('', () => { }, props.span ); - const spanRow = shallow( + render( ', () => { traceLinks: [{ content: 'This span is referenced by another span', href: 'href' }], })} /> - ) - .dive() - .dive() - .dive(); - const menu = spanRow.find(`a[href="href"]`); - expect(menu.length).toEqual(1); - expect(menu.at(0).text()).toEqual('This span is referenced by another span'); + ); + expect(screen.getByRole('link', { name: 'This span is referenced by another span' })).toBeInTheDocument(); }); it('render referenced to by multiple span', () => { + render(); const span = Object.assign( { subsidiarilyReferencedBy: [ @@ -180,7 +170,7 @@ describe('', () => { }, props.span ); - const spanRow = shallow( + render( ', () => { traceLinks: [{ href: 'href' }, { href: 'href' }], })} /> - ) - .dive() - .dive() - .dive(); - const menu = spanRow.find(SpanLinksMenu); - expect(menu.length).toEqual(1); + ); + expect(screen.getAllByTestId('SpanLinksMenu')).toHaveLength(1); }); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx index af6948a46f0..481d34cdfc8 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx @@ -431,9 +431,9 @@ export class UnthemedSpanBarRow extends React.PureComponent { })} > { [styles.viewExpanded]: isDetailExpanded, [styles.viewExpandedAndMatchingFilter]: isMatchingFilter && isDetailExpanded, })} - data-test-id="span-view" + data-testid="span-view" style={{ cursor: 'pointer' }} width={1 - columnDivision} onClick={this._detailToggle} diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx index 27fbf1cc3fd..875c9bc2604 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx @@ -78,7 +78,7 @@ export const SpanLinksMenu = ({ links }: SpanLinksProps) => { const closeMenu = () => setIsMenuOpen(false); return ( - <> +
); }; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js index b0c69b9570e..58383f7e2b0 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js @@ -56,13 +56,13 @@ describe('SpanTreeOffset', () => { wrapper = shallow() .dive() .dive(); - const indentGuides = wrapper.find('[data-test-id="SpanTreeOffset--indentGuide"]'); + const indentGuides = wrapper.find('[data-testid="SpanTreeOffset--indentGuide"]'); expect(indentGuides.length).toBe(1); expect(indentGuides.prop('data-ancestor-id')).toBe(specialRootID); }); it('renders one .SpanTreeOffset--indentGuide per ancestor span, plus one for entire trace', () => { - const indentGuides = wrapper.find('[data-test-id="SpanTreeOffset--indentGuide"]'); + const indentGuides = wrapper.find('[data-testid="SpanTreeOffset--indentGuide"]'); expect(indentGuides.length).toBe(3); expect(indentGuides.at(0).prop('data-ancestor-id')).toBe(specialRootID); expect(indentGuides.at(1).prop('data-ancestor-id')).toBe(rootSpanID); @@ -140,13 +140,13 @@ describe('SpanTreeOffset', () => { }); it('calls props.addHoverIndentGuideId on mouse enter', () => { - wrapper.find('[data-test-id="icon-wrapper"]').simulate('mouseenter', {}); + wrapper.find('[data-testid="icon-wrapper"]').simulate('mouseenter', {}); expect(props.addHoverIndentGuideId).toHaveBeenCalledTimes(1); expect(props.addHoverIndentGuideId).toHaveBeenCalledWith(ownSpanID); }); it('calls props.removeHoverIndentGuideId on mouse leave', () => { - wrapper.find('[data-test-id="icon-wrapper"]').simulate('mouseleave', {}); + wrapper.find('[data-testid="icon-wrapper"]').simulate('mouseleave', {}); expect(props.removeHoverIndentGuideId).toHaveBeenCalledTimes(1); expect(props.removeHoverIndentGuideId).toHaveBeenCalledWith(ownSpanID); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx index 5dbc6d8aee6..cc08a5e6c22 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx @@ -149,7 +149,7 @@ export class UnthemedSpanTreeOffset extends React.PureComponent { [styles.indentGuideActive]: this.props.hoverIndentGuideIds.has(ancestorId), })} data-ancestor-id={ancestorId} - data-test-id="SpanTreeOffset--indentGuide" + data-testid="SpanTreeOffset--indentGuide" onMouseEnter={(event) => this.handleMouseEnter(event, ancestorId)} onMouseLeave={(event) => this.handleMouseLeave(event, ancestorId)} /> @@ -159,7 +159,7 @@ export class UnthemedSpanTreeOffset extends React.PureComponent { className={styles.iconWrapper} onMouseEnter={(event) => this.handleMouseEnter(event, spanID)} onMouseLeave={(event) => this.handleMouseLeave(event, spanID)} - data-test-id="icon-wrapper" + data-testid="icon-wrapper" > {icon} diff --git a/public/app/features/explore/TraceView/TraceView.test.tsx b/public/app/features/explore/TraceView/TraceView.test.tsx index 6f805b5ef8a..ac817dddce0 100644 --- a/public/app/features/explore/TraceView/TraceView.test.tsx +++ b/public/app/features/explore/TraceView/TraceView.test.tsx @@ -93,7 +93,7 @@ describe('TraceView', () => { it('toggles detailState', async () => { renderTraceViewNew(); expect(screen.queryByText(/Tags/)).toBeFalsy(); - const spanView = screen.getAllByText('', { selector: 'div[data-test-id="span-view"]' })[0]; + const spanView = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[0]; await userEvent.click(spanView); expect(screen.queryByText(/Tags/)).toBeTruthy(); @@ -114,23 +114,23 @@ describe('TraceView', () => { it('correctly shows processes for each span', async () => { renderTraceView(); let table: HTMLElement; - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(3); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); - const firstSpan = screen.getAllByText('', { selector: 'div[data-test-id="span-view"]' })[0]; + const firstSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[0]; await userEvent.click(firstSpan); await userEvent.click(screen.getByText(/Process/)); table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' }); expect(table.innerHTML).toContain('client-uuid-1'); await userEvent.click(firstSpan); - const secondSpan = screen.getAllByText('', { selector: 'div[data-test-id="span-view"]' })[1]; + const secondSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[1]; await userEvent.click(secondSpan); await userEvent.click(screen.getByText(/Process/)); table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' }); expect(table.innerHTML).toContain('client-uuid-2'); await userEvent.click(secondSpan); - const thirdSpan = screen.getAllByText('', { selector: 'div[data-test-id="span-view"]' })[2]; + const thirdSpan = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[2]; await userEvent.click(thirdSpan); await userEvent.click(screen.getByText(/Process/)); table = screen.getByText('', { selector: 'div[data-test-id="KeyValueTable"]' }); @@ -139,7 +139,7 @@ describe('TraceView', () => { it('resets detail view for new trace with the identical spanID', async () => { const { rerender } = render(getTraceView([frameOld])); - const span = screen.getAllByText('', { selector: 'div[data-test-id="span-view"]' })[2]; + const span = screen.getAllByText('', { selector: 'div[data-testid="span-view"]' })[2]; await userEvent.click(span); //Process is in detail view expect(screen.getByText(/Process/)).toBeInTheDocument(); diff --git a/public/app/features/explore/TraceView/TraceViewContainer.test.tsx b/public/app/features/explore/TraceView/TraceViewContainer.test.tsx index 959420ad7c2..19ea70aee5d 100644 --- a/public/app/features/explore/TraceView/TraceViewContainer.test.tsx +++ b/public/app/features/explore/TraceView/TraceViewContainer.test.tsx @@ -42,37 +42,37 @@ function renderTraceViewContainer(frames = [frameOld]) { describe('TraceViewContainer', () => { it('toggles children visibility', async () => { renderTraceViewContainer(); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(3); - await userEvent.click(screen.getAllByText('', { selector: 'span[data-test-id="SpanTreeOffset--indentGuide"]' })[0]); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(1); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); + await userEvent.click(screen.getAllByText('', { selector: 'span[data-testid="SpanTreeOffset--indentGuide"]' })[0]); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(1); - await userEvent.click(screen.getAllByText('', { selector: 'span[data-test-id="SpanTreeOffset--indentGuide"]' })[0]); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(3); + await userEvent.click(screen.getAllByText('', { selector: 'span[data-testid="SpanTreeOffset--indentGuide"]' })[0]); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); }); it('toggles collapses and expands one level of spans', async () => { renderTraceViewContainer(); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(3); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); await userEvent.click(screen.getByLabelText('Collapse +1')); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(2); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(2); await userEvent.click(screen.getByLabelText('Expand +1')); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(3); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); }); it('toggles collapses and expands all levels', async () => { renderTraceViewContainer(); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(3); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); await userEvent.click(screen.getByLabelText('Collapse All')); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(1); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(1); await userEvent.click(screen.getByLabelText('Expand All')); - expect(screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' }).length).toBe(3); + expect(screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' }).length).toBe(3); }); it('searches for spans', async () => { renderTraceViewContainer(); await userEvent.type(screen.getByPlaceholderText('Find...'), '1ed38015486087ca'); expect( - (screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' })[0].parentNode! as HTMLElement).className + (screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[0].parentNode! as HTMLElement).className ).toContain('rowMatchingFilter'); }); @@ -86,32 +86,32 @@ describe('TraceViewContainer', () => { await userEvent.click(nextResultButton); expect(suffix.textContent).toBe('1 of 2'); expect( - (screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' })[1].parentNode! as HTMLElement).className + (screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[1].parentNode! as HTMLElement).className ).toContain('rowFocused'); await userEvent.click(nextResultButton); expect(suffix.textContent).toBe('2 of 2'); expect( - (screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' })[2].parentNode! as HTMLElement).className + (screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[2].parentNode! as HTMLElement).className ).toContain('rowFocused'); await userEvent.click(nextResultButton); expect(suffix.textContent).toBe('1 of 2'); expect( - (screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' })[1].parentNode! as HTMLElement).className + (screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[1].parentNode! as HTMLElement).className ).toContain('rowFocused'); await userEvent.click(prevResultButton); expect(suffix.textContent).toBe('2 of 2'); expect( - (screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' })[2].parentNode! as HTMLElement).className + (screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[2].parentNode! as HTMLElement).className ).toContain('rowFocused'); await userEvent.click(prevResultButton); expect(suffix.textContent).toBe('1 of 2'); expect( - (screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' })[1].parentNode! as HTMLElement).className + (screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[1].parentNode! as HTMLElement).className ).toContain('rowFocused'); await userEvent.click(prevResultButton); expect(suffix.textContent).toBe('2 of 2'); expect( - (screen.queryAllByText('', { selector: 'div[data-test-id="span-view"]' })[2].parentNode! as HTMLElement).className + (screen.queryAllByText('', { selector: 'div[data-testid="span-view"]' })[2].parentNode! as HTMLElement).className ).toContain('rowFocused'); }); });