apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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>
pull/49186/head
Chrysa Dikonimaki 4 years ago 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
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      .betterer.results
  2. 64
      packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js
  3. 4
      packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
  4. 4
      packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx
  5. 8
      packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js
  6. 4
      packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx
  7. 12
      public/app/features/explore/TraceView/TraceView.test.tsx
  8. 36
      public/app/features/explore/TraceView/TraceViewContainer.test.tsx

7
.betterer.results
Unescape 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": [

64
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js
Unescape 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);
});
});

4
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx
Unescape 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}

4
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanLinks.tsx
Unescape 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>
);
};

8
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js
Unescape 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);
});

4
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx
Unescape 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>

12
public/app/features/explore/TraceView/TraceView.test.tsx
Unescape 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();

36
public/app/features/explore/TraceView/TraceViewContainer.test.tsx
Unescape 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');
});
});

Write Preview
Loading…
Cancel
Save