Convert packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js to RTL (#49119)

* convert SpanBarRow tests to RTL

* remove comments

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* Update packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>

* fix and replace

* fix last test

Co-authored-by: Ashley Harrison <ashharrison90@gmail.com>
Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Chrysa Dikonimaki 2022-05-18 18:18:24 +02:00 committed by GitHub
parent 887adc3d9b
commit a113fcaca3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 61 additions and 78 deletions

View File

@ -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": [

View File

@ -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 () => <span>SpanTreeOffset</span>;
});
describe('<SpanBarRow>', () => {
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('<SpanBarRow>', () => {
hasChildren: true,
process: {
serviceName: 'service-name',
tags: [],
},
spanID,
logs: [],
@ -58,33 +55,33 @@ describe('<SpanBarRow>', () => {
},
};
let wrapper;
beforeEach(() => {
props.onDetailToggled.mockReset();
props.onChildrenToggled.mockReset();
wrapper = mount(<SpanBarRow {...props} />);
});
it('renders without exploding', () => {
expect(wrapper).toBeDefined();
expect(() => render(<SpanBarRow {...props} />)).not.toThrow();
});
it('escalates detail toggling', () => {
it('escalates detail toggling', async () => {
render(<SpanBarRow {...props} />);
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(<SpanBarRow {...props} />);
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(<SpanBarRow {...props} />);
const newSpan = Object.assign({}, props.span);
const span = Object.assign(newSpan, {
references: [
@ -107,7 +104,7 @@ describe('<SpanBarRow>', () => {
],
});
const spanRow = shallow(
render(
<SpanBarRow
{...props}
span={span}
@ -115,15 +112,12 @@ describe('<SpanBarRow>', () => {
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(<SpanBarRow {...props} />);
const span = Object.assign(
{
subsidiarilyReferencedBy: [
@ -139,7 +133,7 @@ describe('<SpanBarRow>', () => {
},
props.span
);
const spanRow = shallow(
render(
<SpanBarRow
{...props}
span={span}
@ -147,16 +141,12 @@ describe('<SpanBarRow>', () => {
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(<SpanBarRow {...props} />);
const span = Object.assign(
{
subsidiarilyReferencedBy: [
@ -180,7 +170,7 @@ describe('<SpanBarRow>', () => {
},
props.span
);
const spanRow = shallow(
render(
<SpanBarRow
{...props}
span={span}
@ -188,11 +178,7 @@ describe('<SpanBarRow>', () => {
traceLinks: [{ href: 'href' }, { href: 'href' }],
})}
/>
)
.dive()
.dive()
.dive();
const menu = spanRow.find(SpanLinksMenu);
expect(menu.length).toEqual(1);
);
expect(screen.getAllByTestId('SpanLinksMenu')).toHaveLength(1);
});
});

View File

@ -431,9 +431,9 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
})}
>
<SpanTreeOffset
onClick={isParent ? this._childrenToggle : undefined}
childrenVisible={isChildrenExpanded}
span={span}
onClick={isParent ? this._childrenToggle : undefined}
hoverIndentGuideIds={hoverIndentGuideIds}
addHoverIndentGuideId={addHoverIndentGuideId}
removeHoverIndentGuideId={removeHoverIndentGuideId}
@ -524,7 +524,7 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
[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}

View File

@ -78,7 +78,7 @@ export const SpanLinksMenu = ({ links }: SpanLinksProps) => {
const closeMenu = () => setIsMenuOpen(false);
return (
<>
<div data-testid="SpanLinksMenu">
<button
onClick={(e) => {
setIsMenuOpen(true);
@ -101,7 +101,7 @@ export const SpanLinksMenu = ({ links }: SpanLinksProps) => {
y={menuPosition.y}
/>
) : null}
</>
</div>
);
};

View File

@ -56,13 +56,13 @@ describe('SpanTreeOffset', () => {
wrapper = shallow(<SpanTreeOffset {...props} />)
.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);
});

View File

@ -149,7 +149,7 @@ export class UnthemedSpanTreeOffset extends React.PureComponent<TProps> {
[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<TProps> {
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}
</span>

View File

@ -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();

View File

@ -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');
});
});