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

Chore: Convert KeyValuesTable to RTL (#51278)

Browse Source 
* Convert KeyValuesTable to RTL

* Update data-testid

* Update data-testid

* Convert KeyValuesTable to RTL

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
pull/51468/head
Seyaji 4 years ago committed by GitHub
parent 8053f770c1
commit 2473dc68f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 69 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. 105
      packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
  3. 4
      packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
  4. 6
      public/app/features/explore/TraceView/TraceView.test.tsx

7
.betterer.results
Unescape View File

@ -44,9 +44,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/KeyValuesTable.test.js:3813002651": [
[14, 19, 13, "RegExp match", "2409514259"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js:700147304": [
[16, 19, 13, "RegExp match", "2409514259"]
],
@ -2555,7 +2552,7 @@ exports[`better eslint`] = {
"packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx:1954428690": [
[97, 35, 3, "Unexpected any. Specify a different type.", "193409811"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx:1594863792": [
"packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx:3587041872": [
[77, 35, 3, "Unexpected any. Specify a different type.", "193409811"]
],
"packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx:3379895243": [
@ -5702,7 +5699,7 @@ exports[`better eslint`] = {
[56, 15, 3, "Unexpected any. Specify a different type.", "193409811"],
[75, 24, 86, "Do not use any type assertions.", "2242309894"]
],
"public/app/features/explore/TraceView/TraceView.test.tsx:4208667279": [
"public/app/features/explore/TraceView/TraceView.test.tsx:598956578": [
[61, 21, 79, "Do not use any type assertions.", "4192888253"],
[65, 9, 3, "Unexpected any. Specify a different type.", "193409811"],
[159, 18, 9, "Do not use any type assertions.", "3815122951"],

105
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js
Unescape View File

@ -12,60 +12,64 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { shallow } from 'enzyme';
import { render, screen } from '@testing-library/react';
import React from 'react';
import CopyIcon from '../../common/CopyIcon';
import { ubInlineBlock } from '../../uberUtilityStyles';
import KeyValuesTable, { LinkValue } from './KeyValuesTable';
describe('LinkValue', () => {
const title = 'titleValue';
const href = 'hrefValue';
const childrenText = 'childrenTextValue';
const wrapper = shallow(
<LinkValue href={href} title={title}>
{childrenText}
</LinkValue>
);
const data = [
{ key: 'span.kind', value: 'client' },
{ key: 'omg', value: 'mos-def' },
{ key: 'numericString', value: '12345678901234567890' },
{ key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) },
];
const setup = (propOverrides) => {
const props = {
data: data,
...propOverrides,
};
return render(<KeyValuesTable {...props} />);
};
describe('LinkValue', () => {
it('renders as expected', () => {
expect(wrapper.find('a').prop('href')).toBe(href);
expect(wrapper.find('a').prop('title')).toBe(title);
expect(wrapper.find('a').text()).toMatch(/childrenText/);
const title = 'titleValue';
const href = 'hrefValue';
const childrenText = 'childrenTextValue';
render(
<LinkValue href={href} title={title}>
{childrenText}
</LinkValue>
);
expect(screen.getByRole('link', { name: 'titleValue' })).toBeInTheDocument();
expect(screen.getByText(/^childrenTextValue$/)).toBeInTheDocument();
});
});
describe('<KeyValuesTable>', () => {
let wrapper;
const data = [
{ key: 'span.kind', value: 'client' },
{ key: 'omg', value: 'mos-def' },
{ key: 'numericString', value: '12345678901234567890' },
{ key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) },
];
beforeEach(() => {
wrapper = shallow(<KeyValuesTable data={data} />);
});
describe('KeyValuesTable tests', () => {
it('renders without exploding', () => {
expect(wrapper).toBeDefined();
expect(wrapper.find('[data-test-id="KeyValueTable"]').length).toBe(1);
expect(() => setup()).not.toThrow();
});
it('renders a table', () => {
setup();
expect(screen.getByTestId('KeyValueTable')).toBeInTheDocument();
expect(screen.getByRole('table')).toBeInTheDocument();
});
it('renders a table row for each data element', () => {
const trs = wrapper.find('tr');
expect(trs.length).toBe(data.length);
trs.forEach((tr, i) => {
expect(tr.find('[data-test-id="KeyValueTable--keyColumn"]').text()).toMatch(data[i].key);
});
setup();
expect(screen.getByRole('table')).toBeInTheDocument();
expect(screen.getAllByRole('cell')).toHaveLength(12);
expect(screen.getAllByTestId('KeyValueTable--keyColumn')).toHaveLength(4);
expect(screen.getByRole('row', { name: 'span.kind "client"' })).toBeInTheDocument();
expect(screen.getByRole('row', { name: 'jsonkey { "hello": "world" }' })).toBeInTheDocument();
});
it('renders a single link correctly', () => {
wrapper.setProps({
setup({
linksGetter: (array, i) =>
array[i].key === 'span.kind'
? [
@ -77,29 +81,12 @@ describe('<KeyValuesTable>', () => {
: [],
});
const anchor = wrapper.find(LinkValue);
expect(anchor).toHaveLength(1);
expect(anchor.prop('href')).toBe('http://example.com/?kind=client');
expect(anchor.prop('title')).toBe('More info about client');
expect(anchor.closest('tr').find('td').first().text()).toBe('span.kind');
expect(screen.getByRole('row', { name: 'span.kind More info about client' })).toBeInTheDocument();
});
it('renders a <CopyIcon /> with correct copyText for each data element', () => {
const copyIcons = wrapper.find(CopyIcon);
expect(copyIcons.length).toBe(data.length);
copyIcons.forEach((copyIcon, i) => {
expect(copyIcon.prop('copyText')).toBe(JSON.stringify(data[i], null, 2));
expect(copyIcon.prop('tooltipTitle')).toBe('Copy JSON');
});
});
it('renders a <CopyIcon /> for each data element', () => {
setup();
it('renders a span value containing numeric string correctly', () => {
const el = wrapper.find(`.${ubInlineBlock}`);
expect(el.length).toBe(data.length);
el.forEach((valueDiv, i) => {
if (data[i].key !== 'jsonkey') {
expect(valueDiv.html()).toMatch(`"${data[i].value}"`);
}
});
expect(screen.getAllByRole('button')).toHaveLength(4);
});
});

4
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
Unescape View File

@ -108,7 +108,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
const { data, linksGetter } = props;
const styles = useStyles2(getStyles);
return (
<div className={cx(styles.KeyValueTable)} data-test-id="KeyValueTable">
<div className={cx(styles.KeyValueTable)} data-testid="KeyValueTable">
<table className={uWidth100}>
<tbody className={styles.body}>
{data.map((row, i) => {
@ -133,7 +133,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
return (
// `i` is necessary in the key because row.key can repeat
<tr className={styles.row} key={`${row.key}-${i}`}>
<td className={styles.keyColumn} data-test-id="KeyValueTable--keyColumn">
<td className={styles.keyColumn} data-testid="KeyValueTable--keyColumn">
{row.key}
</td>
<td>{valueMarkup}</td>

6
public/app/features/explore/TraceView/TraceView.test.tsx
Unescape View File

@ -119,21 +119,21 @@ describe('TraceView', () => {
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"]' });
table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' });
expect(table.innerHTML).toContain('client-uuid-1');
await userEvent.click(firstSpan);
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"]' });
table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' });
expect(table.innerHTML).toContain('client-uuid-2');
await userEvent.click(secondSpan);
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"]' });
table = screen.getByText('', { selector: 'div[data-testid="KeyValueTable"]' });
expect(table.innerHTML).toContain('client-uuid-3');
});

Write Preview
Loading…
Cancel
Save